Android中RecyclerView瀑布流网格布局管理器StaggeredGridLayoutManager用法

电商APP中我们时常用到一种流式布局，可以很好的灵活展示我们不同大小的图片和样式。我们的RecyclerView也具有这样的功能，就是借助StaggeredGridLayoutManager来实现流式布局。这里我们就简单介绍一下流式布局的做法。

1.流式布局StaggeredGridLayoutManager常用方法

• 构造函数：可指定网格的列数和方向。
• setSpanCount：设置网格的列数。
• setOrientation：设置瀑布流布局的方向，取值说明同LinearLayoutManager。
• setReverseLayout：设置是否为相反方向开始布局，默认false。如果设置为true，那么垂直方向将从下往上开始布局，水平方向将从右往左开始布局。

2.流式布局示例代码

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);
    }
}