Android RecyclerView 的瀑布流式布局

　　关于RecyclerView 的使用基础都是RecyclerView转ListView，在RecyclerView的布局方面还有一种布局形式就是StaggeredGridLayoutManager，瀑布流式布局就像上面图片所展示的形式。如果还不太会使用RecyclerView建议先查看博客 Android RecyclerView之代替ListView与GridView 。

瀑布流式布局

这里的瀑布流式是在上次ListView与GridView的基础上面进行了修改。瀑布流式布局主要是通过设置布局属性的来改变每一个子View的高度的，主要在Adapter中进行的修改

MainActivity

public class MainActivity extends AppCompatActivity {
    private RecyclerView  mRecyclerview;
    private List<Fruit> mData=new ArrayList<>();
    private StaggeredRecyclerAdapter mAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mRecyclerview= (RecyclerView) findViewById(R.id.recyclerview);

        initedata();
        mAdapter=new StaggeredRecyclerAdapter(getApplicationContext(),getLayoutInflater(),mData);
        mRecyclerview.setAdapter(mAdapter);
        //设置布局为瀑布流式布局
        mRecyclerview.setLayoutManager(new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL));

        mRecyclerview.addItemDecoration(new DividerItemDecoration(this,DividerItemDecoration.HORIZONTAL_LIST));
    }
    private void initedata(){
       for(int i=0;i<5;i++){
           Fruit fruit=new Fruit("苹果",R.mipmap.apple);
           Fruit fruit1=new Fruit("梨",R.mipmap.pear);
           Fruit fruit2=new Fruit("香蕉",R.mipmap.banana);
           Fruit fruit3=new Fruit("草莓",R.mipmap.strawberry);
           Fruit fruit4=new Fruit("橙子",R.mipmap.orenge);
           mData.add(fruit);
           mData.add(fruit1);
           mData.add(fruit2);
           mData.add(fruit3);
           mData.add(fruit4);

       }

    }

}

Adapter

区别与之前的Adapter有两点：一是：类写成了内部类，二是为每个itemview设置了不同的高度。

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

    private LayoutInflater mInflate;
    private Context mContext;
    private List<Fruit> mData;
    private List<Integer> mHeigh;
    public StaggeredRecyclerAdapter(Context context, LayoutInflater mInflate, List<Fruit> mData) {
        this.mContext=context;
        this.mInflate = mInflate;
        this.mData = mData;
        //创建mHeigh
        mHeigh=new ArrayList<>();
        //为mHeigh赋值，后面用于设置高度
        for(int i=0;i<mData.size();i++){
            mHeigh.add((int)(80+Math.random()*100));
        }
    }

    /** * * @param viewGroup 父布局 RecyclerView * @param i 相当于position * @return ViewHolder */
    @Override
    public StaggeredRecyclerAdapter.MyViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {

        View view=mInflate.inflate(R.layout.item_recylerview,viewGroup,false);
        MyViewHolder myViewHolder=new MyViewHolder(view);



        return myViewHolder;
    }

    @Override
    public void onBindViewHolder(StaggeredRecyclerAdapter.MyViewHolder myViewHolder, int position   ) {
     //获得布局参数
        ViewGroup.LayoutParams lp=myViewHolder.itemView.getLayoutParams();
      //设置高度 lp.height=mHeigh.get(position)+myViewHolder.itemView.getHeight();
      //设置参数，使得每个子view的高度都不相同
        myViewHolder.itemView.setLayoutParams(lp);

        myViewHolder.mImageview.setImageResource(mData.get(position).getImg());
    }

    @Override
    public int getItemCount() {
        return mData.size();
    }
    /** * MyViewHolder中获得子布局中的view */
    class MyViewHolder extends RecyclerView.ViewHolder{


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

            mImageview= (ImageView) itemView.findViewById(R.id.image);
        }
    }
}

布局

布局方面是修改了上面连接的博客的布局，只是换了背景色，添加了红线，去掉了之前的文本

activity_main布局

<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"
   tools:context=".MainActivity">
   <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>

子布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#ADD8E6" >

<ImageView  android:id="@+id/image" android:layout_width="100dp" android:layout_height="100dp" android:src="@mipmap/ic_launcher" android:layout_gravity="center_horizontal"/>
    <View  android:layout_width="match_parent" android:layout_height="2px" android:background="#ff00" android:layout_alignParentBottom="true" ></View>
</RelativeLayout>