安卓日记——玩转Material Design（RecyclerView+CardView篇）

前面安卓日记——玩转Material Design（伸缩顶部篇）提到要想用顶部伸缩必须要RecyclerView的配合，今天就给大家介绍一下RecyclerView的用法，顺带介绍一下CardView
RecyclerView是一种流式布局，所用的Adapter要求强制使用ViewHolder
这个RecyclerView比传统的流式布局更加自由，当然要写的东西也只是多那么一点而已

1.导入所需的包

 compile 'com.android.support:cardview-v7:23.4.0'
 compile 'com.android.support:appcompat-v7:23.4.0'

2.编辑主layout

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

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

</RelativeLayout>

2.编辑RecyclerView的Item

新建一个layout（我取名为item_recycler）

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:cardBackgroundColor="@android:color/white"
    app:cardCornerRadius="5dp"
    app:cardElevation="5dp"
    android:layout_margin="10dp">

        <ImageView
            android:id="@+id/ivPic"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingBottom="20dp"
            android:adjustViewBounds="true"
            android:scaleType="centerCrop"/>
        <TextView
            android:id="@+id/tvTitle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:gravity="center"/>
</android.support.v7.widget.CardView>

使用CardView作为主布局，把边角弧度设为5dp，提升高度设为5dp
CardView就是这么简单

3.编辑一个Adapter

这个Adapter必须继承自RecyclerView.Adapter，而且要在这个Adapter新建一个继承自RecyclerView.ViewHolder的内部类
然后要在构造方法里传入数据
总的Adapter如下

public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerAdapter.RecVH> {
    List<Product> products=new ArrayList<Product>();

    //构造方法传入数据
    public RecyclerAdapter(List<Product>products){
        this.products=products;
    }

    //创造ViewHolder
    @Override
    public RecVH onCreateViewHolder(ViewGroup parent, int viewType) {
        //把item的Layout转化成View传给ViewHolder
        View view= LayoutInflater.from(parent.getContext()).inflate(R.layout.item_recycler,parent,false);
        return new RecVH(view);
    }
//    将数据放入相应的位置
    @Override
    public void onBindViewHolder(RecVH holder, int position) {
        holder.tvTitle.setText(products.get(position).getTitle());
        holder.ivPic.setImageResource(products.get(position).getImg());
    }

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

    //ViewHolder绑定控件
    public class RecVH extends RecyclerView.ViewHolder{
        ImageView ivPic;
        TextView tvTitle;
        public RecVH(View itemView) {
            super(itemView);
            ivPic= (ImageView) itemView.findViewById(R.id.ivPic);
            tvTitle= (TextView) itemView.findViewById(R.id.tvTitle);
        }
    }
}

4.编辑界面逻辑代码

public class RecyclerActivity extends AppCompatActivity {
    private RecyclerView recyclerView;
    private List<Product>products=new ArrayList<Product>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_recycler);
        initVar();
        initView();
    }

    private void initView() {
        recyclerView= (RecyclerView) findViewById(R.id.recyclerView);
        //设置并列2行的layoutManager
        recyclerView.setLayoutManager(new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL));

//        设置线性布局的layoutManager
//        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);
//        recyclerView.setLayoutManager(linearLayoutManager);

        //设置adapter
        RecyclerAdapter adapter=new RecyclerAdapter(products);
        recyclerView.setAdapter(adapter);
    }

    //新建一些数据
    private void initVar() {
        products.add(new Product(R.drawable.avastar,"hello"));
        products.add(new Product(R.drawable.avastar,"hello"));
        products.add(new Product(R.drawable.logo,"hello"));
        products.add(new Product(R.drawable.avastar,"hello"));
        products.add(new Product(R.drawable.iconfont_source,"hello"));
        products.add(new Product(R.drawable.iconfont_about,"hello"));
        products.add(new Product(R.drawable.iconfont_source,"hello"));
        products.add(new Product(R.drawable.avastar,"hello"));
    }
}

我这里用的是两行并列显示的形式，如果想像listView一样的话就可以把RecyclerView的LayoutManager 设为LinearLayoutManager ，就是上面代码注释掉那一块

一个瀑布流的RecyclerView就大功告成了
把RecyclerView嵌入到篇博客相应的位置就好了

最终效果

其实RecyclerView还有一个玩法就是我想在RecyclerView顶部弄一个不同样式的布局怎么办呢？也就是说顶部item的layout不一样怎么办呢？就像我上篇博客的效果那样，顶部不一样
强大的RecyclerView当然也提供了解决方案
细心的网友会发现onCreateViewHolder方法里有个参数名为viewType
那怎么传入viewType，从而生成不同的ViewHolder呢？
只需重写getItemViewType方法就好了

@Override
    public int getItemViewType(int position) {
        return position;
    }

表示我传入的viewType和position一样，新建ViewHolder时判断viewType如果是0的话就新建不同的View，并且把这个viewType传到ViewHolder的构造方法里，这样才能根据不同的位置使用不用的view绑定不同控件
还要注意的是这时总的item数就等于传入的List的Size+1,还有List中数据的位置也是比实际item的位置-1的。
以另外一个上一篇博客所使用到的Adapter为例
传入List还有顶部的数据

public class ListAdapter extends RecyclerView.Adapter<ListAdapter.MyViewHolder> {

    List<String> mListData;

    public ListAdapter(List<String> mListData) {
        this.mListData = mListData;
    }

    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup viewGroup, int viewType) {
        View view;
        if (viewType==0){
            view= LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.list_item_top,
                    viewGroup, false);
        }else {
             view= LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.list_item,
                    viewGroup, false);
        }


        return new MyViewHolder(view,viewType);
    }

    @Override
    public void onBindViewHolder(MyViewHolder myViewHolder, int viewType) {
        if (viewType!=0){
            myViewHolder.title.setText(mListData.get(viewType-1));
        }else {
            myViewHolder.tvFoucusedNum.setText("100");
            myViewHolder.tvFocusNum.setText("200");
        }

    }

    //item数量是List的Size+1
    @Override
    public int getItemCount() {
        return mListData == null ? 0 : mListData.size()+1;
    }

    @Override
    public int getItemViewType(int position) {
        return position;
    }

    class MyViewHolder extends RecyclerView.ViewHolder {

        TextView title;
        TextView tvFocusNum;
        TextView tvFoucusedNum;
        public MyViewHolder(View itemView,int i) {
            super(itemView);
            if (i==0){
                tvFocusNum= (TextView) itemView.findViewById(R.id.tvFocusNum);
                tvFoucusedNum= (TextView) itemView.findViewById(R.id.tvFocusedNum);
            }else {
                title = (TextView) itemView.findViewById(R.id.listitem_name);
            }

        }
    }

}

这样子就可以区分开顶部啦。

好了关于Material Design的控件使用就介绍到这里，还有一些比较常用的控件也值得去玩的，我就不再介绍了。