Kotlin_RecyclerView_多种类型的条目

RecyclerView 的基本实现参考上一篇：https://blog.csdn.net/whjk20/article/details/106950422

现实现三种不同类型条目： 只有一张图片、 标题+图片 、 三种图片

目录

1. 条目的布局：

2. 数据(仅保存数据类型)：

3. 适配器的修改：

3.1  获取条目类型：

3.2  根据条目类型 加载不同的条目布局

4. 模拟创建不同类型的数据

---

 

1. 条目的布局：

条目1：

<?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"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="wrap_content">

    <androidx.cardview.widget.CardView
        app:cardUseCompatPadding="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="90dp">
            <ImageView
                android:id="@+id/image1"
                android:paddingStart="5dp"
                android:paddingRight="5dp"
                android:paddingTop="5dp"
                android:paddingBottom="5dp"
                android:layout_width="match_parent"
                android:src="@drawable/pic12"
                android:paddingLeft="5dp"
                android:scaleType="fitXY"
               android:layout_height="match_parent" />
        </LinearLayout>

    </androidx.cardview.widget.CardView>

</LinearLayout>

条目2：

<?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"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="wrap_content">

    <androidx.cardview.widget.CardView
        app:cardUseCompatPadding="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="90dp">

            <TextView
                android:layout_width="0dp"
                android:layout_weight="1"
                android:text="我是标题啊"
                android:gravity="center"
                android:layout_height="match_parent"/>

            <ImageView
                android:id="@+id/image1"
                android:layout_weight="1"
                android:layout_width="0dp"
                android:src="@drawable/pic2"
                android:paddingLeft="5dp"
                android:scaleType="fitXY"
                android:layout_height="match_parent" />
        </LinearLayout>
    </androidx.cardview.widget.CardView>

</LinearLayout>

条目3：

<?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"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="wrap_content">

    <androidx.cardview.widget.CardView
        app:cardUseCompatPadding="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="90dp">

            <ImageView
                android:id="@+id/image1"
                android:layout_weight="1"
                android:layout_width="0dp"
                android:src="@drawable/pic3"
                android:paddingLeft="5dp"
                android:scaleType="fitXY"
                android:layout_height="match_parent" />

            <ImageView
                android:id="@+id/image2"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:src="@drawable/pic4"
                android:scaleType="fitXY"
                android:paddingLeft="5dp"
                android:layout_height="match_parent" />

            <ImageView
                android:id="@+id/image3"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:src="@drawable/pic5"
                android:scaleType="fitXY"
                android:paddingLeft="5dp"
                android:paddingRight="5dp"
                android:layout_height="match_parent" />

        </LinearLayout>

    </androidx.cardview.widget.CardView>

</LinearLayout>

2. 数据(仅保存数据类型)：

class UserDataMultiType {
    var type: Int

    constructor(type: Int) {
        this.type = type
    }
}

其中三种不同的类型常量：

    const val TYPE_FULL_IMAGE = 0
    const val TYPE_THREE_IMAGE = 1
    const val TYPE_RIGHT_IMAGE = 2

3. 适配器的修改：

3.1  获取条目类型：

    override fun getItemViewType(position: Int): Int {
        if (position >= dataMultiTypes.size) {
            return TYPE_FULL_IMAGE
        }
        return if (dataMultiTypes[position].type == TYPE_FULL_IMAGE) {
            TYPE_FULL_IMAGE
        } else {
            if (dataMultiTypes[position].type == TYPE_THREE_IMAGE) {
                TYPE_THREE_IMAGE
            } else {
                TYPE_RIGHT_IMAGE
            }
        }
    }

3.2  根据条目类型 加载不同的条目布局

此处ViewHolder使用同个类型

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
        var view: View
        if (TYPE_FULL_IMAGE == viewType) {
            view = View.inflate(
                parent.context,
                R.layout.item_full_image, null
            )
        } else {
            if (TYPE_RIGHT_IMAGE == viewType) {
                view = View.inflate(
                    parent.context,
                    R.layout.item_right_image, null
                )
            } else {
                view = View.inflate(
                    parent.context,
                    R.layout.item_three_image, null
                )
            }
        }
        return InnerViewHolder(
            view
        )
    }

4. 模拟创建不同类型的数据

    private fun initDatas() {
        var random = Random(3)
        for (index in 0 until 20) {
            var type = random.nextInt(3)
            datas.add(
                UserDataMultiType(
                    type
                )
            )
        }
    }

其余部分跟普通RecylcerView的实现一样。