Android – 下部ナビゲーションで新しい画面に遷移する
■ナビゲーション管理
新しく画面を配置するために、まずはナビゲーションボタンと画面の連携部分を管理してくれるファイルを修正します
・デザイン画面
「app/res/navigation/mobile_navigation.xml」を開きます
・手順
1. デスティネーションを作成
これがナビゲーションボタンを管理するコンポーネント(Navigation Controller)です
ナビゲーションエディタの左上にある「New Destination」をクリックして、「Create new destination」を選択します
フラグメントの追加では、「フラグメント (ViewModel 付き)」を選択します
新しいフラグメントを以下で設定します
- フラグメント名：NewItemFragment
- フラグメント・レイアウト名：fragment_newitem
- ViewModel Name：NewItemViewModel
- ソース言語：Kotlin （変更不要）
2. ナビゲーション グラフを修正する
新しいフラグメントが追加されましたが、idやラベルが他のフラグメントとあっていませんので、修正します
- id：navigation_newitem
- ラベル：@string/title_newitem
よく見ると名前も他のフラグメントとかなり違っていますので、これを解消します
3. 新しいパッケージを作成する
新しいフラグメントを設定した時に設定した以下の2項目は、上の絵のように、「app/java/com.example.myapplication/ui」に存在しています
- フラグメント名：NewItemFragment
- ViewModel Name：NewItemViewModel
これが他のフラグメントと異なっている原因です
uiパッケージの下に「newitem」パッケージを新しく作成します
4. 新しいパッケージにクラスファイルを移動する
2つのクラスファイルを作成した「newitem」パッケージへドラッグ＆ドロップで移動します
「リファクタリング」ボタンをクリックして移動を完了させます
これでナビゲーション グラフは正しく修正できました
・コード画面
「mobile_navigation.xml」のコードを確認すると、以下のようになっています
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/navigation_home"
android:icon="@drawable/ic_home_black_24dp"
android:title="@string/title_home"/>
<item
android:id="@+id/navigation_dashboard"
android:icon="@drawable/ic_dashboard_black_24dp"
android:title="@string/title_dashboard" />
<item
android:id="@+id/navigation_notifications"
android:icon="@drawable/ic_notifications_black_24dp"
android:title="@string/title_notifications"/>
<item
android:id="@+id/navigation_newitem"
android:icon="@drawable/ic_newitem_black_24dp"
android:title="@string/title_newitem" />
</menu>
追加したフラグメントが４つ目に入っていますね！
■新しい画面
・リソースファイル
プロジェクトツリーの「app/res/layout/fragment_newitem.xml」が作成された新しい画面になります
・デザイン画面
ナビゲーションボタンを追加した時と同様にデザイン画面のレイアウトを変えて、作業を進めていきましょう
デザイン画面で行うことは大きくは以下の2つです
- FrameLayoutを変換する
- TextViewを修正する
・手順
1. FrameLayoutを変換する
追加された新しい画面は、FrameLayoutになっており、他のフラグメントとは異なるため、ConstraintLayoutに変換します
英語はわかりませんが、大したコードもないので、何も気にせず「OK」を押す！ｗ
2. idを削除する
変換するとConstraintLayoutのidが「frameLayout」となっているので、削除します
他の画面でもやっているように、画面に遷移したことがわかるように、画面中央にメッセージを表示させます
3. TextViewのidを変更する
idはプロジェクト内におけるオブジェクト固有の名前です
他のナビゲーションボタンと同様に「text_」を接頭語にして、ここでは「text_newitem」と名付けます
4. textを変更する
ナビゲーションボタンのタイトルと同様に、TextViewのtextに「@string/title_newitem」と設定します
6. レイアウトを修正する
今回は他の画面のTextViewのレイアウトを参考にして同じところに配置します
「layout_width」は「match_parent」に設定します
・コード画面
「fragment_newitem.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=".ui.newitem.NewItemFragment">
<TextView
android:id="@+id/text_newitem"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:textAlignment="center"
android:textSize="20sp"
android:text="@string/title_newitem"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
・画面を確認する
①お気づきでしょうか、画面上に「←」矢印が付いています
他の画面にはないので、これも消さないとダメですねー
タップしても動きやしないので・・ｗ
②文字列がtextに設定した「@string/title_newitem」が出てるだけですね
これはクラスファイルで他の画面と同じように、別のメッセージをtextに設定しないといけませんね！
