打造Title居中的Toolbar

我们在项目中经常会看到TitleBar是一个返回按钮+中间部分是标题的设计页面，so easy，通常的做法如下：

   <androidx.appcompat.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@android:color/white"
        app:navigationIcon="@drawable/ic_svg_back_ptc_24"
        >
           <TextView
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:layout_gravity="center"
               android:singleLine="true"
               android:ellipsize="end"
               android:text="Documents"
               android:textSize="18sp"
               android:textColor="#ff333333"
               />

    </androidx.appcompat.widget.Toolbar>

其中返回按钮ic_svg_back_ptc_24对应的文件为：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24"
    >
  <path
      android:fillColor="@android:color/black"
      android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,8 1.41,-1.41L7.83,13H20v-2z"/>
</vector>

这样做是可以实现效果，但是如果app中有大量这样的页面，我们就要在不同页面写很多这样重复的代码，有没有更简洁的方法呢？让我想想啊，Toolbar本身是带标题栏的，但是标题栏不是居中显示的，不符合我们的要求，既然如此，那我们就自定义一个Toolbar好了，于是参考Toolbar源码，封装了一个Title居中的Toolbar，代码如下：

import android.content.Context
import android.content.res.ColorStateList
import android.text.TextUtils
import android.util.AttributeSet
import android.view.Gravity
import android.view.ViewGroup
import android.widget.TextView
import androidx.annotation.NonNull
import androidx.appcompat.R
import androidx.appcompat.widget.AppCompatTextView
import androidx.appcompat.widget.Toolbar

/**
 * Title居中的Toolbar
 */
class CenterTitleToolbar @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : Toolbar(context, attrs, defStyleAttr) {

    private var mTitleTextAppearance=0
    private var mTitleTextColor: ColorStateList? = null
    private var mTitleTextView: TextView? = null
    private var mTitleText: CharSequence? = null

    init {
        val ta = getContext().obtainStyledAttributes(attrs, R.styleable.Toolbar, defStyleAttr,0)
        mTitleTextAppearance = ta.getResourceId(R.styleable.Toolbar_titleTextAppearance, 0)
        mTitleText = ta.getText(R.styleable.Toolbar_title)
        if(!TextUtils.isEmpty(mTitleText)){
            setTitle(mTitleText)
        }
        if (ta.hasValue(R.styleable.Toolbar_titleTextColor)) {
            setTitleTextColor(ta.getColorStateList(R.styleable.Toolbar_titleTextColor)!!)
        }
        ta.recycle()
    }

    override fun setTitle(title: CharSequence?) {

        if(mTitleTextView==null){
            mTitleTextView=AppCompatTextView(context)
            mTitleTextView?.apply {
                isSingleLine = true
                ellipsize = TextUtils.TruncateAt.END
                addView(
                    this,
                    LayoutParams(
                        ViewGroup.LayoutParams.WRAP_CONTENT,
                        ViewGroup.LayoutParams.WRAP_CONTENT,
                        Gravity.CENTER
                    )
                )
            }
        }
        if (mTitleTextAppearance != 0) {
            mTitleTextView?.setTextAppearance(context, mTitleTextAppearance)
        }
        mTitleTextView?.setText(mTitleText)

    }

    override fun setTitle(resId: Int) {
        setTitle(getContext().getText(resId))
    }

    override fun getTitle(): CharSequence? {
        return mTitleText
    }

    override fun setTitleTextColor(@NonNull color: ColorStateList) {
        mTitleTextColor = color
        mTitleTextView?.setTextColor(color)
    }

}

使用方式如下：

•  定义Toolbar Style

    <!--Toolbar Style-->
    <style name="TKToolbarStyle" parent="@style/Widget.AppCompat.Toolbar">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">?attr/actionBarSize</item>
        <item name="android:background">@android:color/white</item>
        <item name="navigationIcon">@drawable/ic_svg_back_ptc_24</item>
        <item name="titleTextAppearance">@style/TKToolbarTitileAppearance</item>
    </style>
    <!--Toolbar Title Style-->
    <style name="TKToolbarTitileAppearance" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Title">
        <item name="android:textSize">18sp</item>
        <item name="android:textColor">#ff333333</item>
    </style>

•   在layout对应的xml文件中添加Toolbar

  <CenterTitleToolbar
        style="@style/TKToolbarStyle"
        app:title="Documents"
        />

 是不是简洁了很多，有木有，哈哈，大功告成，效果如下：