美文网首页
TitleBar简单封装

TitleBar简单封装

作者: Method | 来源:发表于2021-01-10 17:48 被阅读0次

Titlebar封装内容

  • 1.标题
  • 2.左边按钮(标题、背景图片、事件)
  • 3.右边按钮(标题、背景图片、事件)

封装

1.每个界面用include的方式引入
2.使用了databinding,所以由数据进行界面驱动,所以需要一个数据类TitleVM提供数据,店家事件等
3.在主界面的Viewmodel中,赋值TitleVM

include title

 <include
     android:id="@+id/include"
     layout="@layout/view_tile"
     bind:title="@{layout.titleVm}"
     />

以下是通用抬头布局,标题和点击事件等都是由TitleVM驱动。

<?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>
        <import type="android.view.View"/>
        <variable
            name="title"
            type="com.sh.wandroid.base.TitleVM" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:background="@{title.background}">

        <TextView
            android:id="@+id/titleTv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{title.MTitle}"
            android:textSize="16sp"
            android:textColor="@color/white"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/leftTv"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:padding="10dp"
            android:text="@{title.leftText}"
            android:onClick="@{()->title.leftClick.invoke()}"
            android:drawableStart="@{title.leftDrawable}"
            android:scaleType="centerInside"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            />

        <TextView
            android:id="@+id/rightTv"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_marginEnd="8dp"
            android:gravity="center"
            android:onClick="@{()->title.rightClick.invoke()}"
            android:text="@{title.rightText}"
            android:drawableStart="@{title.rightDrawable}"
            android:scaleType="centerInside"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

设置TitleVM初始值,也可自定义。title要求自动更新,所以用ObservableField包装

class TitleVM(
    var leftText: String? = "",
    var leftDrawable: Drawable? = R.drawable.abc_vector_test.getDrawable(),
    var leftClick: (() -> Unit)? = null,
    var title: String? = "",
    var rightText: String? = "",
    var rightDrawable: Drawable? = null,
    var rightClick: (() -> Unit)? = null,
    var background: Int = R.color.colorAccent.getResColor()
) : ViewModel() {
    val mTitle = ObservableField(title)
    val mRightDrawable = ObservableField(rightDrawable)
}

赋值TitleVm

class HomeVM(app: Application) : BaseViewModel(app) {
    val titleVm by lazy {
        TitleVM(
            title = "首页",
            leftClick = {
                isFinish.value = true
            },
            rightText = "帮助",
            rightClick = {
                skipNextACY()
            })
    }

    private fun skipNextACY() {
        showTip.value = "跳转到下一个界面"
    }
}

效果

title.png

相关文章

网友评论

      本文标题:TitleBar简单封装

      本文链接:https://www.haomeiwen.com/subject/oxclaktx.html