CardView(卡片式布局)

CardView(卡片式布局)_第1张图片
效果图

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

  • 第一步:
    compile 'com.android.support:cardview-v7:25.0.1' //gradle导入CardView支持包
  • 第二步:
CardView(卡片式布局)_第2张图片
效果图
     

            
        

API说明

  • cardBackgroundColor 设置背景颜色,此处直接设置background是不生效的
  • cardCornerRadius 设置圆角边大小
  • cardElevation 阴影大小
  • cardMaxElevation 最大的阴影大小
  • cardPreventCornerOverlap 在v20和之前的版本中添加内边距,这个属性是为了防止卡片内容和边角的重叠
  • cardUseCompatPadding 设置内边距,v21+的版本和之前的版本仍旧具有一样的计算方式
  • contentPadding 内边距
  • contentPaddingBottom
  • contentPaddingLeft
  • contentPaddingRight
  • contentPaddingTop

cardUseCompatPadding 属性详解

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


CardView(卡片式布局)_第3张图片
API21之前效果图

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


CardView(卡片式布局)_第4张图片
API21之后效果图

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

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

cardPreventCornerOverlap 属性详解

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

    

            
        

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


CardView(卡片式布局)_第5张图片
API20以前效果
CardView(卡片式布局)_第6张图片
API20以后效果

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

CardView(卡片式布局)_第7张图片
app:cardPreventCornerOverlap="false

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

为CardView添加点击效果

CardView(卡片式布局)_第8张图片
点击浮动效果
  • CardView默认是不能被点击的,要添加点击效果,首先需要添加
    android:clickable="true"
  • 自定义CardView点击效果,在/res/animator下创建card_view_click.xml


    
        
    
    
        
    

  • 在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(卡片式布局))