CardView(卡片式布局)

2016-11-16 本文已影响1652人啸天AskSky

效果图

CardView是Android5.0之后出现的，用它可以实现上图所展现的圆角效果、阴影效果。实现方式直接看代码：

第一步：
compile 'com.android.support:cardview-v7:25.0.1' //gradle导入CardView支持包
第二步：

效果图

     <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="10dp"
            app:cardBackgroundColor="#FF8800"
            app:cardCornerRadius="10dp"
            app:cardElevation="8dp">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:gravity="center"
                android:text="测试文本"
                android:textColor="@android:color/white"
                android:textSize="72sp" />
        </android.support.v7.widget.CardView>

API说明

cardBackgroundColor 设置背景颜色，此处直接设置background是不生效的

cardCornerRadius 设置圆角边大小
cardElevation 阴影大小
cardMaxElevation 最大的阴影大小
cardPreventCornerOverlap 在v20和之前的版本中添加内边距，这个属性是为了防止卡片内容和边角的重叠
cardUseCompatPadding 设置内边距，v21+的版本和之前的版本仍旧具有一样的计算方式
contentPadding 内边距
contentPaddingBottom
contentPaddingLeft
contentPaddingRight
contentPaddingTop

cardUseCompatPadding 属性详解

上述代码在API21之前版本运行效果

API21之前效果图

上述代码在API21之后版本运行效果

API21之后效果图

可以看到，当我们设置了卡片阴影效果之后，在API21之前的机型上，CardView会在整体设置大小之内预留出阴影部分的位置，因此实际上的显示出来的效果会比我们想要的大小会小一圈。而API21之后的阴影是绘制在指定View大小之外的

为了兼容低版本机型，可以设置 app:cardUseCompatPadding="true" ，这样，在高版本机型上显示效果就会与低版本机型保持一直，此时你在布局时，设置View大小应该考虑到阴影部分的大小

cardPreventCornerOverlap 属性详解

我在cardView中添加了一个ImageView，代码如下

    <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="10dp"
            app:cardCornerRadius="10dp"
            app:cardBackgroundColor="@color/colorPrimary">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@mipmap/ez"
                android:scaleType="centerCrop"/>
        </android.support.v7.widget.CardView>

在不同版本手机上运行效果是这样的

API20以前效果

API20以后效果

在Android5.0以上运行效果是很令人满意的，但是在5.0以前，CardView内容是不会自动裁切圆角边的，显示出来的效果就很LOW了
如果我在CardView上加上 app:cardPreventCornerOverlap="false" ，效果是这样的

app:cardPreventCornerOverlap="false

好吧，很明显，app:cardPreventCornerOverlap属性默认是true,若为true,这会在CardView内添加边距，防止CardView的圆角边与里面的内容重合

为CardView添加点击效果

点击浮动效果

CardView默认是不能被点击的，要添加点击效果，首先需要添加
android:clickable="true"
自定义CardView点击效果,在/res/animator下创建card_view_click.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_enabled="true"
        android:state_pressed="true">
        <objectAnimator
            android:duration="@android:integer/config_shortAnimTime"
            android:propertyName="translationZ"
            android:valueTo="3dp"
            android:valueType="floatType" />
    </item>
    <item>
        <objectAnimator
            android:duration="@android:integer/config_shortAnimTime"
            android:propertyName="translationZ"
            android:valueTo="0dp"
            android:valueType="floatType" />
    </item>
</selector>

在CardView上添加属性
android:stateListAnimator="@animator/card_view_click"

注意：·android:stateListAnimator·属性仅支持API21以上的Android版本，因此需要创建/layout-v21,将添加动画效果的布局文件放到layout-v21下，当Android版本大于API21时才会加载此布局文件。在layout可以添加不带动画的布局文件，或者用其他效果代替，这个我就不管了。。。

可以在API21以下为CardView添加android:foreground="?attr/selectableItemBackground"，这个是Android自带的一个点击效果，为点击区域添加高亮显示，但是实际效果很LOW，强烈不建议。。。

最后。。。侵权必究，毕竟写了一下午~

如以上内容有任何错误或补充，欢迎加QQ：1195211669 ，验证信息：简书

CardView(卡片式布局)

API说明

cardUseCompatPadding 属性详解

cardPreventCornerOverlap 属性详解

为CardView添加点击效果

猜你喜欢

热点阅读