相關文章
Android Snackbar控制元件
Android FloatingActionButton控制元件
Android Toolbar控制元件
Android AppBarLayout控制元件
Android CollapsingToolbarLayout控制元件
Android CardView控制元件

1. CardView類

CardView是5.0版本出現的控制元件，可以新增圓角陰影的效果。需要在配置中新增依賴

implementation 'com.android.support:cardview-v7.xx'

主要屬性

• cardview_cardBackgroundColor，設定背景色
• cardview_cardCornerRadius，設定圓角大小
• cardview_cardElevation，設定z軸陰影
• cardview_cardMaxElevation，設定z軸最大高度值
• cardview_cardUseCompatPadding，是否使用CompatPadding
• cardview_cardPreventCornerOverlap，是否使用PreventCornerOverlap ,防止內容和邊角的重
• cardview_contentPadding，內容的padding

CardView繼承FrameLayout類，不同版本實現不一致，可參考

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp">
    <View
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@drawable/card_bg" />
</android.support.v7.widget.CardView>
 

效果如下

2. 設定圓角cardCornerRadius

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="10dp"
    android:layout_margin="10dp">
    <View
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@drawable/card_bg" />
</android.support.v7.widget.CardView>

V5.0效果如下

V4.4效果如下

3. 設定陰影

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="10dp"
    app:cardElevation="10dp"
    android:layout_margin="10dp">
    <View
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@drawable/card_bg" />
</android.support.v7.widget.CardView>

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="10dp"
    app:cardElevation="10dp"
    app:cardMaxElevation="20dp"
    android:layout_margin="10dp">
    <View
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@drawable/card_bg" />
</android.support.v7.widget.CardView>

V5.0效果如下

V4.4效果如下

4. 設定padding

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="10dp"
    app:cardElevation="10dp"
    app:cardMaxElevation="20dp"
    app:contentPadding="10dp"
    android:layout_margin="10dp">
    <View
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@drawable/card_bg" />
</android.support.v7.widget.CardView>

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="10dp"
    app:cardElevation="10dp"
    app:cardMaxElevation="20dp"
    app:contentPadding="10dp"
    app:cardUseCompatPadding="true"
    android:layout_margin="10dp">
    <View
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@drawable/card_bg" />
</android.support.v7.widget.CardView>

V5.0效果如下

V4.4效果如下