前言

演示使用FlexboxLayoutManager給RecyclerView使用，關(guān)于FlexBoxLaytout的介紹可以參考FlexboxLayout的認(rèn)識(shí)與使用

第一步：item

演示一個(gè)普通的圖片，這里圖片選擇的是wrap_content，所以需要準(zhǔn)備幾張尺寸不同的照片!

<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/iamgeView_flex_box_test"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:scaleType="centerCrop"
    android:layout_margin="1dp"
    android:contentDescription="@string/app_name"
    />

第二步 :ViewHolder

public class PictureViewHolder extends RecyclerView.ViewHolder {

    public PictureViewHolder(@NonNull View itemView) {
        super(itemView);
        imageView = itemView.findViewById(R.id.iamgeView_flex_box_test);
    }

    public void bindTo(@DrawableRes int drawable){
        imageView.setImageResource(drawable);
        ViewGroup.LayoutParams layoutParams = imageView.getLayoutParams();
   
    }
    private ImageView imageView ;

}

第三步：適配器

為了演示采用的是普通的圖片，圖片來(lái)自官方Demo

public class PictureAdapter extends RecyclerView.Adapter<PictureViewHolder> {

    private int [] imgJiHe =
            {R.drawable.aslkdjf
            ,R.drawable.cat_2
            ,R.drawable.cat_2
            ,R.drawable.cat_3
            ,R.drawable.cat_4
            ,R.drawable.cat_5
            ,R.drawable.cat_6
            ,R.drawable.cat_7
            ,R.drawable.cat_8
            ,R.drawable.cat_9
            ,R.drawable.cat_10
            ,R.drawable.cat_11
            ,R.drawable.cat_12
            ,R.drawable.cat_13
            ,R.drawable.cat_14
            ,R.drawable.cat_15
            ,R.drawable.cat_16
            ,R.drawable.cat_17
            ,R.drawable.cat_18
            ,R.drawable.cat_19};



    @NonNull
    @Override
    public PictureViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
        View view = LayoutInflater.from(viewGroup.getContext())
                .inflate(R.layout.item_cat_test,viewGroup,false);

        return new PictureViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull PictureViewHolder pictureViewHolder, int i) {
          int postiont = i%imgJiHe.length;
          pictureViewHolder.bindTo(imgJiHe[postiont]);
    }

    @Override
    public int getItemCount() {
        return imgJiHe.length * 4;
    }
}

第四步，設(shè)置給ReyclerView

       mRecyclerView = findViewById(R.id.recyclerView_test);
        //設(shè)置LayoutManager
        FlexboxLayoutManager flexboxLayoutManager = new FlexboxLayoutManager(this);
        flexboxLayoutManager.setFlexDirection(FlexDirection.ROW);
        flexboxLayoutManager.setFlexWrap(FlexWrap.WRAP);
  //確定主軸與換行方式，這樣的方式類(lèi)似于一般的ListView的樣式
        mRecyclerView.setLayoutManager(flexboxLayoutManager);

        PictureAdapter pictureAdapter = new PictureAdapter();
        mRecyclerView.setAdapter(pictureAdapter);

關(guān)于上面屬性為啥這樣設(shè)置可以參考文章開(kāi)頭，去了解一個(gè)FlexBoxLayout的使用

運(yùn)行結(jié)果

測(cè)試結(jié)果

發(fā)現(xiàn)確實(shí)出現(xiàn)了FlexBoxLayout的特性，自動(dòng)換行的特性?。?！

修改

修改Adapter

public class PictureViewHolder extends RecyclerView.ViewHolder {

    public PictureViewHolder(@NonNull View itemView) {
        super(itemView);
        imageView = itemView.findViewById(R.id.iamgeView_flex_box_test);
    }

    public void bindTo(@DrawableRes int drawable){
        imageView.setImageResource(drawable);
        ViewGroup.LayoutParams layoutParams = imageView.getLayoutParams();
        if (layoutParams instanceof FlexboxLayoutManager.LayoutParams){
               ((FlexboxLayoutManager.LayoutParams) layoutParams).setFlexGrow(1f);
         //加上這句話(huà)，保證主軸上的子view均分主軸剩余空間
       //完全可以給網(wǎng)絡(luò)數(shù)據(jù)添加type，在這里手動(dòng)設(shè)置同一主軸上子View占據(jù)的空間
        }
    }

    
    private ImageView imageView ;


}

222.jpg

可以看出這樣運(yùn)行的效果就比較不錯(cuò)了~
實(shí)現(xiàn)這個(gè)效果的關(guān)鍵是寬度wrap ，選擇不同寬度的子View，這樣才能最大程度的體現(xiàn)FlexBoxLayout的特性?。?！