如图实现下面流式的tag标签。我们用recyclerview+flexboxLayoutManager来实现。
重点:
FlexboxLayoutManager layoutManager =new FlexboxLayoutManager(this);
rv.setLayoutManager(layoutManager);
1.首先我们引入依赖。在build.gradle文件中。
implementation 'com.google.android.flexbox:flexbox:3.0.0'
2.写布局。使用Recyclerview.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rv"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:itemCount="10"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
3.我们写一个简单的adapter,给recyclerview设置adapter. 由于item的布局很简单。里面只有一个textview。这里就省略。。。
public class FlexboxAdapter extends RecyclerView.Adapter<FlexboxAdapter.FlexboxAdapterHolder> {
Context mContext;
private List<String> mStringArrayList;
public FlexboxAdapter(Context context,List<String> list) {
this.mContext = context;
this.mStringArrayList= list;
}
@Override
public FlexboxAdapterHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View view = LayoutInflater.from(mContext).inflate(R.layout.item, parent, false);
return new FlexboxAdapterHolder(view);
}
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
@SuppressLint("ResourceAsColor")
@Override
public void onBindViewHolder(@NonNull FlexboxAdapterHolder holder, final int position) {
holder.tvTitle.setText(mStringArrayList.get(position));
}
@Override
public int getItemCount() {
return mStringArrayList.size();
}
public class FlexboxAdapterHolder extends RecyclerView.ViewHolder {
private final TextView tvTitle;
public FlexboxAdapterHolder(View itemView) {
super(itemView);
tvTitle = itemView.findViewById(R.id.tvTitle);
}
}
}
4.在我们的MainActivity中,找到recyclerview。然后给recyclerview设置LayoutManager是FlexboxLayoutManager(重点),然后设置相应的adapter. 代码如下。
public class MainActivity extends AppCompatActivity {
private ArrayList<String> dataList =new ArrayList();
private ArrayList<Integer> colorList = new ArrayList();
private RecyclerView rv;
private String[] arr= {"aaaaaaaa.jpg","巴拉巴.jpg","我的下朋友企业.jpg","新中.jpg","我的好朋友是不同的风格类型哦哦哦哦哦","开心","测试tag标签"};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
rv = findViewById(R.id.rv);
//将正常的manager替换为FlexboxLayoutManager
FlexboxLayoutManager layoutManager =new FlexboxLayoutManager(this);
layoutManager.setFlexDirection(FlexDirection.ROW);//设置水平方向。也可以设置垂直方向
// layoutManager.setJustifyContent(JustifyContent.FLEX_END);
// layoutManager.setAlignItems(AlignItems.CENTER);
rv.setLayoutManager(layoutManager);
ArrayList<String> list = new ArrayList<>();
for(int i=0;i<arr.length;i++){
list.add(arr[i]);
}
FlexboxAdapter adapter =new FlexboxAdapter(this,list);
rv.setAdapter(adapter);
}
}
补充:layoutManager.setFlexDirection(FlexDirection.ROW) ;//设置水平方向。从左到右 FlexDirection.COLUMN //垂直方向,从上到下 FlexDirection.ROW_REVERSE //水平方向,从右到左 FlexDirection.COLUMN_REVERSE //垂直方向,从下到上 layoutManager.setFlexWrap(FlexWrap.WRAP); //是否换行FlexWrap.NOWRAP不换行 FlexWrap.WRAP换行 layoutManager.setJustifyContent(JustifyContent.FLEX_END); //项目在主轴上对齐方式,例如上面定义水平方向,就是水平方向对齐方式 layoutManager.setAlignItems(AlignItems.CENTER);//项目在交叉口对齐方式,因为上面定义水平方向,则为在垂直方向对齐方式
想了解更多属性含义可以参考以下文章