ItemBinding多布局实现

国际惯例：上个效果图

type1
type2.jpg

简单介绍一下，就是使用ItemBinding来分类型加载布局，告别Adapter的同时也告别了多个ViewType的编写，相当舒爽。点击添加商品：body布局增加，header、footer不动。

第一步：主布局mutiltype_activity_view.xml

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <data>
        <variable
            name="viewModel"
            type="com.kc.debug.mutiltype.MutilTypeViewModel" />
    </data>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context=".MainActivity">

        <androidx.appcompat.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="44dp"
            android:background="@color/green">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="多布局"
                android:textColor="@color/black"
                android:textSize="18sp" />
        </androidx.appcompat.widget.Toolbar>

        <androidx.recyclerview.widget.RecyclerView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:items="@{viewModel.items}"
            app:itemBinding="@{viewModel.itemBinding}"
            tools:listitem="@layout/main_item_body"
            tools:itemCount="3"
            app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />

    </LinearLayout>
</layout>

第二步：ViewModel

/**
 * @data on 6/3/21 1:43 PM
 * @auther KC
 * @describe
 */
class MutilTypeViewModel(application: Application) : BaseViewModel(application) {
    var items = MergeObservableList<Any>()
    val itemBody = ObservableArrayListPro<Data>()
    var itemBinding: OnItemBind<Any> = OnItemBindClass<Any>()
        .map(User::class.java) { itemBinding, position, item ->
            itemBinding.set(BR.item, R.layout.main_item_header)
                .bindExtra(BR.viewModel, this@MutilTypeViewModel)
        }.map(Data::class.java) { itemBinding, position, item ->
            itemBinding.set(BR.item, R.layout.main_item_body)
                .bindExtra(BR.viewModel, this@MutilTypeViewModel)
        }.map(String::class.java) { itemBinding, position, item ->
            itemBinding.set(BR.item, R.layout.main_item_footer)
                .bindExtra(BR.viewModel, this@MutilTypeViewModel)
        }

    init {
        items.insertItem(User())
        items.insertList(itemBody)
        items.insertItem("")
        itemBody.add(Data())
    }

    fun addItem() {
        val max = 3
        if (itemBody.size >= max) {
            toast("最多添加${max}个商品")
            return
        }
        itemBody.add(Data())
    }
}

第三步：ObservableArrayListPro

class ObservableArrayListPro<T> : ObservableArrayList<T>() {
    fun notifyChange(item: T) {
        val index = indexOf(item)
        if (remove(item)) {
            add(index, item)
        }
    }

    fun notifyChange(index: Int) {
        val item = get(index)
        if (remove(item)) {
            add(index, item)
        }
    }

    fun notifyChange() {
        val arrayList = ArrayList(this)
        clear()
        addAll(arrayList)
    }
}

第四步：InitLiveData

class InitLiveData<T>(init: T) : MutableLiveData<T>(init) {
    override fun getValue(): T {
        return super.getValue()!!
    }

    override fun setValue(value: T) {
        super.setValue(value)
    }
}

第五步：Data

class Data {
    val unit = InitLiveData("")
}

第六步：子布局

（1）头

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <data>
        <variable
            name="item"
            type="com.kc.debug.mutiltype.User" />
        <variable
            name="viewModel"
            type="com.kc.debug.mutiltype.MutilTypeViewModel" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.ooftf.layout.kv.KvEditLayout
            exOptionSelectorData="@{viewModel.clientOption}"
            exOptionSelectorListener="@{(o1,o2,o3,v)-> viewModel.onClienItemClick(o1)}"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/white"
            android:paddingVertical="12dp"
            app:kvl_hint="(下拉选择)"
            app:kvl_key="提需客户"
            app:kvl_valueLines="1"
            app:kvl_valueLength="10"
            app:kvl_value='@{("").equals(viewModel.clientName)?"请选择提需客户":viewModel.clientName}'
            app:kvl_showEndIcon="true"
            app:kvl_keyDrawableLeft="@drawable/providers_required"
            app:kvl_keyDrawablePadding="10dp"
            app:kvl_keyWidth="110dp"
            app:kvl_textSize="16sp"
            tools:ignore="MissingConstraints" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

（2）体

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <data>
        <variable
            name="item"
            type="com.kc.debug.mutiltype.Data" />
        <variable
            name="viewModel"
            type="com.kc.debug.mutiltype.MutilTypeViewModel" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#fff7f7f7">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="6dp"
            app:layout_constraintTop_toTopOf="parent"
            android:background="@color/white"
            android:orientation="vertical"
            tools:ignore="MissingConstraints">

            <com.ooftf.layout.kv.KvEditLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/white"
                android:paddingVertical="12dp"
                app:kvl_hint="(必填)"
                app:kvl_key="商品名称"
                app:kvl_valueLines="1"
                app:kvl_keyDrawableLeft="@drawable/providers_required"
                app:kvl_keyDrawablePadding="10dp"
                app:kvl_keyWidth="110dp"
                app:kvl_textSize="16sp" />

            <com.ooftf.layout.kv.KvEditLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/white"
                android:paddingVertical="12dp"
                android:paddingStart="34dp"
                app:kvl_hint="(必填)"
                app:kvl_key="商品规格"
                app:kvl_valueLines="1"
                app:kvl_keyWidth="92dp"
                app:kvl_textSize="16sp"
                android:paddingLeft="34dp" />

            <com.ooftf.layout.kv.KvEditLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/white"
                android:paddingVertical="12dp"
                android:paddingLeft="33dp"
                app:kvl_hint="(选填)"
                app:kvl_valueLines="1"
                app:kvl_key="商品品牌"
                app:kvl_keyDrawablePadding="10dp"
                app:kvl_keyWidth="95dp"
                app:kvl_textSize="16sp" />

            <com.ooftf.layout.kv.KvEditLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/white"
                android:paddingVertical="12dp"
                android:paddingLeft="33dp"
                app:kvl_hint="(选填)"
                app:kvl_valueLines="1"
                app:kvl_key="参考售卖价格"
                app:kvl_keyDrawablePadding="10dp"
                app:kvl_keyWidth="98dp"
                app:kvl_textSize="16sp" />


            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/white"
                android:orientation="vertical">

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

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:layout_marginStart="16dp"
                        android:drawableStart="@drawable/providers_required"
                        android:drawablePadding="8dp"
                        android:gravity="center_vertical"
                        android:text="是否接受替代品"
                        android:textColor="#ff777777"
                        android:textSize="16sp"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toBottomOf="@+id/toolbar"
                        android:layout_marginLeft="16dp"
                        android:drawableLeft="@drawable/providers_required" />

                    <androidx.appcompat.widget.SwitchCompat
                        android:id="@+id/chooseSwitch"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:padding="12dp"
                        android:textColor="#ff333333"
                        android:textOff="是"
                        android:textOn="否"
                        android:textSize="16sp"
                        android:thumb="@drawable/need_switch_top"
                        app:showText="true"
                        app:switchPadding="8dp"
                        app:track="@drawable/need_switch_bottom" />
                </LinearLayout>

                <View
                    android:layout_width="match_parent"
                    android:layout_height="0.5dp"
                    android:layout_gravity="bottom"
                    android:layout_marginHorizontal="16dp"
                    android:background="#fff1f1f1"
                    app:layout_constraintBottom_toBottomOf="parent"
                    tools:ignore="MissingConstraints" />
            </LinearLayout>


            <com.ooftf.layout.kv.KvEditLayout
                exOptionSelectorData="@{viewModel.requireOption}"
                exOptionSelectorListener="@{(o1,o2,o3,v)-> viewModel.onRequireItemClick(item,o1)}"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/white"
                android:paddingVertical="12dp"
                android:paddingLeft="33dp"
                app:kvl_hint="(选填)"
                app:kvl_valueLength="10"
                app:kvl_valueLines="1"
                app:kvl_key="客户需求量"
                app:kvl_showEndIcon="true"
                app:kvl_showDivider="true"
                app:kvl_unit='@{item.unit}'
                app:kvl_keyDrawablePadding="10dp"
                app:kvl_keyWidth="98dp"
                app:kvl_textSize="16sp" />

        </LinearLayout>
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

（3）尾

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <data>
        <variable
            name="item"
            type="String" />
        <variable
            name="viewModel"
            type="com.kc.debug.mutiltype.MutilTypeViewModel" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="46dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="16dp"
        android:background="@drawable/base_shape_dash"
        android:onClick="@{()->viewModel.addItem()}">

        <ImageView
            android:id="@+id/image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/demand_add"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/text"
            app:layout_constraintHorizontal_chainStyle="packed"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="4dp"
            android:text="增加商品"
            android:textColor="#ff333333"
            android:textSize="16sp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/image"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_marginLeft="4dp" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

源码地址：

https://github.com/Kingcool759/KC_MVVMComponent
项目结构：

image.png