美文网首页android自定义viewAndroid技术积累MD
使用CardView来设置阴影效果及点击效果

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

作者: 好记性不如烂Bettle | 来源:发表于2018-02-01 22:19 被阅读2835次

    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

    相关文章

      网友评论

        本文标题:使用CardView来设置阴影效果及点击效果

        本文链接:https://www.haomeiwen.com/subject/tetjzxtx.html