Android Toolbar 相關使用

從 Android 3.0 (API 11) 開始,默認主題背景的 Activity 均使用 ActionBar 作爲應用欄,隨着 Android 版本的演化,應用欄的功能逐漸添加到 ActionBar 中,不能版本的 Android 系統 ActionBar 行爲不同。
Toolbar 類的出現能夠確保應用在最大範圍的設備保持一致的行爲,能夠運行在 Android 2.1(API 7)或更高的設備上提供 Material Design 體驗,而 ActionBar 除非運行在 Android 5.0(API 21)或更高版本。

使用步驟

1. 首先要引入 v7 支持包,在 build.gradle 中配置如下代碼:

compile 'com.android.support:appcompat-v7:24.1.1'

隨着 Android 9.0(API 28)的發佈,有一個名爲 AndroidX 的支持庫的新版本,它包含現有的支持庫,還包含最新的 Jetpack 組件。如果使用 API 28 及以上,則不用引入 v7 支持包。

2. 在 AndroidManifest 文件中,設置主題爲 NoActionBar,防止應用使用 ActionBar,配置代碼如下:

<application
    android:theme="@style/AppTheme">
</application>

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- toolbar顏色 -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <!-- 狀態欄顏色 -->
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
</style>

3. 向 Activity 的佈局添加一個 Toolbar,代碼如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">
    
    <androidx.appcompat.widget.Toolbar
        android:id="@+id/my_toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"     //官方指定 MD 高度
        android:background="?attr/colorPrimary"
        app:navigationIcon="?attr/homeAsUpIndicator"    //設置 Navigation 圖標
        app:contentInsetStartWithNavigation="0dp"       //titile 與 NavigationIcon 距離     
        app:titleTextAppearance="@style/Toolbar.TitleText"   //設置 title 字體大小
        app:popupTheme="@style/popu_theme"    //設置 menu 樣式
        android:theme="@style/toolbar_theme"  //設置 toolbar 樣式
        />
        
</LinearLayout>

4. Toolbar 相關配置

  • 修改 Toolbar 標題字體大小,顏色。
<style name="Toolbar.TitleText" parent="TextAppearance.AppCompat.Title">
     <item name="android:textSize">15sp</item>
     <item name="android:textColor">#ffffff</item>
</style>
  • 修改 Toolbar 圖標顏色,標題字體顏色也可以在這裏設置。
<style name="toolbar_theme" parent="ThemeOverlay.AppCompat.Light">
    <!--設置標題顏色-->                                                 
    <item name="android:textColorPrimary">#ffffff</item>          
    <!--設置 toolbar 圖標顏色-->                                        
    <item name="colorControlNormal">#ffffff</item>                
</style>                                                          
  • 修改 Toolbar 上的 menu 背景顏色,字體顏色,以及避免覆蓋 toolbar。
<!--設置 menu 背景顏色,字體顏色-->                                                            
<style name="popu_theme" parent="ThemeOverlay.AppCompat.Light">                     
    <item name="android:background">#ffffff</item>                                  
    <item name="android:textColor">#ff0000</item>                                   
    <item name="overlapAnchor">false</item>   //不覆蓋錨點           
</style>

5. 在 Activity 的 onCreate() 方法中調用 setSupportActionBar()方法。

protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_toolbar);
        Toolbar myToolbar = findViewById(R.id.my_toolbar);
        setSupportActionBar(myToolbar);             //將 Toolbar 設爲 Activity 的應用欄
        ActionBar actionBar = getSupportActionBar();
        actionBar.setDisplayHomeAsUpEnabled(true);  //顯示 Navigation
}

6.加載 Menu 並添加點擊事件。

  • 在項目的 res/menu/ 目錄下,創建 menu 佈局文件,本例創建 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/action_favorite"
        android:icon="@mipmap/ic_launcher"
        android:title="喜歡"
        app:showAsAction="ifRoom"
        />
    <item
        android:id="@+id/action_set"
        android:title="設置"
        android:icon="@mipmap/ic_launcher"
        app:showAsAction="withText" />
    <item
        android:id="@+id/action_share"
        android:title="分享"
        android:icon="@mipmap/ic_launcher"
        app:showAsAction="withText"
        />

</menu>

//app:showAsAction 屬性
//1.ifRoom 如果 Toolbar 上有足夠的空間,操作會顯示爲按鈕,如果沒有空間,則會發送到溢出菜單。
//2.never  此操作會始終顯示在溢出菜單中。
//3.always 此操作會始終顯示在 ToolBar 上。
//4 withText 使菜單項和它的圖標,菜單文本一起顯示。
  • 加載 menu 佈局文件,在 Activity 中重寫 onCreateOptionsMenu(Menu menu) 方法。
@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.toolbar, menu);
    return super.onCreateOptionsMenu(menu);
}
  • 選擇菜單子項時響應操作,在 Activity 中重寫 onOptionsItemSelected() 方法。
@Override                                                                                
public boolean onOptionsItemSelected(@NonNull MenuItem item) {                           
    switch (item.getItemId()) {                                                          
        case R.id.action_favorite:                                                       
            Log.d("ToolbarActivity", "onOptionsItemSelected: action_favorite");          
            return true;                                                                 
        case R.id.action_set:                                                            
            Log.d("ToolbarActivity", "onOptionsItemSelected: action_set");               
            return true;                                                                 
        case R.id.action_share:                                                          
            Log.d("ToolbarActivity", "onOptionsItemSelected: action_share");             
            return true;                                                                 
        default:                                                                         
            return super.onOptionsItemSelected(item);                                    
    }                                                                                    
}                                                                                        
  • 顯示 menu 的 icon ,通過反射的方法。
@Override                                                                                          
public boolean onPreparePanel(int featureId, @Nullable View view, @NonNull Menu menu) {            
    if (menu != null) {                                                                            
        if (menu.getClass().getSimpleName().equals("MenuBuilder")) {                               
            try {                                                                                  
                Method method = menu.getClass().getDeclaredMethod("setOptionalIconsVisible",       
                        Boolean.TYPE);                                                             
                method.setAccessible(true);                                                        
                method.invoke(menu, true);                                                         
            } catch (Exception e) {                                                                
                e.printStackTrace();                                                               
            }                                                                                      
        }                                                                                          
    }                                                                                              
    return super.onPreparePanel(featureId, view, menu);                                            
}                                                                                                  

最終實現效果圖如下所示:
在這裏插入圖片描述
7.Fragment 中加載 Menu 並添加點擊事件。

  • 由於 Fragment 中沒有 setSupportActionBar() 方法,所以要託管到其 Activity 來處理。
AppCompatActivity appCompatActivity = (AppCompatActivity) getActivity();
appCompatActivity.setSupportActionBar(toolbar);
  • 讓 Activity 知道有 menu 要加載,此時 Fragment 可加載完成。
setHasOptionsMenu(true);
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章