Android 5.0 之CardView

来源：互联网发布：vue.js 2.0中文文档编辑：程序博客网时间：2024/05/24 05:48

在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/

0 0