Android5.x CardView 应用解析

本文首发于微信公众号「后厂村码农」

Android 5.0版本中新增了CardView, CardView继承自FrameLayout类，可以在一个卡片布局中一致性的显示内容，卡片可以包含圆角和阴影。也可以布局其他View。

如果sdk低于5.0我们仍旧要引入v7包，我用的是android studio所以我们需要在build.gradle加入如下代码用来自动导入support-v7包，记得配置完后重新Build一下工程。

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:22.2.1'
    compile 'com.android.support:cardview-v7:22.1.0'
}

先看看布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:card_view="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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".CardViewActivity"
    android:orientation="vertical">
    <android.support.v7.widget.CardView
        android:id="@+id/tv_item"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:layout_centerInParent="true"
        card_view:cardCornerRadius="20dp"
        card_view:cardElevation="20dp">
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/itachi85"
            android:scaleType="centerInside"
            />
        <TextView
            android:layout_width="150dp"
            android:layout_height="50dp"
            android:text="android必胜"
            android:textSize="20sp"
            android:layout_gravity="center"
            android:textColor="@android:color/white"/>

    </android.support.v7.widget.CardView>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp">
    <SeekBar
        android:id="@+id/sb_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_marginTop="30dp">
        <SeekBar
            android:id="@+id/sb_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_marginTop="30dp">
        <SeekBar
            android:id="@+id/sb_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>

这里有两个CardView的重要的属性：
card_view:cardCornerRadius用来设置圆角的半径。
card_view:cardElevation用来设置阴影的半径。

接着来看看java代码的调用：

public class CardViewActivity extends AppCompatActivity {
    private CardView mCardView;
    private SeekBar sb1;
    private SeekBar sb2;
    private SeekBar sb3;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_card_view);
        assignViews();

    }
    private void assignViews() {
        mCardView = (CardView) findViewById(R.id.tv_item);
        sb1 = (SeekBar) findViewById(R.id.sb_1);
        sb2 = (SeekBar) findViewById(R.id.sb_2);
        sb3= (SeekBar) findViewById(R.id.sb_3);
        sb1.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int i, boolean b) {
                mCardView.setRadius(i);
            }
            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }
            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });
        sb2.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int i, boolean b) {
                mCardView.setCardElevation(i);
            }
            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }
            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });
        sb3.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int i, boolean b) {
                mCardView.setContentPadding(i,i,i,i);
            }
            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }
            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });

    }