CardView使用教程

Android 5.0 版本中新增了CardView，CardView 继承自FrameLayout类，并且可以设置圆角和阴影，使得控件具有立体性，也可以包含其他的布局容器和控件。

CardView.gif

配置build.gradle

如果SDK低于5.0，仍旧要引入v7包。

dependencies {
    implementation 'com.android.support:appcompat-v7:26.1.0'
    compile "com.android.support:cardview-v7:26.1.0"
}

使用CardView

xml布局代码

java 代码

package com.siomt.cardviewdemo;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.CardView;
import android.widget.SeekBar;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private CardView cardView;
    private SeekBar sbElevation;
    private SeekBar sbCornerRadius;//边缘弧度数
    private SeekBar sbMaxElevation;
    private TextView tvMax;
    private TextView tvNow;
    private TextView tvRadius;

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

    private void initView() {
        cardView = findViewById(R.id.card_view);
        sbElevation = findViewById(R.id.sb_card_elevation);
        sbMaxElevation = findViewById(R.id.sb_max_elevation);
        sbCornerRadius = findViewById(R.id.sb_corner_radius);
        tvMax = findViewById(R.id.tv_max);
        tvNow = findViewById(R.id.tv_now);
        tvRadius = findViewById(R.id.tv_radius);

        sbElevation.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                cardView.setCardElevation(progress);
                tvNow.setText("设置阴影值:"+progress+"dp");
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });

        sbMaxElevation.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                cardView.setMaxCardElevation(progress);
                tvMax.setText("设置最大的阴影:"+progress+"dp");
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });

        sbCornerRadius.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                cardView.setRadius(progress);
                tvRadius.setText("设置边缘弧度数:"+progress+"dp");
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });

    }
}

相关属性

• app:cardCornerRadius="4dp" 设置圆角半径
• app:cardElevation="5dp" 设置阴影的大小
• app:cardMaxElevation="10dp" 设置最大阴影的大小
• app:cardPreventCornerOverlap="true" 是否使用PreventCornerOverlap
• app:cardBackgroundColor="@color/colorPrimary" 设置背景颜色
• app:cardUseCompatPadding="true" 是否使用CompatPadding设置内边距
• app:contentPadding="" Card View的padding没有用，要使用这个
• app:contentPaddingLeft="" 内容的左padding
• app:contentPaddingTop="" 内容的上padding
• app:contentPaddingRight="" 内容的右padding
• app:contentPaddingBottom="" 内容的下padding

源码地址

https://github.com/Siomt/CardViewDemo