RecyclerView之使用FlexboxLayoutManager

前言

演示使用FlexboxLayoutManager给RecyclerView使用，关于FlexBoxLaytout的介绍可以参考FlexboxLayout的认识与使用

第一步：item

演示一个普通的图片，这里图片选择的是wrap_content，所以需要准备几张尺寸不同的照片!

第二步 :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 ;

}

第三步：适配器

为了演示采用的是普通的图片，图片来自官方Demo

public class PictureAdapter extends RecyclerView.Adapter {

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

第四步，设置给ReyclerView

       mRecyclerView = findViewById(R.id.recyclerView_test);
        //设置LayoutManager
        FlexboxLayoutManager flexboxLayoutManager = new FlexboxLayoutManager(this);
        flexboxLayoutManager.setFlexDirection(FlexDirection.ROW);
        flexboxLayoutManager.setFlexWrap(FlexWrap.WRAP);
  //确定主轴与换行方式，这样的方式类似于一般的ListView的样式
        mRecyclerView.setLayoutManager(flexboxLayoutManager);

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

关于上面属性为啥这样设置可以参考文章开头，去了解一个FlexBoxLayout的使用

运行结果

测试结果

发现确实出现了FlexBoxLayout的特性，自动换行的特性！！！

修改

修改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);
         //加上这句话，保证主轴上的子view均分主轴剩余空间
       //完全可以给网络数据添加type，在这里手动设置同一主轴上子View占据的空间
        }
    }

    
    private ImageView imageView ;


}

222.jpg

可以看出这样运行的效果就比较不错了~
实现这个效果的关键是宽度wrap ，选择不同宽度的子View，这样才能最大程度的体现FlexBoxLayout的特性！！！