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

ページ番号： 1 2 3

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

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

■下部ナビゲーション

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

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

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

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

→

・テンプレートを選択

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

・プロジェクトの構成

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

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

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

Studio ZeSys

Android Studio 4.0.1 の動作確認をする

https://zesys.net/pc/android/android-studio-check-operation

インストールも終わって、日本語化も終わった！さー！次は、開発環境として、正しく動作することを確認しましょー長くなったのでページを割っていますインストール方法は、以下の記事を確認してくださいAndroid Studio 4.0.1のインストール■新規プロジェクトの作成・起動メニューAndroid Studioを起動すると、以下の起動メニューが表示されます起動メニュー※一度プロジェクトを作成すると、前回開いたプロジェクトを自動で開いてくれる設定があるようです・新規プロジェクト「新規 Android Studio プロジェクトの開始」をダブルクリッ...

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

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

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

・標準動作を確認

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

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

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

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

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

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

・リソースファイル

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

・デザイン画面

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

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

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

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

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

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

コンポーネント・ツリー
パレット
属性

・手順

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

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

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

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

3. idを付ける

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

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

4. タイトルを変更する

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

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

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

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

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

<resources>
    <string name="app_name">Bottom Navigation Test</string>
    <string name="title_home">Home</string>
    <string name="title_dashboard">Dashboard</string>
    <string name="title_notifications">Notifications</string>
</resources>

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

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

キー：title_newitem
デフォルト値：NewItem
リソース・フォルダ：app/src/main/res （変更不要）

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

<resources>
    <string name="app_name">Bottom Navigation Test</string>
    <string name="title_home">Home</string>
    <string name="title_dashboard">Dashboard</string>
    <string name="title_notifications">Notifications</string>
    <string name="title_newitem">NewItem</string>
</resources>

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

6. アイコンを設定する

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

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

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

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

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

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

ファイル名：ic_newitem_black_24dp.xml
ルート要素：vector
ソース・セット：main （変更不要）
ディレクトリー名：drawable （変更不要）

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

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

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

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

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形式のリソースファイルが出来上がります

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">

    <path
        android:fillColor="#FF000000"
        android:pathData="M20,4H4C2.89,4,2.01,4.89,2.01,6L2,18c0,1.11,0.89,2,2,2h16c1.11,0,2-0.89,2-2V6C22,4.89,21.11,4,20,4z M8.5,15H7.3 l-2.55-3.5V15H3.5V9h1.25l2.5,3.5V9H8.5V15z M13.5,10.26H11v1.12h2.5v1.26H11v1.11h2.5V15h-4V9h4V10.26z M20.5,14 c0,0.55-0.45,1-1,1h-4c-0.55,0-1-0.45-1-1V9h1.25v4.51h1.13V9.99h1.25v3.51h1.12V9h1.25V14z" />
</vector>

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

・コード画面

「bottom_nav_menu.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>

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

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

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

・画面を確認する

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

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

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