RecyclerView与CardView的使用

2014年google发布了android5.0的版本，系统使用一种新的Material Design设计风格，也给我们带来了很多新的特性，RecyclerView与CardView就是起新的两个组件。
以前我们写列表布局时都是用ListView、GridView等控件，比较繁琐的就是写Adapter了，而且还要对其优化加入viewholder类。现在RecyclerView就可以替代ListView、GridView，而且自带Holder，加上默认的三种布局方式，可以说给开发者带来很大的好处。

如何使用

RecyclerView使用上与一般的AdapterView并没有什么区别，
我们先在build.gradle中添加RecyclerView与CardView的依赖

dependencies {
    compile 'com.android.support:recylerview-v7:25.0.1'
    compile 'com.android.support:cardview-v7:25.0.1'
    ...
}

layout中

...
<android.support.v7.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:overScrollMode="never"
    android:layout_height="match_parent" />
...

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="5dp"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:layout_marginTop="5dp"
    card:cardBackgroundColor="@android:color/white"
    card:cardCornerRadius="5dp"
    card:cardElevation="2dp"
    card:cardMaxElevation="5dp">
    <!--cardMaxElevation：最大卡片阴影的宽度-->
    <!--cardElevation:卡片阴影的宽度-->
    <!--cardBackgroundColor:卡片的背景颜色-->
    <!--cardCornerRadius ：卡片的圆角半径-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/image"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_launcher" />

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:text="1" />
    </LinearLayout>


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

adapter

public class RecyclerAdapter extends RecyclerView.Adapter<RecycleAdapter.MyViewHolder> {
    private Context context;
    private List<String> list;
    private OnItemClickListener onItemClickListener;

    public void setOnItemClickListener(OnItemClickListener onItemClickListener) {
        this.onItemClickListener = onItemClickListener;
    }

    public RecyclerAdapter(Context context, List<String> list) {
        this.context = context;
        this.list = list;
    }

    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(context).inflate(R.layout.item_recycle, parent, false);
        return new MyViewHolder(view);
    }

    @Override
    public void onBindViewHolder(MyViewHolder holder, final int position) {
        final String bean = list.get(position);
        holder.imageView.setImageResource(R.mipmap.ic_launcher);
        holder.title.setText(bean);
        holder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                onItemClickListener.onItemClick(position);
            }
        });
    }

    @Override
    public int getItemCount() {
        return list.size();
    }

    public class MyViewHolder extends RecyclerView.ViewHolder {

        private ImageView imageView;
        private TextView title;

        public MyViewHolder(View view) {
            super(view);
            imageView = (ImageView) view.findViewById(R.id.image);
            title = (TextView) view.findViewById(R.id.title);
        }
    }
    interface OnItemClickListener {
        void onItemClick(int position);
    }
}

activity或fragment中

LinearLayoutManager manager = new LinearLayoutManager(mContext, LinearLayoutManager.VERTICAL, false);
recyclerView.setLayoutManager(manager);
adapter = new RecyclerAdapter(mContext, R.layout.item_recycler, data);
recyclerView.setAdapter(adapter);

• RecylerView使用必须指明LayoutManager，LayoutManager主要有三类
  • LinearLayoutManager 线性布局，有水平、垂直
  • GridLayoutManager 网格布局
  • StaggeredGridLayoutManager 瀑布流布局
• 通过ItemDecoration可以绘制item之间的间隔
• ItemAnimator设置item的增删动画
• click或longClick事件不支持，需要自己写
• item 布局中使用了卡片布局CardView
  • app:cardBackgroundColor这是设置背景颜色
  • app:cardCornerRadius这是设置圆角大小
  • app:cardElevation这是设置z轴的阴影
  • app:cardMaxElevation这是设置z轴的最大高度值
  • app:cardUseCompatPadding是否使用CompatPadding
  • app:cardPreventCornerOverlap是否使用PreventCornerOverlap
  • app:contentPadding 设置内容的padding
  • app:contentPaddingLeft 设置内容的左padding
  • app:contentPaddingTop 设置内容的上padding
  • app:contentPaddingRight 设置内容的右padding
  • app:contentPaddingBottom 设置内容的底padding

效果图

github上相关资源

• RecyclerViewItemAnimators
• DividerItemDecoration
• RecyclerItemDecoration

  总结

  recyclerview作为listview、gridview的替代有着许多的优点，基本上可以完全代替，网上也有许多相关recyclerview的教程、自定义的控件、特效等，cardview卡片布局比较简单，但是实用性和效果是非常好的，用来当做背景再合适不过了。

赏

谢谢你请我吃糖果

支付宝

微信