【AndroidUIデザイン】下部ナビゲーションアクティビティにフラグメントを追加し、下部ナビゲーションアイコンを変更する

I.はじめに

• 説明: 実際の開発では、Fragment がよく使われるレイアウトです。Android Studio には、ワンクリックでフラグメント レイアウト、下部ナビゲーション アクティビティを生成する方法があります。これに基づいてフラグメントを追加し、下部ナビゲーション アイコンを変更するにはどうすればよいでしょうか?
• 難易度: 初級
• 効果
  

2. デザイン

1. フラグメントの追加

(1) 要件の確認

元のベースに、info という名前の個人情報インターフェイス フラグメントを追加する必要があるとします。

(2)作成

     <1> 方法 1: ツールを使用して迅速に生成する

図のようにフラグメント(ViewModelあり)を作成します もちろん、動的に変更する必要のあるデータがなく、シンプルなインターフェースであれば、Modal Bottom Sheetを選択することもできます。

     <2> 方法2：ビュー(レイヤー)ツール

ギャラリーを選択

ギャラリーに入り、ニーズに応じて選択してください

     <3> 方法3：マニュアル作成

まずアクティビティを作成します

次の変更を加えます

(3)追加

     <1> フラグメント属性の追加（ネーミング、アイコン）

初心者に配慮してアイコンの修正は次章で

	<string name="title_info">Info</string>

     <2> メニュー(bottom_nav_menu.xml)ファイルにサブ項目を追加します。

	<item
        android:id="@+id/navigation_info"
        android:icon="@drawable/ic_notifications_black_24dp"
        android:title="@string/title_info"/>

     <3> フラグメントインターフェースの追加

    <fragment
        android:id="@+id/navigation_info"
        android:name="com.hngy.xpq.fragmentdemo.ui.info.InfoFragment"
        android:label="@string/title_info"
        tools:layout="@layout/fragment_info" />

(4) 効果

• 追加前（3フラグメントレイアウト）

• 追加後（4フラグメントレイアウト）

2. 基礎となるアイコンを変更します

(1) アイコンリソース

     <1> 方法 1: PS による設計

     <2> 方法 2: Alibaba ベクター アイコン ライブラリ

Alibaba ベクター アイコン ライブラリ URL: https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.6&type=2

(2) リソースのダウンロード

     <1> データベースに追加

     <2> ショッピングカートを開く

     <3> ダウンロード

     <4> SVGを選択

(3) 用途

     <1> svgファイルを開く

     <2> F12 要素の検索

     <3> Android Studioでリソースファイルを作成する

     <4> ファイル内容を変更する

F12で取得した要素内容より、(width, height) = 200px、(viewportWidth, viewportHeight) = 1024であることが分かり、要素に応じてパスが変更されます。

     <5> レイアウトファイルの変更

     <6> 効果

• 改造前

• 修正後