打造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"
        />

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