2-VVI-材料设计之CardView

零、前言

[1].CardView extends FrameLayout
[2].一个带圆角和阴影的FrameLayout,FrameLayout怎么用，它就怎么用
[3].依赖implementation 'com.android.support:cardview-v7:26.1.0'

一、使用：

1.属性一览：

 app:cardBackgroundColor 背景颜色 app:cardCornerRadius 圆角大小 app:cardElevation z轴阴影高度 app:cardMaxElevation z轴最大高度值 app:contentPadding 内容与边距的间隔 app:contentPaddingLeft 内容与左边的间隔 app:contentPaddingTop 内容与顶部的间隔 app:contentPaddingRight 内容与右边的间隔 app:contentPaddingBottom 内容与底部的间隔 app:paddingStart 内容与边距的间隔起始 app:paddingEnd 内容与边距的间隔终止 app:cardUseCompatPadding 设置内边距，在API21及以上版本和之前的版本仍旧具有一样的计算方式 app:cardPreventConrerOverlap 在API20及以下版本中添加内边距，这个属性为了防止内容和边角的重叠 注意：CardView中使用android:background设置背景颜色无效。 

2.可在style里抽一下常用的卡片样式：

 <!--cardView常用配置--> <style name="MyBaseCard" parent="@style/CardView.Light"> <item name="cardPreventCornerOverlap">false</item> <item name="cardUseCompatPadding">true</item> <item name="cardElevation">9dp</item> <item name="cardCornerRadius">6dp</item> <item name="android:foreground">?attr/selectableItemBackground</item> <item name="cardBackgroundColor">#A0BDF4</item> </style> 

3.使用：

<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v7.widget.CardView android:id="@+id/id_cv" style="@style/MyBaseCard" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="15dp" android:layout_marginTop="8dp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.441" app:layout_constraintStart_toStartOf="parent"> <LinearLayout android:layout_width="200dp" android:layout_height="230dp" android:orientation="vertical"> <ImageView android:layout_gravity="center" android:id="@+id/id_img" android:layout_width="wrap_content" android:layout_height="180dp" android:padding="5dp" android:src="@mipmap/c1"/> <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:background="#E8E9EA" android:gravity="center" android:padding="8dp" android:text="红红战士" android:textColor="#FF0000"/> </LinearLayout> </android.support.v7.widget.CardView> </android.support.constraint.ConstraintLayout> 

4.Activity:

public class V02_CardActivity extends AppCompatActivity { @BindView(R.id.id_cv) CardView mIdCv; @BindView(R.id.id_img) ImageView mIdImg; int count = 0; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.a2_card); ButterKnife.bind(this); mIdCv.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { runAnima(); } }); } private void runAnima() { mIdCv.animate().translationX(100 + count).setDuration(1000).start(); count += 10; } } 

---

二、后记

1.阴影Padding

CardView会自动添加一些额外的padding空间来绘制阴影部分， 这也导致了以V21为界的不同系统上CardView的尺寸大小不同 app:cardUseCompatPadding="true"适配 

2.圆角覆盖：剪裁情况

app:cardPreventCornerOverlap="false"适配 

3.点击涟漪

android:foreground="?android:attr/selectableItemBackground" 

---

后记、

1.声明：

[1]本文由张风捷特烈原创,转载请注明
[2]欢迎广大编程爱好者共同交流
[3]个人能力有限，如有不正之处欢迎大家批评指证，必定虚心改正
[4]你的喜欢与支持将是我最大的动力

2.连接传送门：

更多安卓技术欢迎访问:安卓技术栈
我的github地址：欢迎star
简书首发，腾讯云+社区同步更新
张风捷特烈个人网站，编程笔记请访问：http://www.toly1994.com

3.联系我

QQ:1981462002
邮箱：1981462002@qq.com
微信：zdl1994328

4.欢迎关注我的微信公众号，最新精彩文章，及时送达：