Android 之路 (8) - Toolbar - NavigationIcon間隙、Title居中、BackText適配

引言

原生的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
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,825評論 6 546
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,814評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 178,980評論 0 384
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 64,064評論 1 319
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,779評論 6 414
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 56,109評論 1 330
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,099評論 3 450
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,287評論 0 291
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,799評論 1 338
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,515評論 3 361
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,750評論 1 375
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,221評論 5 365
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,933評論 3 351
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,327評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,667評論 1 296
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,492評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,703評論 2 380

推薦閱讀更多精彩內容