介紹
??CardView 是 Google 官方發(fā)布 MD 風格卡片布局控件速兔,開發(fā)者可以很方便的使用它將布局做成卡片效果。CardView 繼承自 FrameLayout活玲,并在其基礎上添加了圓角和陰影等效果涣狗。也就是說,你只需要在xml文件中一行代碼就可以實現圓角+陰影效果了舒憾,這會為你的UI增色不少镀钓,快學習運用起來吧!
效果預覽
控件常用屬性
-
設置卡片圓角大卸朴亍:
??app:cardCornerRadius="10dp"
-
設置卡片Z軸高度:高度越高則陰影效果越重
??app:cardElevation="10dp"
-
設置卡片背景色:
??app:cardBackgroundColor="@color/blue"
??Tips:設置android:background="@color/blue"不會起作用丁溅。
-
設置卡片內邊距:
??app:contentPadding="1dp"
-
設置卡片內部上側邊距:(其他類似)
??app:contentPaddingTop="1dp"
布局文件(具體如何使用?)
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".blog.Case50"
tools:ignore="MissingConstraints">
<TextView
android:id="@+id/title"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/green"
android:gravity="center"
android:text="CardView卡片式布局(圓角+陰影效果)"
android:textColor="@color/white"
android:textSize="20sp" />
<androidx.cardview.widget.CardView
android:id="@+id/cardView1"
android:layout_width="300dp"
android:layout_height="150dp"
app:cardBackgroundColor="@color/blue"
app:layout_constraintBottom_toTopOf="@id/cardView2"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/title">
<TextView
android:id="@+id/title1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="CardView示例1:默認效果(圓角+陰影)"
android:textColor="@color/white"
android:textSize="20sp" />
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="@+id/cardView2"
android:layout_width="300dp"
android:layout_height="150dp"
app:cardBackgroundColor="@color/blue"
app:cardCornerRadius="10dp"
app:layout_constraintBottom_toTopOf="@+id/cardView3"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/cardView1">
<TextView
android:id="@+id/title2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="CardView示例2:指定圓角效果"
android:textColor="@color/white"
android:textSize="20sp" />
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="@+id/cardView3"
android:layout_width="300dp"
android:layout_height="150dp"
app:cardCornerRadius="10dp"
app:cardBackgroundColor="@color/blue"
app:cardElevation="10dp"
app:cardMaxElevation="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/cardView2">
<TextView
android:id="@+id/title3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="CardView示例3:指定圓角+指定陰影高度"
android:textColor="@color/white"
android:textSize="20sp" />
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>