使用CardView来设置阴影效果及点击效果

CardView简介

1.CardView继承自FrameLayout,是一个具有圆角背景及阴影效果的FrameLayout.
2.CardView用elevation属性去设置阴影效果在Lollipop版本及以上,并对Lollipop以下的版本做了适配.但是在低版本上,CardView并不去用圆角切割与子View相重叠的部分.而是添加padding避免与子View相交,并且在padding上添加阴影,padding的值为:
paddingLeft=paddingRight=maxCardElevation + (1 - cos45) * cornerRadius paddingBottom=paddingTop= maxCardElevation * 1.5 + (1 - cos45) * cornerRadius
由于CardView的内容与阴影之间已经有了padding,所以就不能够为CardView设置padding了,但可以通过setContentPadding(int, int, int, int),方法设置CardView的边界与子View直接间隔.
3.使用SetCardElevation(float)可以改变阴影的大小,避免正在改变阴影大小的CardView也在移动,阴影的大小由getMaxCardElevation()的值进行限定,如果你打算动态的改变阴影的大小,你应该的在初始化的时候调用setMaxCardElevation()方法进行设置MaxCardElevation.

注意

如果已经为CardView设置了具体的大小,由于设置阴影的存在,在Lollipop版本以上与版之下的显示效果会有不同.可以通过为不同的版本来设置不同的尺寸来解决这个问题.

CardView的使用

添加依赖

compile 'com.android.support:cardview-v7:25.3.1'

使用

<android.support.v7.widget.CardView
        android:id="@+id/cardview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        app:cardCornerRadius="5dp"
        app:cardElevation="5dp"
</android.support.v7.widget.CardView>

CardView的常用属性

XML attributes	用法
app:cardCornerRadius	设置CardView的圆角半径
app:cardElevation	设置z轴高度,来控制阴影的大小
android:foreground	设置CardView的前景
app:contentPadding	设置内边距
app:cardBackgroundColor	设置CardView背景色
app:cardMaxElevation	设置最大z轴高度
app:cardPreventCormorOverlap	true:防止子View被CardView的圆角进行剪切 false: 允许剪切,主要用于适配Lollipop以下

为CardView设置点击效果

现在通过设置background来设置CardView的点击效果已经不起作用了,
可以通过设置
android:foreground="?android:attr/selectableItemBackground"
来为CardView来添加系统自带的点击效果.也可以通过自定义来实现:

V21及以上

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#bdbdbd">
    <item android:id="@android:id/mask">
        <shape android:shape="oval">
            <size
                android:width="20dp"
                android:height="20dp" />
            <solid android:color="#f0f0f0" />
        </shape>

    </item>
</ripple>

V21以下

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="oval">
            <solid android:color="#42000000" />
            <size android:width="20dp" android:height="20dp" />
        </shape>
    </item>
    <item android:drawable="#00000000"
          android:state_pressed="false" />
</selector>

注:

版本21以下必须使用通过透明度控制灰度的色值,如:#42000000

最后编辑于：2018.02.02 22:51:47