CardView的详细使用

 

CardView的详细使用

标签： cardView 阴影圆角卡片 Elevation

2016年09月22日 09:36:56 4294人阅读  评论(0)  收藏  举报

  分类：

android（110） 

目录(?)[-]

1. 一使用它要现在buildgradle中添加依赖
2. 二接下来就放心大胆的使用吧
3. 三接下来简单说一下CardView的属性
4. 四波纹点击效果
5. 五对更早的版本的支持

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