iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 10
1
Mobile Development

程式初學:Android與Kotlin系列 第 10

Day 10--實作app右上方的menu選單

  • 分享至 

  • xImage
  •  

實作app右上方的小點點menu選單

新增menu,在 XML 中定義選單

1.首先在menu要出現的頁面,例如MainActivity或Fragment*中
override onCreateOptionMenu()

2.然後到專案的res資料夾,新增選resource file建立一個option_menu.xml
Resource type選Menu(會產生一個Menu資料夾)
按OK

3.在此option_menu.xml,<menu </menu>內以<item>標籤增加選單顯示的項目,例如

4.這時只是在ide預覽畫面,若執行app,選單還不會出現
所以我們要inflate它,回到MainActivity加上inflater
執行app就會看到選單出現了

    override fun onCreateOptionsMenu(menu: Menu?): Boolean {
        // 加上inflater,以先前新增的option_menu做爲參數傳入
        menuInflater.inflate(R.menu.option_menu, menu)
        return super.onCreateOptionsMenu(menu)
    }

5.選單xml中還有一些屬性
android:icon 設定顯示項目圖示
android:showAsAction 設定項目如何顯示,例如
app:showAsAction="always"表示項目固定顯示在上方app bar,而不會收在小點點中

6.巢狀選單,標籤item下還可包裝選單,例如

<?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/edit"
        android:title="編輯"
        app:showAsAction="always">
    </item>

    <item
        android:id="@+id/del"
        android:title="刪除" >
        <menu>
            <item
                android:id="@+id/test1"
                android:title="test1" />

            <item
                android:id="@+id/test2"
                android:title="test2" />
        </menu>
    </item>

</menu>

設定點擊動作

1.要再override onOptionsItemSelected(),此方法內使用item.itemId來確認menu內所被點選的項目
就可以撰寫當項目被點選時的動作,例如

    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        return when (item.itemId) {
            R.id.edit -> {
                Toast.makeText(this, "點選編輯", Toast.LENGTH_SHORT).show()
                true
            }
            R.id.sub_menu ->{
                Toast.makeText(this, "點選下一層", Toast.LENGTH_SHORT).show()
                true
            }
            R.id.test1 ->{
                Toast.makeText(this, "點選test1", Toast.LENGTH_SHORT).show()
                true
            }
            R.id.test2 ->{
                Toast.makeText(this, "點選test2", Toast.LENGTH_SHORT).show()
                true
            }
            else -> super.onOptionsItemSelected(item)
        }

*在fragment顯示option menu

option menu的xml建立好之後
一般在activity中要顯示,就是在MainActivity.kt override, 例如

override fun onCreateOptionsMenu(menu: Menu?): Boolean {
        val inflater=menuInflater
        inflater.inflate(R.menu.option_menu,menu)
        return true
    }

但當要用在fragment中,除了要override onCreateOptionsMenu()以外
還須要override onActivityCreated(),設定setHasOptionsMenu(true),例如

 override fun onActivityCreated(savedInstanceState: Bundle?) {
        super.onActivityCreated(savedInstanceState)
        setHasOptionsMenu(true)
    }

override fun onCreateOptionsMenu(menu: Menu, inflater: Me1014nuInflater) {
        super.onCreateOptionsMenu(menu, inflater)
        inflater.inflate(R.menu.option_menu,menu)
    }

參考
https://developer.android.com/guide/topics/ui/menus#options-menu


上一篇
Day 9--RecyclerView(二)點擊item
下一篇
Day 11--Fragment試用
系列文
程式初學:Android與Kotlin30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言