Go to Qiita Advent Calendar 2024 Top
LoginSignup
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@b150005

【Kotlin研修4日目】独自レイアウトのListView、アクションバーへのオプションメニューの実装

Last updated at Posted at 2021-06-07

独自レイアウトのListView

ListViewのItemを独自レイアウトで定義する手順は以下の通り。

  1. res/layoutフォルダに独自定義するレイアウトファイルを用意
  2. Adapterオブジェクトの生成時、
    SimpleAdapter(context:data:resource:from:to:)のresourceおよびtoに、
    独自定義したレイアウトファイルのR値を指定(後述)

SimpleAdapterオブジェクト生成時のR値

MainActivity.kt
SimpleAdapter(
    context: Context!,
    data: MutableList<out MutableMap<String!, *>!>!,
    resource: Int
    from: Array<String>!
    to: IntArray!
)
// パラメータ
// context: Adapterを生成するアクティビティオブジェクト(=コンテキスト)
// data: Adapterに紐づけるリストデータ
// resource: リスト形式ビュー(ListView)のItemのレイアウトを表現するR値
// from: リストデータ(MutableMap)のキー
// to: リストデータ(MutableMap)の値を埋め込むTextViewのR値(ID)

Android SDKで用意されたレイアウトを用いる場合のR値はandroid.R.、
独自定義したレイアウトファイルを用いる場合のR値はR.から始める。

パラメータ Android SDK 独自定義
resource android.R.layout.
simple_list_item_2 		R.layout.
<レイアウトファイル名>
to intArrayOf(
android.R.id.text1,
android.R.id.text2
) 		intArrayOf(
R.id.<TextViewのid>,
R.id.<TextViewのid>
)

アクションバー

アクティビティのタイトルやアクションを視覚的に表現する、アプリ上部に表示されるバー。
アクションバー.png

オプションメニュー

アクションバー内に表示される、アイコン形式のメニュー。

オーバーフローメニュー

アクションバー内に十分な余白がなく表示できないオプションメニューが格納される、文字列形式のメニュー。

オプションメニューの実装

参考: メニュー
オプションメニューを実装する手順は、以下の通り。

  1. resフォルダ内に、Resource Type: menuのAndroid Resource Directoryを作成
  2. 1.で作成したフォルダ内に、Menu Resource File(.xmlファイル)を作成
  3. アクティビティクラスに、オプションメニューを表示するためのonCreateOptionsMenu()メソッドを実装
  4. アクティビティクラスに、オプションメニューのアイテムが選択された場合の処理を記述するonOptionsItemSelected()メソッドを実装

Menu Resource Fileの記述

オプションメニューのItem含むレイアウトを定義するXMLファイル。

Menu Resource File

参考: メニューリソース
アプリ内に実装する各種メニューのレイアウトを定義する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/<ItemID>"
        app:showAsAction="<アクションバーへの表示設定>"
        android:title="@string/<strings.xmlで定義した文字列の変数名>"
        android:icon="@drawable/<アイコンID>
    />
</menu>

showAsAction

Activityクラスの継承元 属性
通常のActivity android:showAsAction
AppCompatActivity app:showAsAction

showAsActionの属性値

属性値 内容
never オーバーフローメニューに格納
always 常にアクションバーに表示(非推奨)
ifRoom スペースに余裕があればアクションバーに表示
余裕がない場合はオーバーフローメニューに格納

icon

アクションバーに表示する場合(=オプションメニュー)は指定したアイコンのみ表示され、
オーバーフローメニューに格納する場合はtitleの文字列のみ表示される。

サンプルコード

res/menu/menu_options_menu_list.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/menuListOptionSetMeal"
        app:showAsAction="never"
        android:title="@string/menu_list_options_setMeal"
    />

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

オプションメニューの表示

アクティビティ開始時に呼び出されるonCreateOptionsMenu()メソッドのブロック{...}内に、
オプションメニューのItemを定義したXMLを表示するMenuInflater.inflate()メソッドを記述する。

定義

MenuInflater.inflate(menuRes: Int, menu: Menu!): Unit
// パラメータ
// menuRes: メニューのレイアウトファイル名(R値)
// menu: インフレートを行うメニュー

サンプルコード

MainActivity.kt
class MainActivity: AppCompatActivity() {
    // 定義したオプションメニューの表示
    // onCreateOptionsMenu(menu:): アクティビティ開始時に呼び出されるメソッド
    // menu: Itemを保持するオプションメニュー
    override fun onCreateOptionsMenu(menu: Menu?): Boolean {
        // レイアウトファイルのインフレート
        menuInflater.inflate(R.menu.<XMLファイル名>, menu)
        // onCreateOptionsMenu()のオーバーライド時は、常にtrueを返却
        return true
    }
}

インフレート(inflate)

.xmlファイルに記述したビューをJavaオブジェクトとして実体化すること。

オプションメニューのアイテム選択時の処理

オプションメニューのアイテムは、既定でリスナとして定義されているため、
アイテム選択時に呼び出されるonOptionsItemSelected()メソッドを用いて、
選択されたアイテムに応じた分岐処理(イベントハンドラ)を実装する。
※アイテムが選択されない場合は、super.onOptionsItemSelected()の返り値(=false)を返却する必要がある。

サンプルコード

MainActivity.kt
class MainActivity: AppCompatActivity() {
    // オプションメニューItemの"タップ"イベント検知時の処理
    // onOptionsItemSelected(item:): オプションメニューのItemがタップされた場合に呼び出されるメソッド
    // item: タップされたItem
    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        // 最終的に返却するBool値(初期値: true)
        var returnVal: Boolean = true

        // タップされたItemに応じた分岐処理
        // MenuItem.itemId: ItemのID(R値)
        when(item.itemId) {
            R.id.<レイアウトファイルで定義したID> ->
                // Itemタップ時の処理
                ...

            R.id.<レイアウトファイルで定義したID> ->
                // Itemタップ時の処理
                ...

            else ->
                // オプションメニューのItem以外が選択された場合は、
                // 親クラス(super)のonOptionsItemSelected(item:)メソッドの
                // 返り値(デフォルトではfalse)を返却
                returnVal = super.onOptionsItemSelected(item)
        }
        ...
        // 最終的にBool値を返却
        // -> アイテムが選択され、正常に処理を行った場合はtrueを返却
        return returnVal
    }
}

アクションバーへの「戻る」ボタン(←)の実装

参考: ActionBar
アクションバーを表すNullable型のsupportActionBarプロパティの、setDisplayHomeAsUpEnabled()メソッドを、引数をtrueにして呼び出す。
なお、「戻る」ボタンのR値は、android.R.id.homeで表される。

定義

ActionBar.setDisplayHomeAsUpEnabled(showHomeAsUp: Boolean): Unit
// パラメータ
// showHomeAsUp: 1つ階層が上のアクティビティに戻る「←」ボタンの表示有無
// true: 表示
// false: 非表示

サンプルコード

MenuThanksActivity.kt
class MenuThanksActivity: AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        ...
        // アクションバー内に「戻る」ボタン(←)を表示
        supportActionBar?.setDisplayHomeAsUpEnabled(true)
    }

    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        var returnVal: Boolean = true

        if (item.itemId == android.R.id.home) {
            finish()
        }
        else {
            returnVal = super.onOptionsItemSelected(item)
        }

        return returnVal
}
1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?