Toolbar詳解

以我所了解的Toolbar是API v21也就是android5.0新特裡面的控件，替代之前的ActionBar控件。

Toolbar與ActionBar最大差別就在于Toolbar更加自由靈活。Toolbar添加樣式需要在style.xml

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- toolbar（actionbar）顔色 -->  
        <item name="colorPrimary">@android:color/holo_red_dark</item>  
        <!-- 狀态欄顔色 -->  
        <item name="colorPrimaryDark">@android:color/darker_gray</item>  
         <!-- 視窗的背景顔色 -->  
        <item name="android:windowBackground">@color/black</item>
        <item name="actionOverflowMenuStyle">@style/LYJMenuStyle</item>
    </style>
           

我們看下面的效果圖，為了一目了然，顔色都比較重口味。

接下來我們看到還有一個屬性 actionOverflowMenuStyle也不跟你多絮叨，看代碼

<style name="LYJMenuStyle" parent="@style/Widget.AppCompat.Light.PopupMenu.Overflow">
        <!--可以看到該屬性 overlap：重疊 Anchor：描-->  
        <item name="overlapAnchor">false</item>
        <!-- 這個就是背景顔色了-->
        <item name="android:popupBackground">?attr/colorPrimary</item>
    </style>
           

我們還是看效果圖吧，

這個是把overlapAnchor給注釋掉了的效果圖

相信大家應該了解了這個兩個屬性的作用了。

接下來我們來聊一下Toolbar的一些屬性 ，我們可以看到見名之意，這裡就不講解了。自行實踐。

有些可能會常用到的幾個屬性

屬性名稱	作用
toolbar:logo	toolbar圖示
toolbar:popupTheme	設定彈出菜單的樣式主題
toolbar:theme	标題欄的樣式主題
toolbar:navigationIcon	設定toolbar左邊按鈕圖檔
toolbar:subtitle	副标題
toolbar:subtitleTextColor	副标題顔色
toolbar:title	主标題
toolbar:titleTextColor	主标題顔色

看圖 這樣看應該更明顯一些

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:toolbar="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.Toolbar
        android:id="@id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/colorPrimary"
        android:background="?attr/colorPrimary"
        toolbar:logo="@mipmap/ic_launcher"
        toolbar:navigationIcon="@drawable/ic_toolbar_back"
        toolbar:popupTheme="@style/PopWindowBackgroundStyle"
        toolbar:subtitle="11111111"
        toolbar:subtitleTextColor="@color/black"
        toolbar:theme="@style/PopWindowStyle"
        toolbar:title="2222222111111"
        toolbar:titleTextColor="@color/white" />
</LinearLayout>
           

有人可能看到會說，彈出的菜單的背景顔色與toolbar不同。

總之這種情況遇到很都，具體什麼場景會用到我就不多說了。我們看代碼吧。

style.xml

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/app_primary_color</item>
        <item name="colorPrimaryDark">@color/app_primary_dark_color</item>
        <item name="colorAccent">@color/app_primary_color</item>
        <item name="android:windowBackground">@color/white</item>
        <item name="actionOverflowMenuStyle">@style/LYJMenuStyle</item>
    </style>

    <style name="PopWindowStyle" parent="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <!--<item name="android:colorBackground">@color/grey</item>-->
        <!--字型和圖示的顔色-->
        <item name="android:textColorPrimary">@color/white</item>
    </style>

    <style name="PopWindowBackgroundStyle" parent="@style/ThemeOverlay.AppCompat.Light">
        <item name="actionOverflowMenuStyle">@style/LYJMenuStyle1</item>
        <item name="android:textColor">@color/white</item>
    </style>

    <style name="LYJMenuStyle" parent="@style/Widget.AppCompat.Light.PopupMenu.Overflow">
        <!--彈出的菜單是否與标題欄重疊-->
        <item name="overlapAnchor">false</item>
        <!-- 彈出菜單的背景顔色-->
        <item name="android:popupBackground">?attr/colorPrimary</item>
        <!--彈出菜單與标題欄的垂直間距-->
        <!--<item name="android:dropDownVerticalOffset">51dp</item>-->
    </style>

    <style name="LYJMenuStyle1" parent="@style/Widget.AppCompat.Light.PopupMenu.Overflow">
        <item name="overlapAnchor">false</item>
        <item name="android:popupBackground">@android:color/darker_gray</item>
    </style>
           

我們在實際應用中會有這種需求，就是右邊是菜單menu按鈕，左邊不要圖檔隻顯示文字。

菜單menu有這麼幾個屬性：

app:showAsAction 三個值	作用
always	總是顯示在界面上
never	不顯示在界面上，隻讓出現在右邊的三個點中
ifRoom	如果有位置才顯示，不然就出現在右邊的三個點中

系統也為菜單提供了預設的分享菜單與查詢菜單，代碼如下：
app:actionViewClass="android.support.v7.widget.SearchView"
app:actionProviderClass="android.support.v7.widget.ShareActionProvider"

從名字想必不需要過多解釋，最後一個就是顯示的優先級，也就是顯示的順序，誰在最前面，誰在後面：
android:orderInCategory="100"  數值越小，顯示靠前，且優先級最大。

這是menu_home.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/menu_ni"
        android:orderInCategory="199"
        android:title="about3"
        app:actionProviderClass="android.support.v7.widget.ShareActionProvider"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/menu_about"
        android:orderInCategory="100"
        android:title="關于"
        app:actionViewClass="android.support.v7.widget.SearchView"
        app:showAsAction="always" />
        <!--android:icon="@drawable/ic_toolbar_back"-->

    <item
        android:id="@+id/menu_ni1"
        android:orderInCategory="12"
        android:title="about1"
        app:showAsAction="never" />
</menu>
           

Android AppBar樣式設計☞ActionBar/Toolbar