CardView的详细使用

 

CardView的详细使用

标签: cardView 阴影圆角卡片 Elevation
4294人阅读 评论(0) 收藏 举报
 分类:
android(110) 

CardView是android5. 0出现的,效果类似于带有阴影边框的圆角卡片。可以把它看成FrameLayout,这样使用起来就清晰了很多吧。它既可以独立使用也可以是ListView、GradView、RecyclerView等的item布局。

一、使用它要现在build.gradle中添加依赖

 compile 'com.android.support:cardview-v7:23.4.0'
  • 1

二、接下来就放心大胆的使用吧

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    card_view:cardElevation="3dp"
    card_view:cardCornerRadius = "9dp"
    android:clickable="true"
    android:foreground="?android:attr/selectableItemBackground"
    tools:context="com.example.ws.scrollcviewrerurntop.CardViewActivity"
    card_view:cardBackgroundColor="#ff0000"
    card_view:contentPadding ="10dp">

    <!--你要显示的布局,一个控件或者一个其他的布局-->
    <LinearLayout/>
    ……
    </LinearLayout>

</android.support.v7.widget.CardView>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

三、接下来简单说一下CardView的属性

> 1、android:cardCornerRadius 在xml文件中设置card圆角的大小 

> 2、CardView.setRadius在代码中设置card圆角的大小 

> 3、android:cardBackgroundColor 在xml文件中设置card背景颜色

> 4、android:elevation 在xml文件中设置阴影的大小 

> 5、card_view:cardElevation在xml文件中设置阴影的大小 

> 6、card_view:cardMaxElevation 在xml文件中设置阴影最大高度

> 7、card_view:cardCornerRadius 在xml文件中设置卡片的圆角大小

> 8、card_view:contentPadding 在xml文件中设置卡片内容于边距的间隔

> 9、card_view:contentPaddingBottom 在xml文件中设置卡片内容于下边距的间隔

> 10、card_view:contentPaddingTop 在xml文件中设置卡片内容于上边距的间隔

> 11、card_view:contentPaddingLeft 在xml文件中设置卡片内容于左边距的间隔

> 12、card_view:contentPaddingRight 在xml文件中设置卡片内容于右边距的间隔

> 13、card_view:contentPaddingStart 在xml文件中设置卡片内容于边距的间隔起始

> 14、card_view:contentPaddingEnd 在xml文件中设置卡片内容于边距的间隔终止

> 15、card_view:cardUseCompatPadding 在xml文件中设置内边距,V21+的版本和之前的版本仍旧具有一样的计算方式

> 16、card_view:cardPreventConrerOverlap 在xml文件中设置内边距,在V20和之前的版本中添加内边距,这个属性为了防止内容和边角的重叠
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

四、波纹点击效果

默认情况,CardView是不可点击的,并且没有任何的触摸反馈效果。触摸反馈动画在用户点击CardView时可以给用户以视觉上的反馈。 
实现这种行为,需要提供一下属性:android:clickable和android:foreground。

android:clickable="true"
android:foreground="?android:attr/selectableItemBackground"
  • 1
  • 2

五、对更早的版本的支持

在AndroidL之前的设备上,CardView为了支持圆角的效果加上了padding,圆角剪裁操作可以算是很昂贵的操作。相似的,对阴影效果来说,在AndroidL之前,也会提供padding去绘制阴影面积,这些内容的padding是和elevation属性相关的,按照文档:

padding值为:

左右两边的值为:maxCardElevation + (1 - cos45) * cornerRadius 
上下两边的值为:maxCardElevation * 1.5 + (1 - cos45) * cornerRadius

因此,如果你需要给自己的内容加上padding的话,需要使用新的属性:card_view:contentPadding

相似的,如果改变CardView的背景,也需要使用新的属性:card_view:cardBackgroundColor

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页