CardView的基本使用

前言

CardView是用于实现卡片式布局效果的重要控件。CardView继承于FrameLayout类，并且可以设置圆角和阴影，是的控件更具有立体性，也可以包含其他的布局容器和控件。

配置Build.gradle

dependencies {
    ...
    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation 'com.android.support:cardview-v7:28.0.0'
    ...
}

布局文件

在这里也说一下CardView的基本属性：

• app:cardBackgroundColor 设置背景颜色
• app:cardCornerRadius 设置圆角大小
• app:cardElevation 设置z轴的阴影
• app:cardMaxElevation z轴的最大高度值
• app:cardUseCompatPadding 是否使用CompatPadding
• app:cardPreventCornerOverlap 是否使用PreventCornerOverlap配置与内部控件进行圆角匹配默认可以圆角处理如果去掉自定义需要重写一些控件进行圆角匹配
• app:contentPadding 设置内容的padding
• app:contentPaddingLeft 左padding
• app:contentPaddingTop 上padding
• app:contentPaddingRight 右padding
• app:contentPaddingBottom 底padding

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:id="@+id/cardView"
        android:layout_margin="25dp"
        app:cardCornerRadius="20dp"
        app:cardElevation="20dp"
        >

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerInside"
            android:background="@drawable/backgrounds"
            />
    </android.support.v7.widget.CardView>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp">

        <SeekBar
            android:id="@+id/seekBar_1"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="控制圆角大小"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp">

        <SeekBar
            android:id="@+id/seekBar_2"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="控制阴影大小"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp">

        <SeekBar
            android:id="@+id/seekBar_3"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="控制图片边距"/>
    </LinearLayout>
    </LinearLayout>
</LinearLayout>

MainActivity

在这里我们设置了3个SeekBar来分别设置CardView的圆角半径、阴影半径和子控件和父控件的距离。

public class MainActivity extends AppCompatActivity {

    private CardView cardView;
    private SeekBar seekBar1;
    private SeekBar seekBar2;
    private SeekBar seekBar3;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        assingViews();
    }

    private void assingViews(){
        cardView = (CardView)findViewById(R.id.cardView);
        seekBar1 = (SeekBar)findViewById(R.id.seekBar_1);
        seekBar2 = (SeekBar)findViewById(R.id.seekBar_2);
        seekBar3 = (SeekBar)findViewById(R.id.seekBar_3);

        seekBar1.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                cardView.setRadius(progress);
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });
        seekBar2.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                cardView.setCardElevation(progress);
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });
        seekBar3.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                cardView.setContentPadding(progress,progress,progress,progress);
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });
    }
}

实现效果

总结

卡片式布局作为Materials Design中提出的一个新的概念，它可以让页面的元素看起来就像在卡片中一样。它的确是令我们的app更加的具有美感，日后也会更多的使用。