Material Design實戰之ToolBar

Toolbar

1.簡介

Toolbar

是在 Android 5.0 開始推出的一個 Material Design 風格的導航控件，Google 非常推薦大家使用

Toolbar

來作為Android用戶端的導航欄，以此來取代之前的

Actionbar

。與

Actionbar

相比，

Toolbar

明顯要靈活的多。它不像

Actionbar

一樣，一定要固定在

Activity

的頂部，而是可以放到界面的任意位置。

2.ActionBar從哪來的呢？

其實是根據項目中指定的主題來顯示的

3.Toolbar的組成

對應xml檔案

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimary"
        app:logo="@mipmap/ic_launcher"
        app:title="标題"
        app:titleTextColor="#fff"
        app:subtitle="副标題"
        app:subtitleTextColor="#fff"
        app:navigationIcon="@drawable/ic_menu"
        app:popupTheme="@style/toolBar_pop_item"
        >

4.最基本使用

①首先更改主題，把主題改成

Theme.AppCompat.Light.NoActionBar

或者

Theme.AppCompat.NoActionBar

。

差別：

Theme.AppCompat.Light.NoActionBar 表示淺色主題，它會将界面的主體顔色設成淺色，陪襯顔色設成深色。 Theme.AppCompat.NoActionBar 表示深色主題，它會将界面的主體顔色設深色，陪襯顔色設成淺色。
Material Design的一些theme

Theme.MaterialComponents
Theme.MaterialComponents.NoActionBar
Theme.MaterialComponents.Light
Theme.MaterialComponents.Light.NoActionBar
Theme.MaterialComponents.Light.DarkActionBar
Theme.MaterialComponents.DayNight
Theme.MaterialComponents.DayNight.NoActionBar
Theme.MaterialComponents.DayNight.DarkActionBar

反正總之就是

NoActionBar

有時候也設定它

Material Design實戰之ToolBar

關于其他屬性是什麼意思，我們看下面一張圖

②然後我們修改

MainActivity

的xm檔案

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

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

</FrameLayout>

為了友善，我們将布局改成

FrameLayout

，然後添加了

Toolbar

控件。裡面的其他屬性好說，就是最後兩個屬性。

android:theme

是為了能讓

ToolBar

單獨使用深色主題，

app:popupTheme

是為了單獨将彈出來的菜單項指定成淺色主題（

popup

的意思是彈出）

③然後我們在

MainActivity

中調用

setSupportActionBar(findViewById(R.id.mToolBar));

效果

這樣，具備實作

MaterialDesign

效果能力的

ToolBar

就出來了。上面顯示的文字可以在

這裡進行更改。

5.添加菜單選項

我們可以給它加一些菜單選項。

①首先準備幾張圖檔，然後右擊

res

目錄，建立

Directory

，建立名為

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/backup"
        android:icon="@mipmap/ic_backup"
        android:title="Backup"
        app:showAsAction="always"/>
    <item
        android:id="@+id/delete"
        android:icon="@mipmap/ic_delete"
        android:title="Delete"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/settings"
        android:icon="@mipmap/ic_settings"
        android:title="Settings"
        app:showAsAction="never"/>
</menu>

app:showAsAction 的 always 表示永遠顯示在 ToolBar 中，如果螢幕空間不夠則不顯示。 ifRoom 表示螢幕空間足夠的情況下顯示在 Toolbar 中，不夠的話就顯示在菜單當中。 never 表示永遠顯示在菜單當中。

注意：

Toolbar

中的

action

按鈕隻會顯示圖示，菜單中的

action

按鈕隻會顯示文字。

②然後在

MainActivity

中解析

menu

檔案以及對

item

添加點選事件

//加載toolbar.xml這個菜單檔案
    @Override
    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.backup:
                Toast.makeText(this,"你點選了backup",Toast.LENGTH_LONG).show();
                break;
            case R.id.delete:
                Toast.makeText(this,"delete",Toast.LENGTH_LONG).show();
                break;
            case R.id.settings:
                Toast.makeText(this,"settings",Toast.LENGTH_LONG).show();
                break;
                
        }
        return true;
    }

也就是添加這兩個方法，具體功能都寫了注釋，不難了解的

運作效果

6.注意點

我們在更改

Toolbar

屬性的時候，一定要注意兩個問題

①厘清是

android

作用域還是

app

作用域

比如這裡是

app

作用域的就不需要加字首，是

android

作用域的就需要加字首

②厘清設定的位置

7.一些常用的用法：

（1）對 `NavigationIcon` 設定點選監聽

NavigationIcon

就是左上角的那個預設是傳回箭頭的鍵的圖示

（2）自定義 `Toolbar` 彈出菜單樣式

①首先定義菜單樣式的

theme

<!--自定義toolbar菜單樣式-->
<style name="toolbarMenuStyle" parent="@style/Widget.AppCompat.PopupMenu.Overflow">
 
    <!-- 是否覆寫錨點，預設為true，即蓋住Toolbar -->
    <item name="overlapAnchor">false</item>
    <!-- 彈出層背景顔色 -->
    <item name="android:popupBackground">@color/material_deep_teal_500</item>
    <!-- 彈出層垂直方向上的偏移，負值會覆寫toolbar -->
    <item name="android:dropDownVerticalOffset">5dp</item>
    <!-- 彈出層水準方向上的偏移，即距離螢幕左邊的距離，負值會導緻右邊出現空隙 -->
    <item name="android:dropDownHorizontalOffset">-2dp</item>
    <!--文字顔色-->
    <item name="android:textColor">@color/white</item>
    
</style>

②然後在

Toolbar

的

theme

中進行指定

③最後在

Toolbar

控件中進行引用

整體一對一效果

（3）一些常用的屬性彙總

app:navigationIcon 設定navigation button
app:logo 設定logo 圖示
app:title 設定标題
app:titleTextColor 設定标題文字顔色
app:subtitle 設定副标題
app:subtitleTextColor 設定副标題文字顔色
app:popupTheme Reference to a theme that should be used to inflate popups - shown by
widgets in the toolbar.
app:titleTextAppearance 設定title text 相關屬性，如：字型,顔色，大小等等
app:subtitleTextAppearance 設定subtitletext相關屬性，如：字型,顔色，大小等等
app:logoDescription logo 描述
android:background Toolbar 背景
android:theme 主題

Material Design實戰之ToolBar

Toolbar

1.簡介

2.ActionBar從哪來的呢？

3.Toolbar的組成

4.最基本使用

5.添加菜單選項

6.注意點

7.一些常用的用法：

（1）對 `NavigationIcon` 設定點選監聽

（2）自定義 `Toolbar` 彈出菜單樣式

（3）一些常用的屬性彙總

繼續閱讀

mvp初探

Android常用工具類簡介目錄

android常用工具類轉載自：http://www.trinea.cn/android/android-common-utils/Android常用工具類

Android常用工具類ToastUtilsSizeUtilsLogUtilsRetrofitManagerAnimUtil

SIP Presence SUBSCRIBE-NOTIFY

QName是什麼

Android Studio 0.8.0解決 Failure [INSTALL_FAILED_OLDER_SDK] 問題

今日頭條iOS用戶端啟動速度優化技術調研實測資料

Android – ListView 中添加按鈕，動态删除添加ItemView的操作

Kotlin的ListView與RecyclerView的簡單應用

關于公司的那些坑：Android Studio篇

android SQLite事務和kotlin協程

無法正常編譯錯誤Compilation failed to complete

關于Gradle配置的小結

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Android APK檔案反編譯Android APK檔案反編譯

Material Design實戰之ToolBar

Toolbar

1.簡介

2.ActionBar從哪來的呢？

3.Toolbar的組成

4.最基本使用

5.添加菜單選項

6.注意點

7.一些常用的用法：

（1）對​ ​NavigationIcon​ ​設定點選監聽

（2）自定義​ ​Toolbar​ ​彈出菜單樣式

（3）一些常用的屬性彙總

繼續閱讀

（1）對 `NavigationIcon` 設定點選監聽

（2）自定義 `Toolbar` 彈出菜單樣式