ToolBar學習總結

Android 使用Toolbar設置頂部佈局，

本文主要設置ToolBar背景、標題、菜單圖標（三個小點及替換）和彈出菜單的背景顏色

下面是在xml佈局文件中設置標題和menu

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".toolbar.ToolBarActivity">

  <androidx.appcompat.widget.Toolbar
        android:id="@+id/mToolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:popupTheme="@style/ToolBarAction"
        android:theme="@style/toolbar"
        app:title="標題"
        app:subtitle="副標題"
        app:navigationIcon="@android:drawable/ic_menu_compass"
        app:menu="@menu/toolbar_menu"
        app:titleTextColor="@color/color_ffffff"
        app:subtitleTextColor="@color/color_ffffff"
        android:background="@color/color_0176da" />

</LinearLayout>

menu菜單文件如下：

<?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/setting"
        android:icon="@android:drawable/ic_menu_set_as"
        android:title="@string/setting"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/startUp"
        android:icon="@android:drawable/star_on"
        android:title="@string/star"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/item1"
        android:icon="@android:drawable/ic_input_add"
        android:title="@string/add"
        app:showAsAction="never" />
    <item
        android:id="@+id/item2"
        android:icon="@android:drawable/ic_input_delete"
        android:title="@string/release"
        app:showAsAction="never" />

</menu>

一、設置背景顏色和標題及menu

背景顏色比較簡單，在代碼中直接通過background設置即可，如上述代碼中設置的

也可以在代碼中設置標題和標題顏色、副標題和副標題顏色以及menu菜單，

 app:title="標題"
 app:subtitle="副標題"
 app:navigationIcon="@android:drawable/ic_menu_compass"
 app:menu="@menu/toolbar_menu"
 app:titleTextColor="@color/color_ffffff"
 app:subtitleTextColor="@color/color_ffffff"
 android:background="@color/color_0176da"

也可以在Activity中設置：

mToolbar = findViewById(R.id.mToolbar);
mToolbar.setLogo(R.mipmap.camera_take);
mToolbar.setTitle("大標題");
mToolbar.setSubtitle("副標題");
mToolbar.setNavigationIcon(android.R.drawable.ic_menu_compass);
mToolbar.inflateMenu(R.menu.toolbar_menu);

二、設置menu菜單圖標（三個小點）顏色及替換

設置menu後，右邊菜單會有時會展示豎向的三個黑色小點，如果我們只是改變顏色，只需要在style樣式中定義一個樣式

<style name="toolbar">
        <item name="colorControlNormal">@color/color_ffffff</item>
</style>

然後xml中引入style樣式即可

android:theme="@style/toolbar"

如果要改變成其他icon，我們只需在頁面中通過 setOverflowIcon設置即可

mToolbar.setOverflowIcon(ContextCompat.getDrawable(this,R.mipmap.camera_result_ok));

三、設置menu，背景顏色和文本顏色

通過menu菜單屬性showAsAction設置menu的顯示方式：

• always 一直顯示在Toolbar中
• ifRoom 屏幕空間足夠時顯示在Toolbar
• never 只顯示在菜單中
• 需要注意，Toolbar中action只顯示圖標，菜單中只顯示文字。

如果要改變menu的背景顏色及文本字體顏色，我們也需要在style中申明一種樣式，如下：

<style name="ToolBarAction" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="overlapAnchor">false</item>
        <item name="android:background">@color/color_407dee</item>
        <item name="actionMenuTextColor">@color/color_ffffff</item>
        <item name="android:textColorPrimary">@color/color_ffffff</item>
</style>

然後在toolbar中引入：

app:popupTheme="@style/ToolBarAction"

四、設置導航欄圖標及擊事件和menu點擊事件

設置導航欄圖標

mToolbar.setNavigationIcon(android.R.drawable.ic_menu_compass);

 導航欄點擊事件

mToolbar.setNavigationOnClickListener(v -> {
       Toast.makeText(ToolBarActivity.this,"導航欄按鈕",Toast.LENGTH_SHORT).show();
 });

menu菜單點擊事件

       mToolbar.setOnMenuItemClickListener(item -> {
            ToastUtils.show(item.getTitle());
            switch (item.getItemId()){
                case R.id.setting:
                    ...
                    break;
                case R.id.startUp:
                    ...
                    break;
                case R.id.item1:
                    ...
                    break;
                case R.id.item2:
                    ...
                    break;
            }
            return false;
        });

案例效果圖：