引言

原生的Toolbar的title是居右顯示的，而大多數情況下UI設計的圖title是居中。另外默認的返回按鈕間隙是16dp，而設計圖上面是按照iOS來設計，所以返回按鈕是8dp，本篇就此進行適配。

正文

NavigationIcon間隙

先看看原來的樣式，我這里為了演示，特地換了一個返回箭頭。

返回原始樣式

修改BaseToolbarStyle

然后我們在原本定義號的BaseToolbarStyle中在增加一些樣式配置：

<!--標題欄的樣式-->
    <style name="BaseToolbarStyle" parent="Widget.AppCompat.Toolbar">
        <!--內容距離開始 邊距-->
        <item name="contentInsetStart">8dp</item>
        <!--內容距離 導航按鈕 邊距-->
        <item name="contentInsetStartWithNavigation">8dp</item>
        <!--使自定義view可以貼左右的邊，多數版本的系統不要下面兩句也可以，但少量版本必須加下面的兩句-->
        <item name="android:paddingLeft">8dp</item>
        <!--右內邊距-->
        <item name="android:paddingRight">0dp</item>
        <!--最小高度-->
        <item name="android:minHeight">?actionBarSize</item> 
        <!--高度-->
        <item name="android:layout_height">?actionBarSize</item>
        <!--id-->
        <item name="android:id">@id/base_toolbar</item>
        <!--寬度-->
        <item name="android:layout_width">match_parent</item>
        <item name="actionMenuTextColor">#000</item>
    </style>

新增ToolbarNavigationButtonStyle

再新增一個ToolbarNavigationButtonStyle作為返回按鈕的樣式：

 <!--標題欄返回按鈕樣式-->
<style name="ToolbarNavigationButtonStyle" parent="Widget.AppCompat.Toolbar.Button.Navigation">
    <item name="android:minWidth">16dp</item>
</style>

AppTheme.ToolbarHeight

新建一個AppTheme.ToolbarHeight作為Activity的樣式：

<style name="AppTheme.ToolbarHeight">
        <!--修改了標題欄默認樣式的樣式
        修改了返回按鈕的邊距
        -->
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="toolbarNavigationButtonStyle">@style/ToolbarNavigationButtonStyle</item>
        <!--NavigationIcon的寬度-->
        <item name="toolbarStyle">@style/BaseToolbarStyle</item>
    </style>

修改AndroidManifest

最后將AndroidManifest中Activity的them替換成AppTheme.ToolbarHeight。

<activity
            android:name=".module.example.DialogExampleActivity"
            android:label="@string/title_activity_dialog_example"
            android:theme="@style/AppTheme.ToolbarHeight" />

看看改進后的效果：

改進后的返回按鈕

Title居中、BackText

清除默認Title

Toolbar在不設置Title的情況下默認是以 label 作為Title 的，所以第一步需要將Title設置為""，剛好前面我們封裝了 initToolbar這個方法，我們在里面加上就行。

/**
 * 初始化toolbar
 */
private void initToolbar() {
    Toolbar mToolbar = findViewById(R.id.base_toolbar);
    if (null != mToolbar) {
        // 清除標題 
        mToolbar.setTitle("");
        setSupportActionBar(mToolbar);
        mToolbar.setBackgroundColor(getToolbarBackground());
        //設置返回按鈕
        mToolbar.setNavigationIcon(getNavigationIcon());
        mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                onNavigationOnClickListener();
            }
        });
        isInitToolbar = true;
    }
}

需要注意的是setTitle必需要在setSupportActionBar之前調用，否則將不起作用。

看看效果：

清除Title

可以看到，原本的默認標題已經沒有了。

新增Title和BackText

其實這一步比較簡單，現在的Toolbar是繼承至ViewGroup，這就意味著Toolbar能放子View，所以我們像以下這樣寫就行，為了后面方便，我已經將樣式抽取出來了。

<android.support.design.widget.AppBarLayout style="@style/BaseAppBarLayoutStyle">
        <android.support.v7.widget.Toolbar
            style="@style/BaseToolbarStyle"
            app:popupTheme="@style/AppTheme.PopupOverlay">

            <TextView
                style="@style/ToolBarNavTextStyle"
                android:text="返回" />

            <TextView
                style="@style/ToolBarTitleStyle"
                android:text="Toast示例" />
        </android.support.v7.widget.Toolbar>

    </android.support.design.widget.AppBarLayout>

另外兩個樣式：

<style name="ToolBarNavTextStyle">
        <!--標題欄返回文字樣式-->
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">match_parent</item>
        <!--返回按鈕和返回文字之間的間隔-->
        <item name="android:layout_marginLeft">2dp</item>
        <item name="android:gravity">center</item>
        <item name="android:layout_alignParentBottom">true</item>
        <item name="android:textColor">@color/ToolbarNavTextColor</item>
        <item name="android:textSize">@dimen/ToolbarNavTextSize</item>
        <item name="android:id">@id/toolbar_nav_text</item>
    </style>
 <style name="ToolBarTitleStyle">
        <!--標題欄 標題樣式-->
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textColor">@color/white</item>
        <item name="android:layout_gravity">center</item>
        <item name="android:background">@null</item>
        <item name="android:textSize">18sp</item>
        <item name="android:layout_centerInParent">true</item>
        <item name="android:id">@id/tv_toolbar_title</item>
    </style>

值得注意的是，BackText也是需要做點擊事件的，所以我給他加了個id，然后再initToolbar中進行事件監聽：

 /**
     * 初始化toolbar
     */
    private void initToolbar() {
       ...
        if (null != mToolbar) {
          ...
            //返回文字按鈕
            View navText = findViewById(R.id.toolbar_nav_text);
            if (null != navText) {
                navText.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        onNavigationOnClickListener();
                    }
                });
            }
        }
    }

來看看效果吧：

成品演示

結束

總結

本章的東西很少，基本上都是從style中進行配置，涉及的代碼量并不是很多，起碼初步達到了我們想要的效果。

源碼-tag-v0.08

問題

這種在xml中修改style的情況來適配會有一點問題，那就是每次我們新建Activity的時候都需要手動的更改 them、style，這比較繁瑣、也沒什么意義，所以下章我們就著手解決這個問題。

微信公眾號

來都來了，就給個關注吧，時不時會悄悄的推送一些小技巧的文章~~

AndroidRookie