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。

RecyclerView 的 Item 的布局如下：

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() {
        }

        @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