Android之CardView

　　在Android5.0之后为我们新增了一个新的控件CardView，CardView是一个卡片布局，布局可以包含圆角和阴影，本质上CardView是一个FrameLayout，因此它作为一个布局容器，可以布局其他的View。

　　CardView中常用的属性有：

1、  cardElevation:设置阴影的大小

2、  cardBackgroundColor:卡片布局的背景演示

3、  cardCornerRadius：卡片布局的圆角的大小

4、  conentPadding：卡片布局和内容之间的距离

　　先上案例内容，具体无下图所示：

具体使用步骤如下：

第一步添加支持库，具体看参照下图：

第二步，编写布局文件，布局文件具体内容如下：

<?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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.jredu.blog.CardViewActivity">

    <TextView
        android:id="@+id/radius_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="5dp"
        android:text="Radius"
        android:textColor="@android:color/black" />

    <SeekBar
        android:id="@+id/corner_radius_seek_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"

        android:max="100" />

    <TextView
        android:id="@+id/elevation_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="5dp"
        android:text="Elevation"
        android:textColor="@android:color/black" />

    <SeekBar
        android:id="@+id/elevation_seek_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"

        android:max="50" />

    <TextView
        android:id="@+id/alpha_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="5dp"
        android:text="Alpha"
        android:textColor="@android:color/black" />

    <SeekBar
        android:id="@+id/alpha_seek_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="255"
        android:progress="255" />

    <TextView
        android:id="@+id/color_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="5dp"
        android:text="Background"
        android:textColor="@android:color/black" />

    <RadioGroup
        android:id="@+id/select_bg_color_radio"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/def"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/cardview_light_background"
            android:checked="true" />

        <RadioButton
            android:id="@+id/red"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/card_red" />

        <RadioButton
            android:id="@+id/blue"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/card_blue" />
    </RadioGroup>

    <android.support.v7.widget.CardView
        android:id="@+id/cardView"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_margin="8dp"
        android:clickable="true"
        android:foreground="?android:selectableItemBackground"
        app:cardElevation="10dp"
        app:contentPadding="10dp">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/face"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:src="@mipmap/ic_launcher" />

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_marginLeft="15dp"
                android:layout_toRightOf="@id/face"
                android:gravity="center_vertical"
                android:orientation="vertical">

                <TextView

                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="13611111111"
                    android:textColor="@android:color/black"
                    android:textSize="16sp" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="5dp"
                    android:text="Mobile"
                    android:textColor="@android:color/black"
                    android:textSize="16sp" />
            </LinearLayout>

            <ImageView
                android:id="@+id/msg"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_alignParentRight="true"
                android:src="@mipmap/ic_launcher" />
        </RelativeLayout>
    </android.support.v7.widget.CardView>

</LinearLayout>

第三步，在Activity中编写实现逻辑

public class CardViewActivity extends AppCompatActivity {

    private CardView mCardView;
    private SeekBar mCornerRadiusSeekBar;
    private SeekBar mElevationSeekBar;
    private SeekBar mAlphaSeekBar;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_card_view);
        mCardView = (CardView)findViewById(R.id.cardView);

        mCornerRadiusSeekBar = (SeekBar) findViewById(R.id.corner_radius_seek_bar);
        mCornerRadiusSeekBar.setProgress((int) mCardView.getRadius());
        mCornerRadiusSeekBar.setOnSeekBarChangeListener(SeekBarChangeListener);

        mElevationSeekBar = (SeekBar) findViewById(R.id.elevation_seek_bar);
        mElevationSeekBar.setProgress((int) mCardView.getCardElevation());
        mElevationSeekBar.setOnSeekBarChangeListener(SeekBarChangeListener);

        mAlphaSeekBar = (SeekBar) findViewById(R.id.alpha_seek_bar);
        mAlphaSeekBar.setProgress((int) ViewCompat.getAlpha(mCardView) * 255);
        mAlphaSeekBar.setOnSeekBarChangeListener(SeekBarChangeListener);

        RadioGroup rb = (RadioGroup) findViewById(R.id.select_bg_color_radio);
        rb.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                //设置背景
                mCardView.setCardBackgroundColor(
                        getResources().getColor(getColorId(checkedId)));
            }
        });
    }

    private SeekBar.OnSeekBarChangeListener SeekBarChangeListener = new SeekBar.OnSeekBarChangeListener(){
        @Override
        public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
            //设置圆角
            if (mCornerRadiusSeekBar.getProgress() != mCardView.getRadius()) {
                mCardView.setRadius(mCornerRadiusSeekBar.getProgress());
            }
            //设置阴影
            if (mElevationSeekBar.getProgress() != mCardView.getCardElevation()) {
                mCardView.setCardElevation(mElevationSeekBar.getProgress());
            }
            //设置透明度
            ViewCompat.setAlpha(mCardView, mAlphaSeekBar.getProgress() / 255f);
        }

        @Override
        public void onStartTrackingTouch(SeekBar seekBar) {

        }

        @Override
        public void onStopTrackingTouch(SeekBar seekBar) {

        }
    };

    private int getColorId(int id) {
        switch (id) {

            case R.id.red:
                return R.color.card_red;
            case R.id.blue:
                return R.color.card_blue;

            default:
                return R.color.cardview_light_background;
        }
    }
}

作者：杰瑞教育
出处：http://www.cnblogs.com/jerehedu/ 
版权声明：本文版权归烟台杰瑞教育科技有限公司和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

技术咨询：