Android – 下部ナビゲーションで新しい画面に遷移する

最終更新日

ページ番号: 1 2 3

■ナビゲーション管理

新しく画面を配置するために、まずはナビゲーションボタンと画面の連携部分を管理してくれるファイルを修正します

・デザイン画面

Navigation Controller
Navigation Controller
広告

「app/res/navigation/mobile_navigation.xml」を開きます

・手順

1. デスティネーションを作成

これがナビゲーションボタンを管理するコンポーネント(Navigation Controller)です

Navigation Editor
Navigation Editor

ナビゲーションエディタの左上にある「New Destination」をクリックして、「Create new destination」を選択します

Fragment追加
Fragment追加

フラグメントの追加では、「フラグメント (ViewModel 付き)」を選択します

Fragment設定
Fragment設定

新しいフラグメントを以下で設定します

  • フラグメント名:NewItemFragment
  • フラグメント・レイアウト名:fragment_newitem
  • ViewModel Name:NewItemViewModel
  • ソース言語:Kotlin (変更不要)

2. ナビゲーション グラフを修正する

新しいFragment
新しいFragment

新しいフラグメントが追加されましたが、idやラベルが他のフラグメントとあっていませんので、修正します

id修正
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」のコードを確認すると、以下のようになっています

追加したフラグメントが4つ目に入っていますね!

■新しい画面

広告

・リソースファイル

プロジェクトツリーの「app/res/layout/fragment_newitem.xml」が作成された新しい画面になります

・デザイン画面

fragment_newitem
fragment_newitem

ナビゲーションボタンを追加した時と同様にデザイン画面のレイアウトを変えて、作業を進めていきましょう

デザイン画面で行うことは大きくは以下の2つです

  • FrameLayoutを変換する
  • TextViewを修正する

・手順

1. FrameLayoutを変換する

FrameLayout変換
FrameLayout変換

追加された新しい画面は、FrameLayoutになっており、他のフラグメントとは異なるため、ConstraintLayoutに変換します

ConstraintLayoutに変換
ConstraintLayoutに変換

英語はわかりませんが、大したコードもないので、何も気にせず「OK」を押す!w

2. idを削除する

変換後
変換後

変換するとConstraintLayoutのidが「frameLayout」となっているので、削除します

他の画面でもやっているように、画面に遷移したことがわかるように、画面中央にメッセージを表示させます

3. TextViewのidを変更する

id変更
id変更

idはプロジェクト内におけるオブジェクト固有の名前です

他のナビゲーションボタンと同様に「text_」を接頭語にして、ここでは「text_newitem」と名付けます

4. textを変更する

text変更
text変更

ナビゲーションボタンのタイトルと同様に、TextViewのtextに「@string/title_newitem」と設定します

6. レイアウトを修正する

今回は他の画面のTextViewのレイアウトを参考にして同じところに配置します

他画面のTextView
他画面のTextView

「layout_width」は「match_parent」に設定します

レイアウト設定完了
レイアウト設定完了

・コード画面

「fragment_newitem.xml」のコードを確認すると、以下のようになっています

(他のフラグメントと比べると少し違いがあるので、そっと直してますw)

・画面を確認する

画面を確認する
画面を確認する

①お気づきでしょうか、画面上に「←」矢印が付いています

他の画面にはないので、これも消さないとダメですねー

タップしても動きやしないので・・w

②文字列がtextに設定した「@string/title_newitem」が出てるだけですね

これはクラスファイルで他の画面と同じように、別のメッセージをtextに設定しないといけませんね!

シェア
ページ番号: 1 2 3
広告

やもす ʕ•͡-•ʔ

のんびり!のほほん!がモットーです!w 蕎麦食いたい ライブ行きたい 暑いの嫌い