【APP/Android】如何自己設計 Toolbar (Action Bar)

tags: APP Android

步驟1：style 設定 - 將預設的 ActionBar 拿掉

方法1：直接更改 AndroidManifest.xml

• 注意這邊是修改 application 的 theme，而不是 Activity

<application
    ...
    android:theme="@style/Theme.AppCompat.Light.NoActionBar">

方法2：修改 style.xml，直接改掉預設 theme

<!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->

方法3：修改 style.xml，創建新的 theme，並修改AndroidManifest.xml

• style.xml

<style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

• AndroidManifest.xml
  • 可以直接套用在 application
  • 或指定特定的 Activity

<activity  
   android:name=".MainActivity"  
   android:theme="@style/AppTheme.NoActionBar" />

步驟2：在 View 創建 Toolbar

<android.support.v7.widget.Toolbar  
   android:id="@+id/toolbar"  
   android:layout_width="match_parent"  
   android:layout_height="?attr/actionBarSize"     
   android:minHeight="?attr/actionBarSize" />

步驟3：style 設定 - 設定 Toolbar 的 style

View：接在步驟2之後繼續寫

• 參考 Toolbar 範例圖片
• 有些設定會與後端 Java class 重複，擇1即可
• app:popupTheme：設置 toolbar 彈出的 menu 的 style
• android:elevation：陰影效果
• app:logo：APP 的圖示
• app:navigationIcon：設定 up button 的圖示

<android.support.v7.widget.Toolbar 
    ...
    app:title="@string/app_name"
    app:titleTextColor="@android:color/white" 
    app:subtitle="test"
    app:logo="@mipmap/ic_back"
    app:navigationIcon="@mipmap/ic_drawer_home"     
    android:background="?attr/colorPrimary"
    android:elevation="4dp"
    android:theme="@style/AppTheme.ToolBarStyle"
    app:popupTheme="@style/AppTheme.PopupOverlay" />

style.xml：這裡也可以部分設定 Toolbar

• 有些設定會與 View 的設定重複，擇1即可
• actionMenuTextColor：設定右上角 menu 的文字的顏色

<style name="AppTheme.ToolBarStyle">
    <item name="android:textColorPrimary">@android:color/white</item>
    <item name="android:textColorSecondary">@android:color/white</item>
    <item name="actionMenuTextColor">@android:color/white</item>
    <item name="android:background">@color/colorPrimary</item>
    <item name="android:textSize">20sp</item>
</style>

<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

步驟4：在相對應的 Java class 實作 Toolbar

• setSupportActionBar(Toolbar toolbar), getSupportActionBar()：是屬於AppCompatActivity的方法，故直接在Activity中呼叫即可
• ActionBar 常用的方法
  • setDisplayShowTitleEnabled()：是否顯示Activity的標題, 副標題
  • setDisplayHomeAsUpEnabled()：左上角是否顯示返回按鈕
  • setHomeButtonEnabled()：左上角的圖示是否可以點擊

@Override  
protected void onCreate(Bundle savedInstanceState) {  
    ...
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    
    // 與前端 View 重複
    toolbar.setNavigationIcon(R.mipmap.ic_drawer_home);//设置导航栏图标
    toolbar.setLogo(R.mipmap.ic_launcher);//设置app logo
    toolbar.setTitle("Title");//设置主标题
    toolbar.setSubtitle("Subtitle");//设置子标题
    toolbar.setTitleTextColor(...);
    toolbar.setTitleTextAppearance(...);
    
    // 設定右上角的 menu
    toolbar.inflateMenu(R.menu.base_toolbar_menu);
    toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
        @Override
        public boolean onMenuItemClick(MenuItem item) {
            ...
        }
        
    setSupportActionBar(toolbar);
    getSupportActionBar().setDisplayShowTitleEnabled(true);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    getSupportActionBar().setHomeButtonEnabled(true);
}

補充：設定右上角 Menu 的資料

• 於 res/menu 創建一個 menu_example.xml
• showAsAction 屬性：
  • ifRoom：如果ActionBar有空間，該項目放在ActionBar
  • never：項目不放在ActionBar，放在最右側的選項選單
  • always：項目一定放在ActionBar (不建議使用)

<?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/action_search"
        android:icon="@mipmap/ic_search"
        android:title="@string/menu_search"
        app:showAsAction="ifRoom" />

    <item
        android:id="@id/action_notification"
        android:icon="@mipmap/ic_notifications"
        android:title="@string/menu_notifications"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_item1"
        android:title="@string/item_01"
        app:showAsAction="never" />

    <item
        android:id="@+id/action_item2"
        android:title="@string/item_02"
        app:showAsAction="never" />
</menu>

Reference 參考資料

1. Toolbar 圖片：https://blog.mosil.biz/2014/10/android-toolbar/
2. Android开发：最详细的 Toolbar 开发实践总结：https://www.jianshu.com/p/79604c3ddcae
3. Android Toolbar，你想知道的都在这里了：
   http://yifeng.studio/2016/10/12/android-toolbar/
4. 如何使用Toolbar(Actionbar)+DrawerLayout：http://givemepass.blogspot.tw/2016/07/toolbaractionbardrawerlayout.html
5. appbar 官方文件：https://developer.android.com/training/appbar/setting-up.html
6. Toolbar 官方文件：https://developer.android.com/reference/android/support/v7/widget/Toolbar.html
7. AppCompatActivity 官方文件：https://developer.android.com/reference/android/support/v7/app/AppCompatActivity.html
8. ActionBar 官方文件：https://developer.android.com/reference/android/app/ActionBar.html
9. [Android] Menu xml 文件定義 − item 標籤的 android:showAsAction 屬性用途：https://dreammushroomsprogramnotes.blogspot.tw/2015/09/android-menu-xml-item_13.html