RecyclerViewウォーターフォールフローグリッドレイアウトマネージャーAndroidでのStaggeredGridLayoutManagerの使用法

eコマースアプリでは、さまざまなサイズの写真やスタイルを非常に柔軟に表示できるストリーミングレイアウトを使用することがよくあります。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);
    }
}