RecyclerView实现多布局效果（+ImageView）

引言

  RecyclerView不只能进行单页面布局，而且可以通过重写adapter中的getItemViewType方法来进行多种View布局，今天就来使用RecyclerView实现简单的多布局效果。

---

效果预览

Recycler多布局1.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"
    android:background="@color/lightgray"
    tools:context=".show.Case7">

        <TextView
            android:id="@+id/title_bar"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:background="@color/green"
            android:gravity="center"
            android:text="RecyclerView"
            android:textColor="@color/white"
            android:textSize="20sp"
            tools:ignore="MissingConstraints" />

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/rv_recyclerView"
            app:layout_constraintTop_toBottomOf="@id/title_bar"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_marginTop="5dp"
            tools:ignore="MissingConstraints" />

</androidx.constraintlayout.widget.ConstraintLayout>

第二步：新建适配器类

/**
 * @data on 2020/9/25 5:28 PM
 * @auther
 * @describe  Recycler多布局效果
 */
public class RecyclerViewTypeAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
    private final int IMAGEVIEW = 0;
    private final int VER_RECYCLERVIEW = 1;
    private List<Fruit> fruitList;
    
    public RecyclerViewTypeAdapter(List<Fruit> fruitList) {
        this.fruitList = fruitList;
    }

    @NonNull
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view;
        if(viewType == IMAGEVIEW){
            view = LayoutInflater.from(parent.getContext()).inflate(R.layout.image_view,parent,false);
            return new ImageHolder(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 ImageHolder){
            ImageHolder horViewHolder = (ImageHolder)holder;
            horViewHolder.userImage.setImageResource(R.drawable.user_img);
        }else if(holder instanceof VerViewHolder){
            VerViewHolder verViewHolder = (VerViewHolder)holder;
            verViewHolder.fruitImage.setImageResource(fruitList.get(position).getImageId());
            verViewHolder.fruitName.setText(fruitList.get(position).getName());
        }
    }

    public static class ImageHolder extends RecyclerView.ViewHolder {
        public ImageView userImage;

        public ImageHolder(@NonNull View itemView) {
            super(itemView);
            userImage = itemView.findViewById(R.id.user_image);
        }
    }

    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 fruitList.size();
    }

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

第三步：布局文件（子）R.layout.image_view和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"
    tools:ignore="MissingConstraints">
    <ImageView
        android:id="@+id/user_image"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:src="@drawable/user_img" />
</androidx.constraintlayout.widget.ConstraintLayout>

<?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 Case33 extends AppCompatActivity {
    private LinearLayoutManager layoutManager;
    private List<Fruit> mList;
    private RecyclerView recyclerView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_case33);
        initView();
        //RecyclerView瀑布流布局
        layoutManager = new LinearLayoutManager(this);
        layoutManager.setOrientation(RecyclerView.VERTICAL);
        recyclerView.setLayoutManager(layoutManager);
        recyclerView.setAdapter(new RecyclerViewTypeAdapter(mList));
        recyclerView.setItemAnimator(new DefaultItemAnimator());
    }

    private void initView() {
        recyclerView = findViewById(R.id.rv_recyclerView);
        mList = new ArrayList<Fruit>();
        for (int i = 0; i < 21; i++) {
            mList.add(new Fruit("apple" + i, R.mipmap.apple)); //纵向
        }
    }
}

---

大功告成！

图示

iv.jpeg