RecycleView探究（1）——实现瀑布流及问题

一、导包：

   compile 'com.android.support:recyclerview-v7:25.0.1'

二、ReycleView使用步骤：

1、在布局中使用RecycleView

<?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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <android.support.v7.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/recycleView" />
</RelativeLayout>

2、创建RecycleView子布局

   <?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="4dp">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:gravity="center"
        android:id="@+id/tv_item"/>

</FrameLayout> 

3、创建一个RecycleView的Adapter和ViewHolder

1. Adapter继承RecyclerView.Adapter，其中泛型T是自己创建的ViewHolder；

2. ViewHolder继承RecyclerView.ViewHolder。

3. 继承RecyclerView.Adapter需要重写3个方法：
   3.3.1 onCreateViewHolder：在这里填充你的RecycleView子布局的View并绑定到ViewHolder上；

   3.3.2 onBindViewHolder：在这里对ViewHolder绑定过的View做处理，比如设置文字、图片等；

   3.3.3 getItemCount：返回子布局的数量，也就是你需要展示在RecycleView上的数据。

4. 继承RecycleView.ViewHolder需要重写构造函数，在这里最好将子布局中的控件提取到。

创建的RecycleView.Adapter和RecycleView.ViewHolder

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

    Context mContext;
    List<String> mList;

    public MyRecycleViewAdapter(Context context,List<String> list){
        mContext = context;
        mList = list;

    }

    //创建ViewHolder并绑定子布局
    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View itemView = LayoutInflater.from(mContext).inflate(R.layout.recycle_item,parent,false);
        MyViewHolder holder = new MyViewHolder(itemView);
        return holder;
    }

    //渲染数据到View中
    @Override
    public void onBindViewHolder(MyViewHolder holder, final int position) {
        int xx = dip2px(4);
        int rightHeight = dip2px(150);
        int leftHeight = (rightHeight * 3 + xx * 4) / 2 - xx;
        ViewGroup.LayoutParams layoutParams = holder.iv.getLayoutParams();

        if(position % 5 == 0 || position % 5 == 3 ){
            layoutParams.height = leftHeight;
            holder.iv.setScaleType(ImageView.ScaleType.CENTER_CROP);
            holder.iv.setImageResource(R.mipmap.a);

        }else{
            layoutParams.height = rightHeight;
            holder.iv.setScaleType(ImageView.ScaleType.CENTER_CROP);
            holder.iv.setImageResource(R.mipmap.b);
        }
        holder.iv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(mContext,"position : " + position,Toast.LENGTH_SHORT).show();
            }
        });
    }

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

    //创建的ViewHolder类
    class MyViewHolder extends RecyclerView.ViewHolder{
        ImageView iv;

        public MyViewHolder(View itemView) {
            super(itemView);

            iv = (ImageView) itemView.findViewById(R.id.tv_item);
        }
    }

}

4、给Adapter中传递数据，我这里是显示两种不同的ImageView：

    Context mContext;
    List<String> mList;
    List<Integer> mHeight;

    public MyRecycleViewAdapter(Context context,List<String> list){
        mContext = context;
        mList = list;
        mHeight = new ArrayList<>();
        for (int i=0;i<mList.size();i++){
            mHeight.add((int)(100 + Math.random()*300));
        }
    }


    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View itemView = LayoutInflater.from(mContext).inflate(R.layout.recycle_item,parent,false);
        MyViewHolder holder = new MyViewHolder(itemView);
        return holder;
    }

    //绑定View，并且渲染数据到View中
    @Override
    public void onBindViewHolder(MyViewHolder holder, final int position) {
        int xx = dip2px(4);
        int rightHeight = dip2px(150);
        int leftHeight = (rightHeight * 3 + xx * 4) / 2 - xx;
        ViewGroup.LayoutParams layoutParams = holder.iv.getLayoutParams();

        if(position % 5 == 0 || position % 5 == 3 ){
            layoutParams.height = leftHeight;
            holder.iv.setScaleType(ImageView.ScaleType.CENTER_CROP);
            holder.iv.setImageResource(R.mipmap.a);

        }else{
            layoutParams.height = rightHeight;
            holder.iv.setScaleType(ImageView.ScaleType.CENTER_CROP);
            holder.iv.setImageResource(R.mipmap.b);
        }
        holder.iv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(mContext,"position : " + position,Toast.LENGTH_SHORT).show();
            }
        });
    }

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

5、在Activity中设置RecycleView

private void initView() {
        //获取RecycleView
        recycleView = (RecyclerView) findViewById(R.id.recycleView);
        //创建Adapter并绑定数据
        mAdapter = new MyRecycleViewAdapter(this,mList);
        //给RecycleView设置一个条目变动时的动画
        recycleView.setItemAnimator(new DefaultItemAnimator());
        //重要：给RycycleView设置一个LayoutManager，我这里设置的是瀑布流StaggeredGridLayoutManager，第一个参数是瀑布流列数或行数，第二个是排列方式
        StaggeredGridLayoutManager sglm = new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL);

//        sglm.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_NONE);

//        GridLayoutManager glm = new GridLayoutManager(this,2);
        recycleView.setLayoutManager(sglm);
        recycleView.setAdapter(mAdapter);

    }

遇到的问题：
我要实现的左侧的条目高度长，右侧的条目高度短，而非随机的高度。

1. 瀑布流的Item的position不固定，是按照高度来排序的，高的在前面。
   解决办法：可以将一部分布局固定成一组，再计算高度。
   

2. 图片的大小没有填满整个ImageView
   解决办法：给ImageView设置ScaleType

holder.iv.setScaleType(ImageView.ScaleType.CENTER_CROP);

三、总结

1、创建RecycleView的item布局

2、创建RecycleView的Adapter和ViewHolder

3、给RecycleView设置LayoutManager