前言
演示使用FlexboxLayoutManager给RecyclerView使用，关于FlexBoxLaytout的介绍可以参考FlexboxLayout的认识与使用
第一步：item
演示一个普通的图片，这里图片选择的是wrap_content，所以需要准备几张尺寸不同的照片!
<?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 ;
}
第三步：适配器
为了演示采用的是普通的图片，图片来自官方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;
}
}
第四步，设置给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的特性！！！
