CardView的使用

最新推荐文章于 2022-02-11 07:26:27 发布

原创最新推荐文章于 2022-02-11 07:26:27 发布

· 1.4k 阅读

1 ·

版权

文章标签：

#CardView的使用

Android 5.0+ 专栏收录该内容

13 篇文章

订阅专栏

参考：https://developer.android.com/training/material/lists-cards.html#CardView

1、简介

Android5.0当中介绍了一个全新的控件：CardView。CardView继承自FrameLayout，并且拥有圆角和阴影效果，经常作为Item在RecyclerView和ListView当中使用。如下所示：

2、使用

（1）RecyclerView的Item的布局文件，这里是把CardView作为RecyclerView的Item使用，所以外面就没有套布局，因为CardView本身就是一个FrameLayout：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/activity_horizontal_margin"
    android:clickable="true"
    android:foreground="?android:attr/selectableItemBackground"
    card_view:cardBackgroundColor="#f0f060"
    card_view:cardCornerRadius="10dp"
    card_view:cardElevation="4dp"
    card_view:contentPadding="10dp">

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="Title"
        android:textSize="30sp" />

</android.support.v7.widget.CardView>

关于CardView有几点需要说明一下：

1、card_view:cardBackgroundColor设定CardView的背景颜色

2、card_view:cardCornerRadius设定圆角半径

3、card_view:cardElevation设定阴影效果，CardView 在 Android 5.0（API 级别 21）及更高版本中使用真实高度与动态阴影，而在早期的 Android 版本中则返回编程阴影实现。

4、card_view:contentPadding设定内容的padding

5、同时给CardView加了两个属性：
android:clickable="true"
android:foreground="android:attr/selectableItemBackground"

这样的话点击CardView会有水波纹扩散的效果。

6、同时需要注意CradView本质上是一个FrameLayout，在布局的时候需要注意一下。

（2）MainActivity布局文件：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/myCoordinatorLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:logo="@android:drawable/ic_dialog_dialer"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:subtitle="sub Title"
            app:title="Title" />
    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/my_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_demo3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/activity_horizontal_margin"
        android:elevation="4dp"
        android:src="@android:drawable/ic_input_add"
        app:backgroundTint="@color/colorPrimary"
        app:fabSize="normal"
        app:layout_behavior="com.easyliu.cardviewdemo.ScrollAwareFABBehaviorDefault"
        app:pressedTranslationZ="12dp"
        app:rippleColor="#33728dff"
        app:useCompatPadding="true" />

</android.support.design.widget.CoordinatorLayout><strong>
</strong>

（3）MainActivity代码：

package com.easyliu.cardviewdemo;

import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    private RecyclerView mRecyclerView;
    private MyAdapter mAdapter;
    private RecyclerView.LayoutManager mLayoutManager;

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

    private void initToolbar() {
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
    }

    /**
     * init the RecyclerViews
     */
    private void initRecyclerViews() {
        mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);
        // 用于提升性能
        mRecyclerView.setHasFixedSize(true);
        // 设置布局
        mLayoutManager = new LinearLayoutManager(this);
        mRecyclerView.setLayoutManager(mLayoutManager);
        //设置适配器
        List<String> myDataset = new ArrayList<String>();
        for (int i = 0; i < 30; i++) {
            String data = new String();
            data += "data ";
            for (int j = 0; j < i; j++) {
                data += "data ";
            }
            myDataset.add(data);
        }
        mAdapter = new MyAdapter(myDataset);
        mAdapter.setOnListItemClickListener(new IOnListItemClickListener() {
            @Override
            public void onClick(int position) {
                Snackbar.make(MainActivity.this.findViewById(R.id.myCoordinatorLayout), "onClick" + position, Snackbar.LENGTH_SHORT).show();
            }

            @Override
            public void onLongClick(int position) {
                Snackbar.make(MainActivity.this.findViewById(R.id.myCoordinatorLayout), "onLongClick" + position, Snackbar.LENGTH_SHORT).show();
            }
        });
        mRecyclerView.setAdapter(mAdapter);
        //设置Item增加、移除动画
        mRecyclerView.setItemAnimator(new DefaultItemAnimator());
    }
}

记得添加依赖项：

 compile 'com.android.support:appcompat-v7:24.1.1'
 compile 'com.android.support:cardview-v7:24.1.1'
 compile 'com.android.support:recyclerview-v7:24.1.1'
 compile 'com.android.support:design:24.1.1'

3、效果如下：

这里使用了CoordinatorLayout的相关效果，关于CoordinatorLayout的使用，请看之前博文：CoordinatorLayout实战