Android — 使用recyclerview+FlexboxLayoutManager实现Tag标签

如图实现下面流式的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);//项目在交叉口对齐方式，因为上面定义水平方向，则为在垂直方向对齐方式

想了解更多属性含义可以参考以下文章

flex布局总结_棒怡情的专栏-CSDN博客