2-VVI-材料设计之CardView

mac2022-06-30  125

零、前言

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

CardView.gif

一、使用:

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.欢迎关注我的微信公众号,最新精彩文章,及时送达:
公众号.jpg

转载于:https://www.cnblogs.com/toly-top/p/9781912.html

相关资源:Node.js-CardView-3d卡片效果-国人
最新回复(0)