Material Design學習（一）——Toolbar

參考文章：【自定義控件】
系統原生標題欄叫做ActionBar，而ToolBar繼承了ActionBar全部的功能，還有很高的靈活性。

一、原生標題欄

打開HelloWorld項目的AndroidManifest.xml文件，會發現android:theme指定了屬性爲Apptheme:

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
		......

繼續Ctrl+B進去，找到styles.xml文件：

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

發現指定的主題是Theme.AppCompat.Light.DarkActionBar深色主題，因爲要自定義標題欄，不能有原生標題欄，即Theme.AppCompat.NoActionBar或Theme.AppCompat.Light.NoActionBar。這裏我們選後者，淺色無標題欄。

其他參數指代的顏色：

1. colorPrimaryDark ：最上層狀態欄
2. colorPrimary：標題欄
3. textColorPrimary：標題欄文本
4. windowBackground：頁面背景
5. colorAccent：懸浮按鈕
6. navigationBarColor：導航欄

二、Toolbar標題欄

這麼引入：

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

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
        
</FrameLayout>

• 第三行：xmlns:app指定命名空間。正是因爲xmlns:android這麼寫，所以android:id才能這麼寫。這裏指定了xmlns:app，所以就能app:attribute這麼寫了。因爲MD是Android 5.0後的系統中出現的，很多MD屬性之前不存在，爲了兼容之前的系統，所以就用app:attribute
• 接着定義了Toolbar控件，它是appcompat庫提供的
  • 我們指定它的高度爲actionBar的高度
  • 它的背景色設置爲colorPrimary默認色
• 剛纔在styles.xml中設置了程序主題爲淡色主題，因此ToolBar也是淡色主題，所以 ToolBar上元素會自動變深色【白底黑字】，這樣很難看。所以ToolBar需要單獨設置深色主題：android:theme
• 但是彈出的菜單項變成深色就很難看了，所以需要單獨設置淺色主題:app:popupTheme【兼容5.0-】

三、展示

修改主活動【導入類androidx.appcompat.widget.Toolbar】：

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
    }
}

四、常用功能

1、修改標題欄文字

android:label

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="你好，呼吸君"

2、添加按鈕

在drawable-xxhdpi文件夾下準備按鈕圖標，在res下新建menu目錄，在裏面新建Menu resource file佈局toolbar.xml：

<?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/mongo"
        android:title="芒果"
        android:icon="@drawable/mango"
        app:showAsAction="always"/>
    <item
        android:id="@+id/cherry"
        android:title="櫻桃"
        android:icon="@drawable/cherry"
        app:showAsAction="always"/>
    <item
        android:id="@+id/settings"
        android:title="設置"
        android:icon="@drawable/grape"
        app:showAsAction="always"/>

</menu>

app:showAsAction指定按鈕的顯示位置【ToolBar顯示圖標，菜單顯示文字】:

• always：永遠顯示，屏幕空間不夠則不顯示
• ifRoom：屏幕控件夠則顯示，不夠就顯示在菜單裏
• never：一直顯示在菜單中

修改活動：

    // 加載`toolbar.xml`菜單
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.toolbar, menu);
        return true;
    }

    // 處理按鈕點擊事件
    @Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()) {
            case R.id.cherry:
                Toast.makeText(this, "櫻桃🍒", Toast.LENGTH_SHORT).show();
                break;
            case R.id.mongo:
                Toast.makeText(this, "芒果🍋", Toast.LENGTH_SHORT).show();
                break;
            case R.id.grape:
                Toast.makeText(this, "葡萄🍇", Toast.LENGTH_SHORT).show();
                break;
            default:
                break;
        }
        return true;
    }

3、展示