什麼是 Action?
Action主要提供在該Activity中最重要的操作, Action會加入到 App Bar 中。如下圖的加號。
例如,照片瀏覽App可能會提供Action作為共享按鈕和創建按鈕,而當查看單張照片時可能會提供Action作為裁剪和過濾按鈕。
但App Bar的空間有限,如果Action數量多於App Bar中可以容納的數量,則App Bar會將多餘的Action放在overflow menu。也可以指定Action應該顯示在overflow menu中而不是顯示在App Bar。
建立 Action
所有的Action和其他元件都是定義在menu資源中。
首先在app/src/main/res/menu目錄中建立menu resource file。
並在menu resource file內加入一個<item>元素,該元素定義要顯示的Action如下
/app/src/main/res/menu/main_actions.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_add" android:title="Add" android:icon="@drawable/add" android:orderInCategory="1" app:showAsAction="ifRoom" /> </menu>
android:id=“@+id/action_add”是為了在程式碼中引用Action。android:icon=“@drawable/add”是該Action顯示在App Bar上的圖示android:orderInCategory=“1” 是該Action顯示在App Bar上的順序,越小越靠近左側
app:showAsAction=“ifRoom” 是該Action的圖示如何顯示的設定,可用的選項如下
ifRoom ->app bar有空間再加入,若空間不夠則放入overflow menu
withText -> 加入標題文字
never -> 總是在overflow menu,不在app bar的空間
always -> 總是放在app bar
以上的屬性的說明可以參考這裡
https://developer.android.com/guide/topics/resources/menu-resource
在編輯menu resource file時可以開啟preview視窗,方便查看目前的頁面。
加入 Action 到 App Bar
覆寫Activity的onCreatOptionsMenu方法,並在該方法中指定要使用的menu resource file。
package com.codefoxx.toolbarexample.basicaction; import android.view.Menu; import android.view.View; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import androidx.appcompat.widget.Toolbar; import com.codefoxx.toolbarexample.R; public class BasicActionActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_basic_action); Toolbar toolBar = findViewById(R.id.app_toolbar); setSupportActionBar(toolBar); } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.main_actions, menu); return super.onCreateOptionsMenu(menu); } }
這裡要注意的是若該Activity使用的是Tool Bar,則必須要先設定Tool Bar,也就是上面的
Toolbar toolBar = findViewById(R.id.app_toolbar); setSupportActionBar(toolBar);
否則下方的onCreateOptionsMenu會失效。
啟動App,便可以看到Action顯示在App Bar中。
實作 Action 行為
接著實作按下該Action時的行為。
覆寫Activity的onOptionsItemSelected方法,該方法就是使用者點擊App Bar上的 Action會觸發的方法。
在該方法中根據在menu resource file的<item> android:id設定的值來判斷按下了哪個Action。
以下範例很簡單的顯示Toast
package com.codefoxx.toolbarexample.basicaction; import android.content.Intent; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.widget.Toast; import androidx.annotation.NonNull; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import androidx.appcompat.widget.Toolbar; import com.codefoxx.toolbarexample.R; public class BasicActionActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_basic_action); Toolbar toolBar = findViewById(R.id.app_toolbar); setSupportActionBar(toolBar); } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.main_actions, menu); return super.onCreateOptionsMenu(menu); } @Override public boolean onOptionsItemSelected(@NonNull MenuItem item) { int itemId = item.getItemId(); switch (itemId) { case R.id.action_add: Toast.makeText(this, "click add action button", Toast.LENGTH_SHORT).show(); break; } return super.onOptionsItemSelected(item); } }
完成,以上便是加入Action到App Bar的範例。
完整程式碼如下
/app/src/main/res/layout/activity_basic_action.xml
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout 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=".basicaction.BasicActionActivity"> <include android:id="@+id/app_toolbar" layout="@layout/toolbar_main" /> </androidx.constraintlayout.widget.ConstraintLayout>
/app/src/main/res/menu/toolbar_main.xml
<?xml version="1.0" encoding="utf-8"?> <androidx.appcompat.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> </androidx.appcompat.widget.Toolbar>
以下是App Bar的相關內容。
http://34.80.81.192/?p=6149
http://34.80.81.192/?p=6176
http://34.80.81.192/?p=6192
Article Comments