實作Activity上方選單Menu與下拉項目功能

作者 | 2017-07-31

選單Menu

Android 6.0開始,在上方橫條狀區塊使用的是Toolbar元件,在其右方有個選單按鈕,垂直三個小點的圖示即是應用程式的選單鈕,如下圖:

按下選單鈕後會出現選單(Menu),預設只有一個選單項目(Menu item)為Settings,如下圖:

設計選單功能

在Activity出現在畫面之前,會自動呼叫Activitiy的「onCreateOptionsMenu」方法,方法的參數帶來一個menu物件,在本節,筆者將在Atm專案中加入選單元件。

|建立選單配置資源|

請在左方專案區中點擊app後,使用功能表的「New/Android resource file」,產生一個資源檔,請在畫面中Reource type下拉選單將此資源定義為「Menu」,再輸入File name檔名為「menu_main.xml」,如下圖:

建立的選單配置檔在「res/menu/menu_main.xml」,請開啟它,如下圖:

選單配置檔的根元素一律是menu,請在menu_main.xml中加入一個item元素,手動輸入item元素後,按下空白時會自動出現下拉屬性選單,如下圖:

 

請為其加上「android:id」、「android:title」與「app:showAsAction」三項屬性,如下圖:

在上圖的「app:showAsAction」的app出現紅色錯誤,這是因為這個XML檔並未加入app這個必要的namespace宣告,請將游標停在在紅色的app處,按下快速解決鍵「Alt+Enter」,選擇「create namespace declaration」後Enter加入宣告,如下圖:

請以同樣的方式,再新增一個項目Help,menu_main.xml檔案原始碼如下:

在選單中宣告二個項目(item),其資源ID為「action_settings」、「action_help」,標題為「設定」,而showAsAction代表的是它在ToolBar上顯示的原則。

在畫面上方選單鈕的左方空白區稱之為「Action」動作按鈕區域,常用的選單功能可固定顯示在這個區域中,如下圖所示:

item元素中可為其設定「app:showAsAction」屬性,可使用以下值:

  • never:不會顯示在Action區域
  • ifRoom:若Action區域有空間,就會顯示
  • always:無論如何都會顯示在Action區域上,但不建議使用此值
  • withText:除了icon圖示外,也顯示item的標題文字

每個元素應該為其訂定「android:id」屬性,用來辨識每個不同的選單項目,也應有「android:title」屬性,代表在畫面中顯示的標題文字。也可使用「android:icon」為項目指定一個圖示。

|覆寫方法|

開啟MainActivity類別,使用覆寫方法快速鍵「Ctrl+O」,覆寫「onCreateOptionsMenu」與「onOptionsItemSelected」兩個方法,並在裏面實作以下程式碼:

程式碼第5行先呼叫Activity的getMenuInflater方法得到「MenuInflater物件」,它是一個專門用來產生選單的類別,呼叫inflate方法可讀取一個Menu設計圖(XML檔),依照設計圖產生menu物件。就像是充氣機,設計圖就是還未灌氣的氣球。因此,在專案中的「/res/menu/menu_main.xml」就是MainActivity的選單設計檔。

執行後請先以jack登入,成功登入後的MainActivity如下圖:

選單的事件處理

當按下選單中的任一個項目時,會自動呼叫Activity的onOptionsItemSelected方法,並傳來被按下的項目MenuItem物件,在方法中實作以下程式碼,如下:

  • 第3行先取得選單項目的id值,id值即為設計檔中為每個item所訂定的值。
  • 第4行即是簡單判斷是否按下的是「Settings」項目,目前無任何處理的程式碼,直接回傳true。

如果有多個選單項目,應將if判斷以switch…case改寫,可增加程式的可讀性並提昇日後維護的效率。

相關文章:

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *