ToolBar的使用

抽時間整理記錄一下toolbar的相關知識

1 隱藏掉actionbar

2 寫佈局文件

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.myway.toolbar.MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="368dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:background="?attr/colorPrimary"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        tools:layout_editor_absoluteY="8dp">
        <!--app:popupTheme="@style/PopUpOverLay"-->
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
            <android.support.v7.widget.SearchView
                android:layout_width="match_parent"
                android:layout_height="match_parent"/>

        </LinearLayout>

    </android.support.v7.widget.Toolbar>

</android.support.constraint.ConstraintLayout>

由於toolbar是viewgroup,所以可以包含子控件

3 寫menu文件 

如果你的toolbar中不需要菜單，也可以不寫

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/one"
        android:title="one"
        app:showAsAction="always"/>

    <item
        android:title="two"
        android:icon="@mipmap/ic_launcher"
        app:showAsAction="never"/>

    <item
        android:title="three"
        android:icon="@mipmap/ic_launcher"
        app:showAsAction="never"/>

</menu>

4 在activity中使用

先找到控件，進行一系列設置，同樣如果不需要菜單可以不設置菜單的樣式，不進行填充 需要注意的是這兩句話的順序不能反，否則樣式是沒有效果的

樣式在後面講到

toolbar = (Toolbar) findViewById(R.id.toolbar);
        //設置導航圖標
        toolbar.setNavigationIcon(R.mipmap.register_back);
        //設置標題 子標題
        toolbar.setTitle("title");
        toolbar.setSubtitle("sub");
        //設置Logo
        toolbar.setLogo(R.mipmap.ic_launcher);
        //這隻彈出菜單的主題樣式
        toolbar.setPopupTheme(R.style.PopUpOverTheme);
        //填充菜單
        toolbar.inflateMenu(R.menu.toolbarmeni);
        //設置標題的margin
//        toolbar.setTitleMargin(50, 0, 50, 0);
        //溢出菜單的點擊事件
        toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                Toast.makeText(MainActivity.this, "點擊了" + item.getTitle(), Toast.LENGTH_SHORT).show();
                return false;
            }
        });
        //導航按鈕的點擊事件
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "點擊了導航鍵", Toast.LENGTH_SHORT).show();
            }
        });
        //顯示溢出菜單
        toolbar.showOverflowMenu();

效果是這個樣子 因爲最後一行的設置，菜單會直接顯示出來 最基本的toolbar使用

5 設置溢出菜單的樣式

在styles中 新增如下樣式  其中設置背景有兩種方法，不知道有什麼不同 。字體顏色和大小隻能針對出現在彈出菜單中的item，出現在toolbar中的item無效

上圖中菜單沒有覆蓋toolbar

<style name="PopUpOverTheme" parent="ThemeOverlay.AppCompat.Light">
        <!--菜單設置背景-->
        <item name="android:colorBackground">@android:color/darker_gray</item>
        <!--<item name="android:itemBackground">@android:color/darker_gray</item>-->
        <!--菜單中的字體顏色-->
        <item name="android:textColorPrimary">@android:color/holo_red_dark</item>
        <!--菜單中的字體大小-->
        <item name="android:textSize">20sp</item>
        <!--菜單是否覆蓋toolbar-->
        <item name="overlapAnchor">false</item>
    </style>

在activity中和佈局文件中都可以設置，代碼片段中都有體現

6 設置toolbar的背景顏色

佈局文件中background屬性可以設置背景顏色

7 設置toolbar文字顏色

創建項目時會自動生成一個AppTheme的style，在其中添加

<item name="android:actionMenuTextColor">@android:color/white</item>

運行後發現 屬性爲never的item確實是變成白色，但是標題並沒有變化

註釋掉，換成以下代碼

<item name="android:textColorPrimary">@android:color/white</item>

發現副標題顏色並沒有變化，如果項目中沒有副標題，那麼就滿足需求了，但是問題來了，如果還需要修改標題的字體大小怎麼辦？我們用另一種方法 將上述代碼註釋掉

 <style name="SubtitleMode" parent="TextAppearance.Widget.AppCompat.Toolbar.Subtitle">
        <item name="android:textColor">@color/colorAccent</item>
        <item name="android:textSize">30sp</item>
    </style>

    <style name="TitleMode" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
        <item name="android:textColor">@color/colorAccent</item>
        <item name="android:textSize">10sp</item>
    </style>

在styles中新增以上樣式，在toolbar控件中增加如下屬性

app:subtitleTextAppearance="@style/SubtitleMode"
app:titleTextAppearance="@style/TitleMode"

可以看到標題顏色都變化了

再加一個樣式 並在toolbar中引用

<style name="MyToolbarTheme" parent="@style/Base.ThemeOverlay.AppCompat.ActionBar">
        <item name="actionMenuTextColor">@android:color/white</item> 
        <item name="android:textSize">20sp</item> 
    </style>

app:theme="@style/MyToolbarTheme"

現在顏色和大小都可以變成自己想要的了

需要注意的是我們使用到了兩個主題，一個是oopupTheme,彈出菜單的主題，另一個是toolbar的主題，不要混淆

8 修改菜單圖標

三個小黑點也不太協調，修改方法如下 再加一個樣式

<style name="MyOverflowButtonStyle" parent="@android:style/Widget.ActionButton.Overflow">
        <item name="android:src">@mipmap/register_back</item>
</style>

在MyToolbarTheme中引用 將src換成自己的圖片

<item name="android:actionOverflowButtonStyle">@style/MyOverflowButtonStyle</item>

發現圖片確實變化了