android：Toolbar用法探析（二）：內容顯示微調

原生的Toolbar基本的功能樣式已經在上節簡單的說了一下，但是當前的樣式並不滿足我們的需要，因此這一節主要探索一下Toolbar的一些內容上調整的方法，比如Title位置居中的改變啊，PopuMenu菜單的顯示位置等。

一：Toolbar的標題Title文字居中調整

關於Toolbar標題文字居中的寫法，網上都是前篇一律的把Toolbar標題內容置為空，然後在裡面添加一個TextView來實現的，代碼如下：

這樣雖然是實現了居中的效果，但是Toolbar的用法可不是這樣的。下面，介紹另外一種標題居中的方法。先上效果圖：

從效果圖上看得出，文字已經居中顯示了，那下面就是方法代碼了：

    private void setTitleCenter(Toolbar toolbar){
        int childCount = toolbar.getChildCount();
        for(int i = 0 ;i < childCount;i++){
            View child = toolbar.getChildAt(i);
            if(child instanceof TextView){
                TextView childTitle = (TextView)child;
                if(childTitle.getText().equals(toolbar.getTitle())){
                    int deviceWidth = getWindowManager().getDefaultDisplay().getWidth();
                    Paint p = childTitle.getPaint();
                    float textWidth = p.measureText(childTitle.getText().toString());
                    float tx = (deviceWidth - textWidth) / 2.0f - toolbar.getContentInsetLeft();
                    childTitle.setTranslationX(tx);
                    break;
                }
            }
        }
    }

基本的思想是這樣的：首先獲取Toobar的子view 的個數，然後循環獲取子view，因為用來顯示title的是一個TextView的控件，所以需要判斷當前view 是否是TextView，由於Toolbar中還包含一個副標題，所以這裡判斷TextView的內容是否是一樣的（注意：這裡副標題和標題之間的文字不能相同暫時），這個時候如果判斷通過則進入if語句中。首先獲取屏幕的寬度，然後在獲取文字的寬度，最後計算出title控件需要移動的距離，然後調用setTranslationX即可。

二：Toolbar中的PopuMenu菜單的顯示位置

自定義溢出菜單之前，首先需要說明一點的是，當前的Activity的主題樣式需要設置為”Theme.AppCompat.Light.NoActionBar”(或者”Theme.AppCompat.NoActionBar”)，以及parent為它的也可以。如下代碼：

給Activity設置單獨的主題樣式：

然後，自定義PopouMenu的溢出樣式如下：

最後給Toolebar設置poputheme，如下：

這個時候效果圖如下：

三：Toolbar內容調整

1.修改標題(“設置”)文字的顏色，在主題AppTheme.NoActionBar中添加如下代碼即可。<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwcmUgY2xhc3M9"brush:java;"> @android:color/holo_blue_bright

效果圖：

從圖上看出，修改的顏色不單單是標題的顏色，連點擊overflowButton之後的PopuMenu彈框中的顏色也一起修改了。說明設置了這個屬性之後這兩個部分的文字顏色是一樣的。

2.修改菜單欄MenuItem文字的顏色,即圖中的”SETTINGS”文字

定義Toolbar菜單欄menu文字的樣式如下：

定義好樣式之後，設置app:theme=”@style/ActionMenuTextStyle”給Toolbar即可。如下代碼：

然後看下效果圖：

從圖上看出，標題欄一行裡面的“SETTINGS”文字顏色改為白色了額。

3.修改標題（“設置”）文字大小

顏色修改完了，現在看一下文字大小的修改。現在感覺文字有點小了，那好現在修改大一點的。現定義標題的樣式如下：

然後設置此樣式給Toolbar：app:titleTextAppearance=”@style/ToolbarTitle”，代碼如下：

效果圖看下：

文字大小變大了，比以前大多咧。

4.修改Overflow中，PopuMenu中文字大小

上面已經定義了一個OverflowMenuStyle樣式的PopuMenu，所以只需要在添加一項即可。代碼如下：

由於前面已經給Toolbar設置了popuTheme樣式，下面直接看效果圖：

效果已經很明顯了，文字被放大了。

5.單獨給文字標題和Menu設置樣式

從3和4中可以看出，只要設置不同的style就可以實現單獨的樣式設置。先改變如下：

樣式改變如下：Toolbar標題欄中menu菜單的文字縮小，標題文字顏色變為白色，PopuMenu中文字變為紅色，以及背景顏色現效果圖如下：

6.修改PopuMenu中ListView的樣式

發現PopuMenu中每一個MenuItem之間沒有分割線，不爽！那麼就自己定義一個樣式，給它加上分割線，代碼如下：

然後在“AppTheme.NoActionBar”Activity主題樣式中添加如下代碼：

 @style/PopupMenuListView

效果圖看下：

7.修改Menu的點擊狀態

有些時候吧，產品設計死腦筋，非得變一下點擊的效果，所以這個時候原生的效果就不符合設計要求了，需要修改。那怎麼改呢，先別急，先定義一個selector，如下：

首先修改Toolbar中菜單欄MenuItem的點擊效果，你只需要在“ActionMenuTextStyle”樣式添加如下代碼即可：

@drawable/menu_selector

現看一下效果圖：

從gif動畫中看出，”SETTINGS”以及“OverflowButton”在點擊的時候，會變為藍色，而PopuMenu點擊的時候顏色還是和以前的一樣，沒有修改。

那現在修改一下PopuMenu中Item點擊的效果。你需要在“OverflowMenuStyle”樣式中添加如下代碼：

@drawable/menu_selector

現在再來看一下效果圖：

加上如上代碼之後，PopuMenu中item點擊的效果也變了，如圖所示。

8.給MenuItem設置icon

有些時候，menuItem中顯示一下icon圖標也是極好賞心悅目的。現改變menu布局如下：

那麼效果圖來看下：

圖上顯示，Toolbar菜單欄中的MenuItem已經被icon圖標替換，但是店址overflow之後的PopuMenu中並沒有顯示icon圖標，怎麼回事呢？這是官方的做法，默認只能顯示文字而不能顯示icon，但是覺得這樣不美觀啊，icon必須得顯示出來。icon顯示不顯示是由MenuBuilder這個類的setOptionalIconsVisible方法來決定的，如果我們在PopuMenu被展開的時候給這個方法傳入true，那麼裡面的每一個MenuItem對應的圖標就都會顯示出來了這個方法並沒有對完開發，所以要調用此方法當然用到反射了。
（1）有的人可能把反射的代碼卸載了onMenuOpened中，但是仍然可能是有問題的

    @Override
    public boolean onMenuOpened(int featureId, Menu menu) {
        if (featureId == Window.FEATURE_ACTION_BAR && menu != null) {
            if (menu.getClass().getSimpleName().equals("MenuBuilder")) {
                try {
                    Method m = menu.getClass().getDeclaredMethod("setOptionalIconsVisible", Boolean.TYPE);
                    m.setAccessible(true);
                    m.invoke(menu, true);
                } catch (Exception e) {
                }
            }
        }
        return super.onMenuOpened(featureId, menu);
    }

像我activity繼承的是AppCompatActivity，所以，此方法行不通，在這就不貼圖了。那把反射的地方換一下，通過重寫onPrepareOptionsPanel方法來實現。

    @Override
    protected boolean onPrepareOptionsPanel(View view, Menu menu) {
        if (menu != null) {
            if (menu.getClass() == MenuBuilder.class) {
                try {
                    Method m = menu.getClass().getDeclaredMethod("setOptionalIconsVisible", Boolean.TYPE);
                    m.setAccessible(true);
                    m.invoke(menu, true);
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        }
        return super.onPrepareOptionsPanel(view, menu);
    }

看下效果圖如下：

好了，到這裡基本上的樣式改變應該差不多都涉及到了。通過上面的探索，發現，針對不同的控件，會有單獨的style樣式供其設置來改變，就像ActionMenuTextStyle、ToolbarTitle、OverflowMenuStyle等，來改變相對應的控件的樣式，剩下的得自己在探索了。