[Android] フラグメント内でツールバーの設置、戻るボタン処理の実装-Androidアプリ個人開発者の実践的アドバイス集

フラグメントで、戻るボタンを持ったツールバーの設置方法を紹介します。
  
画面上部には、通常アクションバーが設置されていますが、これをツールバーに切り替えます。これにより柔軟な設定ができます。

## ツールバーのXML宣言

ツールバーのビューは<code>androidx.appcompat.widget.Toolbar</code>で宣言します。
  
layout_heightは`?attr/actionBarSize`とすることで、元々設置しているアクションバーと同じサイズを確保してくれます。
  
<code>elevation</code>は、ビューの重なりや影の表示を制御するために使用されます。この属性は、ビューが他のビューの上に浮かび上がる距離（高さ）を指定します。この値が大きいと、より上に大きく浮かび上がります。
  
以下は、ConstraintLayoutでのXML例です。
  
```xml
<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:elevation="4dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />
```
  
<br>
  
## kotlinでのツールバーの初期化
  
ツールバーの設定をしていきます。
  
タイトルは<code>.title</code>プロパティ、テキストの色は<code>.setTitleTextColor()</code>で設定できます。
  
アクションバーの代わりにツールバーを使用するため、<code>.setSupportActionBar</code>でツールバーのビューを指定します。
  
戻る（up）ボタンを表示するために<code>.supportActionBar?.setDisplayHomeAsUpEnabled(true)</code>を設定します。これと先ほどのツールバーを使用するための設定は、フラグメントが所属するアクティビティを取得し、AppCompatActivityクラスにキャストすることでアクセスできます。（<code>requireActivity()</code>メソッドの戻り値はActivityクラスなので、アクティビティが<code>AppCompatActivity</code>のサブクラスである場合にはキャストする必要があります。）
  
それから、戻るボタンの色設定をします。_toolBar.navigationIcon は、ツールバーに表示されるナビゲーションアイコン（通常は戻るボタン）を表します。<code>setColorFilter(Color.WHITE, PorterDuff.Mode.SRC_ATOP)</code>メソッドは、アイコンに対して色フィルターを適用します。具体的には、アイコンの色を白色（Color.WHITE）に設定し、<code>PorterDuff.Mode.SRC_ATOP</code>モードを使用してフィルターを適用します。このモードは、新しい色をアイコンにオーバーレイするためのモードです。白色をアイコンにオーバーレイすることで、アイコンの色を白色にしています。
 
  
<b>重要：<code>onOptionsItemSelected()</code>メソッドが呼び出されるように、<code>setHasOptionsMenu(true)</code>を設定します。これを設定しないと、フラグメントがオプションメニューを持たないとみなされてしまいます。</b>
  
以下がkotlinでのコード例になります。これをonViewCreated内に記述します。
  
```kotlin
_toolBar.title = "ツールバーのタイトル"
_toolBar.setTitleTextColor(Color.WHITE)
(requireActivity() as AppCompatActivity).setSupportActionBar(_toolBar)
(requireActivity() as AppCompatActivity).supportActionBar?.setDisplayHomeAsUpEnabled(true)
setHasOptionsMenu(true)
_toolBar.navigationIcon?.setColorFilter(Color.WHITE, PorterDuff.Mode.SRC_ATOP)
```
  
<br>
  
## onOptionsItemSelectedメソッドを使った戻るボタン処理
  
setHasOptionsMenu(true)を宣言したことで、フラグメントがオプションメニューを持つことをシステムに通知できるようになりました。
  
これにより、フラグメントがオプションメニューを持ち、ユーザーがオプションメニューの項目を選択したとき、<code>onOptionsItemSelected()</code>メソッドが呼び出されます。このメソッドをオーバーライドして、選択されたメニュー項目に対する処理を記述します。
  
戻るボタンは<code>android.R.id.home</code>というIDが割り振られています。このボタンが押されたときに前の画面に戻る処理を書けばよいわけですが、フラグメントの場合、バックスタックからポップするため、<code>parentFragmentManager.popBackStack()</code>と記述します。

以下がkotlinでのコード例になります。
  
```kotlin
override fun onOptionsItemSelected(item: MenuItem): Boolean {
    return when (item.itemId) {
        android.R.id.home -> {
            parentFragmentManager.popBackStack()
            true
        }
        else -> super.onOptionsItemSelected(item)
    }
}
```

<br>
  
## 最後に
  
最後に私の[日数計算アプリ](https://play.google.com/store/apps/details?id=io.github.hirotakatakayama.daychecker)でのツールバーを以下に示します。本記事で書いたXML及びkotlinを記述しており、<code>colorPrimary</code>は<code>#2572E5</code>です。赤い四角形で囲ったエリアがツールバーです。
  
<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCpqEMsydlmI3pKC7dnSZXaYTwYZKvOBLa547CG0dBPDlr3_6VZPJM0b5HJtpCj9thYv7JrfBtc1-Li5-T9ypFCYq29QrX2BSToHVh4zUcTec-_LCzKNzRKkSGgfEtf22oThsmk_9qyOy7BimXhRoEdgOXg2Aspgl1jEpMFaswOYpug1NCkzI6a9p_WA/s1618/ex-toolbar.png" style="display: block; padding: 1em 0; text-align: center; "><img alt="ツールバー表示例" border="0" height="320" data-original-height="1618" data-original-width="1074" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCpqEMsydlmI3pKC7dnSZXaYTwYZKvOBLa547CG0dBPDlr3_6VZPJM0b5HJtpCj9thYv7JrfBtc1-Li5-T9ypFCYq29QrX2BSToHVh4zUcTec-_LCzKNzRKkSGgfEtf22oThsmk_9qyOy7BimXhRoEdgOXg2Aspgl1jEpMFaswOYpug1NCkzI6a9p_WA/s320/ex-toolbar.png"/></a></div>

[Android] フラグメント内でツールバーの設置、戻るボタン処理の実装

0 件のコメント:

コメントを投稿

このブログを検索

ラベル

自己紹介

人気の投稿

不正行為を報告

リリースしたAndroidアプリ