Material Design控件之 CardView

女爷i 2024-04-03 07:14 67阅读 0赞

## 1. 简介 ##

CardView 是继承于 FrameLayout，官方说明它是一个带有圆角背景和阴影的Framelayout。

从英文解释它是一个卡片视图，CardView 可以作为一个子布局，也可以作为一个父布局里面在填

充子视图（因为它本身是一个Framelayout容器）。

## 2. CardView属性 ##

我们看看它的属性:

用表格来描述更简洁：

<table style="width:680px;"> 
 <tbody> 
  <tr> 
   <td><strong>属性</strong></td> 
   <td><strong>说明</strong></td> 
  </tr> 
  <tr> 
   <td>app:cardBackgroundColor</td> 
   <td>卡片背景颜色</td> 
  </tr> 
  <tr> 
   <td>app:cardCornerRadius</td> 
   <td>卡片的圆角大小</td> 
  </tr> 
  <tr> 
   <td>app:cardElevation</td> 
   <td>阴影的大小</td> 
  </tr> 
  <tr> 
   <td>app:cardMaxElevation</td> 
   <td>阴影最大高度</td> 
  </tr> 
  <tr> 
   <td>app:contentPadding</td> 
   <td>卡片内容与边距的间隔</td> 
  </tr> 
 </tbody> 
</table>

我们来写一个布局文件：activity\_cardview.xml

<?xml version="1.0" encoding="utf-8"?>
    <androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        xmlns:app="http://schemas.android.com/apk/res-auto">
    
        <androidx.cardview.widget.CardView
            android:clickable="true"
            android:foreground="?android:attr/selectableItemBackground"
            app:cardBackgroundColor="#FFC0CB"
            app:cardCornerRadius="10dp"
            app:cardElevation="7dp"
            app:contentPadding="3dp"
            android:layout_gravity="center"
            android:layout_height="wrap_content"
            android:layout_width="400dp">
    
            <RelativeLayout
    
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
    
                <ImageView
                    android:id="@+id/image"
                    android:layout_height="280dp"
                    android:layout_width="match_parent"
                    android:src="@drawable/xiaoqingxin"
                    android:scaleType="fitCenter"
                    />
    
                <TextView
                    android:layout_height="wrap_content"
                    android:layout_width="wrap_content"
                    android:textSize="14dp"
                    android:text="夏天的风,暖暖的。吹到身上,舒舒服服的。夏天的风,有的不仅仅是泥土的芬芳,花鸟的姿色,还有一份独特而又朴实的青涩。"
                    android:layout_below="@id/image"
                    android:layout_marginTop="1dp"
                    android:fontFamily="sans-serif-black"
                    />
            </RelativeLayout>
        </androidx.cardview.widget.CardView>
    
    </androidx.coordinatorlayout.widget.CoordinatorLayout>

####  ####

CardView作为父布局CoordinatorLayout的子控件  
自身内部又包含了一个RelativeLayout子控件：包含一张图片和文字说明

####  ####

#### 2.1 添加水波纹点击效果 ####

CardView默认是没有点击效果的，如果要添加，如下方法：

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

1. 配置可点击 2. 设置 android:foreground 属性

#### 2.2 设置背景颜色 ####

app:cardBackgroundColor="\#FFC0CB"

设置为粉红色背景

#### 2.3 设置圆角 ####

app:cardCornerRadius="10dp"