Android Material Design 之 CardView

前言

Material Design 推荐使用卡片布局，详情可以参照 https://material.io/guidelines/components/cards.html#

简单使用

下面我们使用 RecyclerView + CardView 来实现一个简单的 Sample。

首先添加相应的依赖

implementation 'com.android.support:appcompat-v7:26.0.0'
implementation 'com.android.support:recyclerview-v7:26.0.0'
implementation 'com.android.support:cardview-v7:26.0.0'

Android Studio 3.0 开始新建项目默认使用 implementation 了，当然 compile 也能用。

布局文件很简单，只有一个 RecyclerView。

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

RecyclerView 的 Item 的布局如下：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="15dp"
    android:layout_marginRight="15dp"
    android:layout_marginTop="30dp"
    android:foreground="?android:attr/selectableItemBackground"
    app:cardBackgroundColor="@android:color/white"
    app:cardCornerRadius="10dp"
    app:cardElevation="10dp"
    app:contentPadding="8dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/image"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_gravity="center_vertical"
            android:src="@drawable/natuto" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="6dp"
            android:orientation="vertical">

            <TextView
                android:id="@+id/title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="teletian"
                android:textAppearance="@style/TextAppearance.AppCompat.Title" />

            <TextView
                android:id="@+id/content"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:text="aaaaaaaaaa\naaaaaaaaaa\naaaaaaaaaa"
                android:textAppearance="@style/TextAppearance.AppCompat.Body1" />
        </LinearLayout>

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

CardView 继承自 FrameLayout，可以在下面添加子视图。

解释下 CardView 的几个属性
app:cardBackgroundColor：背景色
app:cardCornerRadius：圆角
app:cardElevation：高度
app:contentPadding：padding

android:foreground=”?android:attr/selectableItemBackground”
这是设置点击 CardView 之后产生涟漪的效果。

最后 Activity 的代码如下：

public class MainActivity extends AppCompatActivity {

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

        RecyclerView recyclerView = findViewById(R.id.recycler_view);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        recyclerView.setAdapter(new MyAdapter());
    }

    class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {

        MyAdapter() {
        }

        @Override
        public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int viewType) {
            View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.list_item, viewGroup, false);
            view.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    Toast.makeText(MainActivity.this, "Card is clicked!", Toast.LENGTH_SHORT).show();
                }
            });
            return new ViewHolder(view);
        }

        @Override
        public void onBindViewHolder(ViewHolder viewHolder, int position) {
        }

        @Override
        public int getItemCount() {
            return 50;
        }

        class ViewHolder extends RecyclerView.ViewHolder {
            ViewHolder(View view) {
                super(view);
            }
        }
    }
}

效果如下：

源码

https://github.com/teletian/Android/tree/master/MaterialDesignSamples/CardView