继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

MaterialDesign学习篇(七),CardView卡片式布局的使用

一只斗牛犬
关注TA
已关注
手记 478
粉丝 49
获赞 300

什么是CardView

CardView顾名思义就是一个卡片型的View,它是在Android5.0引入的一个控件,作为一个容器使用,它本身继承于FrameLayout,可以说它的使用和FrameLayout差不多,也是用来包裹一些子View,只不过它可以添加圆角和阴影的效果,经常在ListView或RecyclerView的item布局中作为容器使用,使内容看起来更加突出和显眼。

如何使用CardView

先看下效果,未使用CardView时:

使用CardView时的效果:

导入依赖

compile 'com.android.support:cardview-v7:26.0.0-alpha1'

布局文件中,使用CardView

<?xml version="1.0" encoding="utf-8"?><LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        app:contentPadding="5dp"
        app:cardElevation="5dp"
        app:cardCornerRadius="5dp"
        >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        >

        <ImageView
            android:layout_width="150dp"
            android:layout_height="100dp"
            android:background="@mipmap/book"
            />

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical"
            android:layout_marginLeft="5dp"
            android:padding="5dp"
            >

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="特战先驱"
                android:textSize="16sp"
                android:textStyle="bold"
                />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="战争是血淋淋的,战争是实实在在的,战争中的每一个军人都是有血有肉的。本小说恰恰注重于战术层面和细节问题,通过一个个有血有肉的军人,演绎出一段段可歌可泣的具体的战争故事!"
                android:textSize="14sp"
                android:lines="4"
                android:ellipsize="end"
                android:layout_marginTop="5dp"
                />

        </LinearLayout>

    </LinearLayout>

    </android.support.v7.widget.CardView></LinearLayout>

和使用FrameLayout一样,直接用CardView作为容器包裹,其中app:contentPadding="5dp"指定了卡片内容于边距的间隔为5dp,app:cardElevation="5dp"指定了卡片阴影的大小为5dp,app:cardCornerRadius="5dp"指定了卡片的圆角大小为5dp。是不是看起来有种卡片的形状,相比没有添加CardView,是不是显得比较好看。

CardView的一些属性说明

   属性                             说明

cardBackgroundColor              卡片的背景颜色

cardCornerRadius                 卡片的圆角大小

cardElevation                    阴影的大小

cardMaxElevation                 阴影最大高度

cardUseCompatPadding             设置内边距,V21+的版本和之前的版本仍旧具有一样的计算方式

cardPreventCornerOverlap         在V20和之前的版本中添加内边距,这个属性为了防止内容和边角的重叠

contentPadding                     卡片内容于边距的间隔

contentPaddingTop                  卡片内容与顶部的边距

contentPaddingBottom             卡片内容与底部的边距

contentPaddingLeft                 卡片内容与左边的边距

contentPaddingRight                 卡片内容与右边的边距

本文对CardView做了简单的介绍,并演示了它的效果,需要源码的可以查看:

https://github.com/chaychan/MaterialDesignExercise

原文链接:http://www.apkbus.com/blog-917385-68486.html

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP