Android实现RecyclerView嵌套流式布局

前言

Android开发中，列表页面是常见需求，流式布局的标签效果也是常见需求，那么两者结合的效果啥样呢？这篇文章简单实现一下。

实现过程

1. 
   
2. 添加流式布局依赖，在app/build.gradle文件中添加如下代码
   

implementation 'com.google.android.flexbox:flexbox:3.0.0'

2. 
   
3. 新建Activity文件RecyclerViewActivity.class
   

package com.example.androidstudy;


import androidx.appcompat.app.AppCompatActivity;

import androidx.recyclerview.widget.LinearLayoutManager;

import androidx.recyclerview.widget.RecyclerView;


import android.os.Bundle;

import android.widget.Toast;


import com.example.androidstudy.adapter.MyRecyclerAdapter;

import com.example.androidstudy.bean.TestData;


import java.util.ArrayList;

import java.util.List;


public class RecyclerViewActivity extends AppCompatActivity {


    private RecyclerView recyclerView;

    private MyRecyclerAdapter adapter;


    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_recycler_view);

        initViews();

        initListener();

    }


    private void initListener() {

        adapter.setItemCellClicker(tag -> Toast.makeText(RecyclerViewActivity.this, tag, Toast.LENGTH_SHORT).show());

    }


    private void initViews() {

        recyclerView = findViewById(R.id.recyclerview);

        // 设置布局管理器

        recyclerView.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false));

        List<String> sss = new ArrayList<>();

        sss.add("重型卡车1");

        sss.add("重车11");

        sss.add("重型卡车3445");

        sss.add("重型卡车6677");

        List<String> sss1 = new ArrayList<>();

        sss1.add("轻型卡车1");

        sss1.add("轻车11");

        sss1.add("轻型卡车3445");

        sss1.add("轻型卡车6677");


        List<String> sss2 = new ArrayList<>();

        sss2.add("其他1");

        sss2.add("其他2");

        List<TestData> list = new ArrayList<>();

        list.add(new TestData("重型",sss));

        list.add(new TestData("轻型", sss1));

        list.add(new TestData("其他", sss2));

        // 实例化Adapter对象

        adapter = new MyRecyclerAdapter(this, list);

        // 设置Adapter

        recyclerView.setAdapter(adapter);

        adapter.notifyDataSetChanged();

    }

}

Activity页面布局activity_recycler_view.xml

<?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=".RecyclerViewActivity">


    <androidx.recyclerview.widget.RecyclerView

        android:id="@+id/recyclerview"

        android:layout_width="match_parent"

        android:layout_height="match_parent"/>


</androidx.constraintlayout.widget.ConstraintLayout>

3. 
   
4. 创建Adapter文件MyRecyclerAdapter.class
   

package com.example.androidstudy.adapter;


import android.content.Context;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.TextView;


import androidx.annotation.NonNull;

import androidx.recyclerview.widget.RecyclerView;


import com.example.androidstudy.R;

import com.example.androidstudy.bean.TestData;

import com.google.android.flexbox.FlexboxLayout;


import java.util.List;


public class MyRecyclerAdapter extends RecyclerView.Adapter<MyRecyclerAdapter.MyViewHolder>{


    private List<TestData> data;

    private Context myContext;


    public MyRecyclerAdapter(Context context, List<TestData> data) {

        this.myContext = context;

        this.data = data;

    }


    @NonNull

    @Override

    public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {

        View inflate = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_cell, parent, false);

        return new MyViewHolder(inflate);

    }


    public interface ItemCellClicker{

        void onItemClick(String tag);

    }


  // 流式布局标签点击事件

    public ItemCellClicker itemCellClicker;

  // 设置点击事件回调

    public void setItemCellClicker(ItemCellClicker itemCellClicker){

        this.itemCellClicker = itemCellClicker;

    }


    @Override

    public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {

        TextView title = holder.itemView.findViewById(R.id.tv_title);

        FlexboxLayout flexboxLayout = holder.itemView.findViewById(R.id.flexbox_layout);


        TestData data = this.data.get(position);

        List<String> tags = data.getTag();

        flexboxLayout.removeAllViews();

        // flexbox布局动态添加标签

        for (int i = 0; i < tags.size(); i++) {

            String temp = tags.get(i);

            View tagView = LayoutInflater.from(myContext).inflate(R.layout.item_tag_cell, null, false);

            TextView tag = tagView.findViewById(R.id.tv_tag);

            tag.setText(temp);

            // 设置标签点击事件

            tag.setOnClickListener(view -> itemCellClicker.onItemClick(temp));

            flexboxLayout.addView(tagView);

        }

        title.setText(data.getTitle());

    }


    @Override

    public int getItemCount() {

        return data.size();

    }


    public static class MyViewHolder extends RecyclerView.ViewHolder{


        public MyViewHolder(@NonNull View itemView) {

            super(itemView);

        }

    }

}

列表项布局item_cell.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout 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="wrap_content"

    android:orientation="vertical"

    android:padding="10dp"

    tools:context=".MyActivity">


    <TextView

        app:layout_constraintTop_toTopOf="parent"

        app:layout_constraintLeft_toLeftOf="parent"

        android:id="@+id/tv_title"

        android:text="Hello android"

        android:textSize="20sp"

        android:textColor="@color/black"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"/>

    <!--流式布局-->

    <com.google.android.flexbox.FlexboxLayout

        android:id="@+id/flexbox_layout"

        android:orientation="horizontal"

        app:flexWrap="wrap"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"/>


</LinearLayout>

列表中标签布局item_tag_cell.xml

<LinearLayout 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="wrap_content"

    android:padding="10dp"

    tools:context=".MyActivity">


    <TextView

        android:id="@+id/tv_tag"

        android:paddingHorizontal="12dp"

        android:background="@drawable/item_tag_bg"

        android:gravity="center"

        android:text="Hello android"

        android:textSize="20sp"

        android:textColor="@color/black"

        android:layout_width="wrap_content"

        android:layout_height="32dp"/>


</LinearLayout>

效果