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

ページ番号: 1 2 3

Androidアプリの作成に向けて、よく使いそうなアクティビティをサンプルにして、勉強をしていきたいと思います!

記事が長くなったので、3ページに分けています!

■下部ナビゲーション

Android Studio 4.x.xには、開発者のためにいくつかのテンプレートが予め用意されています

広告

その中の「下部ナビゲーション・アクティビティ」を使用して、以下の内容を勉強していきます!

  • 新しいナビゲーションボタンの追加方法
  • 新しい画面(フラグメント:Fragment)の追加方法

左の下部ナビゲーションのデフォルト画面から、右のような画面に修正しようと思います!

下部ナビゲーション
下部ナビゲーション

画面を確認する
修正後のイメージ

・テンプレートを選択

下部ナビゲーションのお勉強ですから、当然、「下部ナビゲーション・アクティビティ」を選択して、「次へ」行きましょう!

テンプレート選択
テンプレート選択

・プロジェクトの構成

プロジェクトの構成画面は、以下の構成です

  • 名前…わかりやすい名前にしましょう
  • 固有のパッケージ名…お試しならデフォルトで大丈夫
  • 保存先…これもデフォルトでよいです
  • 開発言語…お好みで(当サイトはKotlin)
  • SDKバージョン…API 16がオススメ
プロジェクトの構成
プロジェクトの構成

「プロジェクトの構成」画面の詳しい説明は、以下の記事で記載していますので、そちらをご確認ください

・プロジェクトのメイン画面

画面イメージが表示されています

プロジェクトメイン画面
プロジェクトメイン画面

まずは、テンプレートを使ってプロジェクトを作成した場合の標準的な動作をシミュレータを使って確認してみます

・標準動作を確認

以下の動画で、Android Studioのテンプレート「下部ナビゲーション・アクティビティ」の標準動作が確認できます

  1. 下部のナビゲーションボタンをタップする
  2. フラグメントが切り替わる
  3. 画面中央のメッセージが変化する
  4. 戻るボタンでHomeに戻る

これで下部ナビゲーションの動作は分かったと思います

では、これをベースにして、以下の項目を新規に追加する方法を記載します

  • ナビゲーションボタン
  • 画面

■新しいナビゲーションボタン

・リソースファイル

プロジェクトツリーにある「app/res/menu/bottom_nav_menu.xml」を開きます

・デザイン画面

標準動作で見た画面のイメージとは異なるイメージの画面が開きますが、これがナビゲーションボタンをデザインする画面です

デザイン画面
デザイン画面

デザイン画面を使ってナビゲーションボタンを追加していきます

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

  • メニューにアイテムを追加する
  • idを設定する
  • タイトルを設定する
  • アイコンを設定する

【デザイン画面のレイアウトを変更する】

デザイン画面を使いやすくするために、プロジェクトツリーを隠して、以下の3つの画面を表示します

  • コンポーネント・ツリー
  • パレット
  • 属性
デザイン変更
デザイン変更

・手順

広告

1. パレットから「Menu Item」を選択する

新しいナビゲーションボタンを追加するのですが、オブジェクト的には、ボタン(Button)ではなく、メニューアイテム(Menu Item)になります

2. コンポーネント・ツリーにドラッグ&ドロップで追加する

Menu Itemを追加
Menu Itemを追加

コンポーネント・ツリー内のメニューアイテムをドラッグ&ドロップすることで、ナビゲーションボタンの順番を変更することもできます

3. idを付ける

idを付ける
idを付ける

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

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

4. タイトルを変更する

タイトル変更
タイトル変更

タイトルには「@string/title_newitem」と設定します

これは、文字列定義ファイル(strings.xml)から「title_newitem」というidに設定された文字列を取得することを意味します

現在は、まだ定義されていないため、シンボルが見つからないという内容のエラーが発生した状態で、タイトル入力枠が赤色になっています

5. タイトルの文字列定義を作成する

文字列定義を作成
文字列定義を作成

プロジェクトツリーから「app/res/values/strings.xml」を開きます

直接コードを修正することもできますが、あえて・・右上にある「エディタを開く」でエディタでの編集をやってみます

エディタを開く
エディタを開く

エディタ内の左上の「+」をクリックして、Keyの追加を行います

Keyの追加
Keyの追加
  • キー:title_newitem
  • デフォルト値:NewItem
  • リソース・フォルダ:app/src/main/res (変更不要)
新しい文字列
新しい文字列

エディタを閉じて、「strings.xml」を見ると新しく「title_newitem」が追加されていることがわかります

タイトル追加完了
タイトル追加完了

「strings.xml」を閉じて、デザイン画面に戻ると、エラーがなくなっています

6. アイコンを設定する

アイコン設定
アイコン設定

iconには「@drawable/ic_newitem_black_24dp」と設定します

これは、画面上に描画するグラフィック(app/res/drawable)から「ic_newitem_black_24dp」というidに設定されたグラフィックを取得することを意味します

現在は、まだグラフィックが用意されていないため、エラーが発生した状態で、iconの入力枠が赤色になっています

7. drawableリソースを追加する

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

プロジェクトツリーから「app/res/drawable」を選択し、右クリックメニューの[新規] – [Drawable リソース・ファイル]を選択します

新しいリソースファイル
新しいリソースファイル

新しいリソースファイルを以下で設定します

  • ファイル名:ic_newitem_black_24dp.xml
  • ルート要素:vector
  • ソース・セット:main (変更不要)
  • ディレクトリー名:drawable (変更不要)
アイコンリソース
アイコンリソース

とは言え、アイコンの作り方はよくわかっていないので・・

8. アイコンを作ってもらうw

他所からアイコン画像を貰ってきて、それをリソースファイルに変換しようと思います!w

【アイコン画像を取得する】

GoogleさんのMaterial Designのサイトからsvg形式のファイルがダウンロードできますので、まずは、それを貰ってきましょう!

参考サイト:Google Material Design
【svg形式からDrawableに変換する】

取得したsvgファイルをVectorDrawable形式に変換してもらいましょう!

参考サイト:Android SVG to VectorDrawable
【既存のアイコンからVectorDrawableを作る】

各サイトの使い方は、参考にしたサイトに載っているので、ここでは詳しく説明しません

参考サイト:既存のアイコンからVectorDrawableを作る

9. アイコンを登録する

上記サイトを利用して、VectorDrawable形式に変換したファイルの内容を作成した「ic_newitem_black_24dp.xml」に貼り付けます

アイコン登録完了
アイコン登録完了

こんなXML形式のリソースファイルが出来上がります

これでエラーがとれて、ナビゲーションボタンの追加が完了しました

ナビゲーションボタン追加完了
ナビゲーションボタン追加完了

・コード画面

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

コードからもわかるように、操作した内容がそのままXMLファイルに作成されています

  • メニューにアイテムを追加する
  • idを設定する
  • タイトルを設定する
  • アイコンを設定する

ここまで作成すると実行してもエラーにならないので、シミュレータで確認してみましょう

・画面を確認する

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

下部ナビゲーションに新しいNEWボタンが増えていることがわかりますね!

ただし、これはボタンを置いただけですので、ボタンをタップしても何もおきません・・

さて、次は、新しい画面を追加して、実際に追加したNEWボタンをタップして、新しい画面が表示されるところまでやりましょ!

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

やもす ʕ•͡-•ʔ

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