RecyclerView waterfall flow grid layout manager StaggeredGridLayoutManager usage in Android

In e-commerce APP, we often use a streaming layout, which can flexibly display our pictures and styles of different sizes. Our RecyclerView also has such a function, which is to achieve flow layout with the help of StaggeredGridLayoutManager. Here we briefly introduce the practice of flow layout.

1. Common methods of flow layout StaggeredGridLayoutManager

• Constructor: you can specify the number of columns and direction of the grid.
• setSpanCount: Set the number of columns in the grid.
• setOrientation: Set the direction of the waterfall flow layout, the value description is the same as LinearLayoutManager.
• setReverseLayout: Set whether to start the layout in the opposite direction, the default is false. If set to true, the vertical direction will start layout from bottom to top, and the horizontal direction will start layout from right to left.

2. Streaming layout sample code

activity.xml

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

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scrollbars="none"
        android:background="#000000"/>
</LinearLayout>

item_recycler.xml

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

    <ImageView
        android:id="@+id/iv"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_gravity="center"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:src="@mipmap/aaa" />
</LinearLayout>

HomeAdapter.java

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

    private Context mContext;
    private int[] strs = new int[]{100,140,180};

    public HomeAdapter(Context mContext) {
        this.mContext = mContext;
    }

    /**
     * 引入布局
     * @param viewGroup
     * @param i
     * @return
     */
    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
        MyViewHolder holder = new MyViewHolder(LayoutInflater.from(mContext).inflate(R.layout.item_recycler,viewGroup,false));
        return holder;
    }

    /**
     * 为控件绑定数据
     * @param myViewHolder
     * @param i
     */
    @Override
    public void onBindViewHolder(MyViewHolder myViewHolder, int i) {
        if (i%2 == 0){
            myViewHolder.iv.setImageResource(R.mipmap.aaa);
        }else{
            myViewHolder.iv.setImageResource(R.mipmap.bbb);
        }
        Random r = new Random();
        int ran1 = r.nextInt(3);
        LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) myViewHolder.iv.getLayoutParams();
        params.height = strs[ran1];
        myViewHolder.iv.setLayoutParams(params);
    }

    /**
     * 返回项个数
     * @return
     */
    @Override
    public int getItemCount() {
        return 100;
    }

    /**
     * 定义控件并初始化
     */
    class MyViewHolder extends RecyclerView.ViewHolder{

        ImageView iv;

        public MyViewHolder(View itemView) {
            super(itemView);
            iv = itemView.findViewById(R.id.iv);
        }
    }
}

MainActivity.java

public class MainActivity extends AppCompatActivity {

    private RecyclerView recycler;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //初始化控件
        recycler = findViewById(R.id.recycler);
        //创建一个垂直方向的网格布局管理器
        StaggeredGridLayoutManager manager = new StaggeredGridLayoutManager(4,LinearLayout.VERTICAL);
        //设置循环视图的布局管理器
        recycler.setLayoutManager(manager);
        //设置item增加和删除时的动画
        recycler.setItemAnimator(new DefaultItemAnimator());
        recycler.addItemDecoration(new SpacesItemDecoration(1));
        HomeAdapter mAdapter = new HomeAdapter(this);
        recycler.setAdapter(mAdapter);
    }
}