RecyclerView实现复杂的多布局效果（类似2个Recyc

引言

  RecyclerView不只能进行单页面布局，而且可以通过重写adapter中的getItemViewType方法来进行多种View布局，今天就来使用RecyclerView实现复杂的多布局效果。实现一个RecyclerView中嵌套两个RecyclerView的效果，第一个横向滚动的Recycler同时又是纵向RecyclerView的第一个ItemView。话不多说，搞定它！

---

效果预览

Recycler多布局效果.gif

---

用法

第一步：布局文件（主）

<?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=".blog.Case34"
    tools:ignore="MissingConstraints">

    <TextView
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="?android:attr/actionBarSize"
        android:background="@color/green"
        android:gravity="center"
        android:text="Recycler多布局（两个Recycler）"
        android:textColor="@color/white"
        android:textSize="20sp" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@id/title" />

</androidx.constraintlayout.widget.ConstraintLayout>

第二步：新建适配器类

/**
 * @data on 2020/9/27 9:21 AM
 * @auther armstrong
 * @describe Recycler多布局（2个Recycler）效果
 */
public class RecyclerView2TypeAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
    private final int HOR_RECYCLER = 0;
    private final int VER_RECYCLER = 1;

    private List<Fruit> banannaList;
    private List<Fruit> mangguoList;

    private Context mContext;

    public RecyclerView2TypeAdapter(Context context, List<Fruit> fruitList1, List<Fruit> fruitList2) {
        this.mContext = context;
        this.banannaList = fruitList1;
        this.mangguoList = fruitList2;
    }


    @NonNull
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view;
        if (viewType == HOR_RECYCLER) {
            view = LayoutInflater.from(parent.getContext()).inflate(R.layout.case34_hor_recycler, parent, false);
            return new HorViewHolder(view);
        } else {
            view = LayoutInflater.from(parent.getContext()).inflate(R.layout.case7_item_fruit, parent, false);
            return new VerViewHolder(view);
        }
    }

    @Override
    public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
        if (holder instanceof HorViewHolder) {
            HorViewHolder horViewHolder = (HorViewHolder) holder;
            LinearLayoutManager layoutManager = new LinearLayoutManager(mContext);
            layoutManager.setOrientation(RecyclerView.HORIZONTAL);
            horViewHolder.horRecycler.setLayoutManager(layoutManager);
            horViewHolder.horRecycler.setAdapter(new FruitHorRecyclerVIewAdapter(banannaList));
        } else if (holder instanceof VerViewHolder) {
            VerViewHolder verViewHolder = (VerViewHolder) holder;
            verViewHolder.fruitImage.setImageResource(mangguoList.get(position - 1).getImageId());
            verViewHolder.fruitName.setText(mangguoList.get(position - 1).getName());
        }
    }

    public static class HorViewHolder extends RecyclerView.ViewHolder {
        public RecyclerView horRecycler;

        public HorViewHolder(@NonNull View itemView) {
            super(itemView);
            horRecycler = itemView.findViewById(R.id.hor_recycler);
        }
    }

    public static class VerViewHolder extends RecyclerView.ViewHolder {
        public ImageView fruitImage;
        public TextView fruitName;

        public VerViewHolder(@NonNull View itemView) {
            super(itemView);
            fruitImage = itemView.findViewById(R.id.fruit_image);
            fruitName = itemView.findViewById(R.id.fruit_name);
        }
    }

    @Override
    public int getItemCount() {
        return mangguoList.size() + 1;
    }

    @Override
    public int getItemViewType(int position) {
        if (position == 0) {
            return HOR_RECYCLER;
        } else {
            return VER_RECYCLER;
        }
    }
}

第三步：布局文件（子）

R.layout.case34_hor_recycler

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:ignore="MissingConstraints">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/hor_recycler"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</androidx.constraintlayout.widget.ConstraintLayout>

R.layout.case7_item_fruit

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/white"
        android:orientation="horizontal"
        android:padding="5dp"
        tools:ignore="MissingConstraints">

        <ImageView
            android:id="@+id/fruit_image"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            tools:ignore="MissingConstraints" />

        <TextView
            android:id="@+id/fruit_name"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="10dp"
            android:layout_weight="1"
            android:gravity="center"
            android:textColor="@color/black"
            android:textSize="20sp"
            tools:ignore="MissingConstraints" />
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

第四步：在Activity中书写逻辑代码

public class Case34 extends AppCompatActivity {
    private LinearLayoutManager layoutManager;
    private List<Fruit> mList1;
    private List<Fruit> mList2;
    private RecyclerView recycler;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_case34);
        initView();
        layoutManager = new LinearLayoutManager(this);
        layoutManager.setOrientation(RecyclerView.VERTICAL);
        recycler.setLayoutManager(layoutManager);
        recycler.setAdapter(new RecyclerView2TypeAdapter(this,mList1,mList2));
    }
    private void initView() {
        recycler = findViewById(R.id.recycler);
        mList1 = new ArrayList();
        for (int i = 1; i < 7; i++) {
            mList1.add(new Fruit("香蕉" + i, R.mipmap.banana)); //纵向
        }
        mList2 = new ArrayList();
        for (int i = 0; i < 21; i++) {
            mList2.add(new Fruit("芒果" + i, R.mipmap.mangguo)); //纵向
        }
    }
}

---

大功告成！

图示

rv.jpeg