一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第6天，点击查看活动详情。

实现分析

应用中比较常见的一个分类列表样式，类似手机京东那样的商品分类，下面我们简单进行分析一下，首先是点击左侧的分类大类，去更新右侧的分类详情，那么布局我们就使用2个RecycletrView，当点击第一个RecyclerVie的item时让当前item有被选中的效果，然后去更新第二个RecyclerView的数据。数据我们就使用list集合创建一些固定的数据进行模拟实现。

布局代码

布局就使用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/re_class"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"/>
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/re_model"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        app:layout_constraintLeft_toRightOf="@id/re_class"
        app:layout_constraintTop_toTopOf="parent"
        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"/>
</androidx.constraintlayout.widget.ConstraintLayout>

另外我们还要创建RecyclerView的item布局，我们就简单创建一个只有TextView的item布局:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <TextView
        android:id="@+id/tv_text"
        android:layout_width="wrap_content"
        android:layout_height="100dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        android:text="手机"
        android:gravity="center"
        android:textSize="18sp"
        android:textColor="@color/black"
        />
</androidx.constraintlayout.widget.ConstraintLayout>

实现代码

这里我们同样要创建2个Adapter来对应布局中的2个RecyclerView，下面推荐一个快速编写Adapter的第三方库，能够帮我们减少很多无效的代码量：BaseRecyclerViewAdapterHelper，使用方法可阅读链接仓库的文档。首先我们创建实体类ClassBean供第一个RecyclerView的adapter使用，里面包含2个参数，一个是当前分类的name,另外一个就是当前item是否被选中的布尔值isSelect,代码如下：

//類型
public class ClassBean {
    private String name;//分类名
    private boolean isSelect;//item是否被选中
    public ClassBean(String name, boolean isSelect) {
        this.name = name;
        this.isSelect = isSelect;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public boolean isSelect() {
        return isSelect;
    }
    public void setSelect(boolean select) {
        isSelect = select;
    }
}

ClassAdapter的代码：

public class ClassAdapter extends BaseQuickAdapter<ClassBean, BaseViewHolder> {
    public ClassAdapter(int layoutResId, List<ClassBean> data) {
        super(layoutResId, data);
    }
    @Override
    protected void convert(BaseViewHolder baseViewHolder, ClassBean s) {
        TextView tvText = baseViewHolder.findView(R.id.tv_text);
        tvText.setText(s.getName());
        //判断是否选中item
        if(s.isSelect()){
            tvText.setTextColor(Color.parseColor("#0099ff"));
        }else {
            tvText.setTextColor(Color.parseColor("#000000"));
        }
    }
}

ModelAdapter代码：

public class ModelAdapter extends BaseQuickAdapter<String , BaseViewHolder> {
    public ModelAdapter(int layoutResId, List<String> data) {
        super(layoutResId, data);
    }

    @Override
    protected void convert(BaseViewHolder baseViewHolder, String s) {
        TextView tvText = baseViewHolder.findView(R.id.tv_text);
        tvText.setText(s);
    }
}

接下来就是Activity中的代码啦，我们使用了ViewBinding，这样可以减少我们编写findViewById()代码，至于ViewBinding的使用我们可以参考郭神的这篇博客文档进行查看。

这里的数据我们就使用ArrayList进行模拟一些数据，在第一个RecyclerView item的点击方法里面我们去进行改变刷新第二个recyclerView的数据。具体代码如下：

public class MainActivity extends AppCompatActivity {
    private ClassAdapter classAdapter;
    private ModelAdapter modelAdapter;
    private List<ClassBean> classList=new ArrayList<>();
    private List<String> modelList=new ArrayList<>();
    private ActivityMainBinding binding;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        binding=ActivityMainBinding.inflate(getLayoutInflater());
        setContentView(binding.getRoot());

        //添加固定分类数据
        classList.add(new ClassBean("蔬菜",true));
        classList.add(new ClassBean("水果",false));
        classList.add(new ClassBean("蛋奶",false));
        //添加固定类型数据
        modelList.add("白菜");
        modelList.add("黄瓜");
        modelList.add("茄子");

        //分类
         classAdapter=new ClassAdapter(R.layout.item_class,classList);
        binding.reClass.setAdapter(classAdapter);

        //类型
         modelAdapter=new ModelAdapter(R.layout.item_class,modelList);
        binding.reModel.setAdapter(modelAdapter);


        //分类点击事件
        classAdapter.setOnItemClickListener(new OnItemClickListener() {
            @Override
            public void onItemClick(@NonNull BaseQuickAdapter<?, ?> adapter, @NonNull View view, int position) {
                String className = classList.get(position).getName();
                if(className.equals("蔬菜")){
                    modelList.clear();
                    modelList.add("白菜");
                    modelList.add("黄瓜");
                    modelList.add("茄子");
                    modelAdapter.notifyDataSetChanged();
                    setSelect(position);
                }else if(className.equals("水果")){
                    modelList.clear();
                    modelList.add("苹果");
                    modelList.add("香蕉");modelList.add("橘子");
                    modelList.add("橙子");
                    modelAdapter.notifyDataSetChanged();
                    setSelect(position);
                }else if(className.equals("蛋奶")){
                    modelList.clear();
                    modelList.add("土鸡蛋");
                    modelList.add("黑猪肉");
                    modelList.add("五花肉");
                    modelList.add("排骨");
                    modelAdapter.notifyDataSetChanged();
                    setSelect(position);

                }
            }
        });
    }

    //设置选中当前分类item
    private void setSelect(int position){
        for (ClassBean classBean : classList) {
            classBean.setSelect(false);
        }
        classList.get(position).setSelect(true);
        classAdapter.notifyDataSetChanged();
    }


}

下面来看一下运行效果图：

如文章有不足之处，还请指正！

recyclerView模拟分类联动效果

实现分析

布局代码

实现代码