ゼロから始めるAndroidアプリ（Kotlin編）Unit3 – 2：フラグメント1 （予備知識）

Android Developers ＞ スタートガイド ＞ Kotlin と Android をゼロから学ぶ ＞ Unit3 – ナビゲーション ＞Unit3-2 の内容をまとめたものです（翻訳ではありません）

---

チュートリアルに入るまえの予備知識

よく出てくるキーワード

• アクティビティ（activity）・・・UI画面のベースになるもの
• インテント（intent）・・・アクティビティを起動したりするのに使う
• フラグメント（fragment）・・・アクティビティのようにふるまうView（UI部品）。ツール（Android Studio）を使ってUI作成をするときにアクティビティの代わりに使うのに向いている
• ライフサイクル（lifecycle）・・・アクティビティと同じく、フラグメントにもライフサイクルがある
• ナビゲーションコンポーネント（Navigation Component）・・・Android のUI画面のナビゲーション（移動などの操作）を作成するためのツールパック
  • ナビグラフ（NavGraph）・・・ナビゲーショングラフ（Navigation Graph）。UI画面のナビゲーションをXMLで表したもの。Android Studio 上でGUIで作成できる
  • ナビホスト（NavHost）・・・アクティビティ上に用意するフラグメントを表示する場所のこと
  • ナビコントローラ（NavController）・・・ナビホストにフラグメントを表示するためのもの。1つのアクティビティ上に用意されたナビホスト（NavHost）に、ナビコントローラによっていろいろなフラグメントが差し替えられて表示される仕組み
  • デスティネーション（destination）・・・ナビグラフ（NavGraph）で扱うときのフラグメントやアクティビティの呼び方
  • ナビゲーションアクション（Navigation Action）・・・デスティネーション間の移動をあらわすもの
  • ディレクション（Directions）・・・あるデスティネーションに属するナビゲーションアクションをまとめたもの
• データのやりとり
  • バンドル（bundle）・・・アクティビティ間で情報をやりとりするためのコレクション（データの入れ物）
  • エクストラ（extra）・・・インテントに用意されているバンドル
  • arguments・・・フラグメントで利用できるエクストラのようなもの

UI画面の構造

アクティビティとインテントで作成する場合

• UI画面ごとにアクティビティを作成して、インテントを使ってアクティビティを呼び出します
• ナビゲーション（画面の移動など）の管理は自分で工夫しておこないます

MainActivity
     Activity1
         Activity1-1
         Activity1-2
     Activity2

フラグメントとナビゲーションアクションで作成する場合

• UI画面ごとにフラグメントを作成して、ナビゲーションアクションを使ってフラグメントを呼び出します
• ひとつのアクティビティにナビホスト（フラグメントを表示する場所）を設定します。ルートになるフラグメント（ホームフラグメント）を作成し、その下に他のフラグメントを自由に配置します
• ナビゲーション（画面の移動など）の管理はナビグラフ（NavGraph）でおこないます。デザインエディタを使用して作成し XML で保管されます

MainActivity（ナビホスト）
     Fragment（ホームフラグメント）
         Fragment1
             Fragment1-1
             Fragment1-2
         Fragment2

フラグメントを使ったアプリ制作の流れ

• フラグメントはGUIな開発ツールを使ったアプリ制作に向いています
• フラグメントを使ったUI画面は次のような手順で作成します

作業の流れ

1. Android Studio で新規にプロジェクトを作成
   • ナビゲーションコンポーネントが使えるように Gradle の設定をします
   • Safe Args プラグインが使えるように Gradle の設定をします
2. 作りたい画面の数だけフラグメントを生成・・・Android Studio のメニューからひな型を生成します
3. フラグメントのレイアウトを作成・・・アクティビティと同じようにデザインエディタやXML編集で作成します
4. フラグメントのクラスにおきまりの処理を記述・・・レイアウトの生成（inflate）などの記述をします
5. ナビゲーションコンポーネント（Navigation Component）を使ってアプリのUI画面の動き（画面遷移）を記述します
6. アクティビティのレイアウト（activity_main.xml）にナビゲーションコンポーネントを利用するする設定をします
7. ナビゲーションコンポーネントを利用してアプリが動作するようにフラグメントやアクティビティのクラスを記述します

フラグメントを使うときにアクティビティ・レイアウトに記述する内容

activity_main.xml

xmlns:app を設定
子View として FragmentContainerView を設定
    NavHostFragment を設定
    navHost を設定
    navGraph を設定

フラグメントを使うときにクラスに記述する内容

MainActivity クラス

onCreate()
    レイアウトの生成
    ナビコントローラを使ったアプリバーの設定
onSupportNavigateUp()
    ナビコントローラを使った UP(戻る) ボタンのサポート

フラグメント（ホーム）クラス

onCreate()
    オプションメニューの設定
onCreateView()
    レイアウトの生成
onViewCreated()
    UI部品（View）への設定（RecyclerViewの設定など）
onDestroyView()
    レイアウトへの参照をリセット
onCreateOptionsMenu()
    オプションメニューの生成と設定
onOptionsItemSelected()
    オプションメニューが選択されたときの処理

フラグメント（その他）クラス

onCreate()
    呼び出し元フラグメントからのパラメータの読み込み
onCreateView()
    レイアウトの生成
onViewCreated()
    UI部品（View）への設定（RecyclerViewの設定など）
onDestroyView()
    レイアウトへの参照をリセット

RecyclerView を使うときにクラスに記述する内容

このチュートリアルでは RecyclerView を使うので、簡単に復習しておきます

アクティビティで RecyclerView を使うとき

onCreate()
    RecyclerViewer のレイアウトの設定
    RecyclerViewer のアダプタの設定

フラグメントで RecyclerView を使うとき

onViewCreated()
    RecyclerViewer のレイアウトの設定
    RecyclerViewer のアダプタの設定

アダプタのクラス

ViewHolderクラス
    View部品への参照を設定
getItemCount()
    データ数の設定
onCreateViewHolder()
    ViewHolderのレイアウトの生成
onBindViewHolder()
    ViewHolder内の部品への操作の処理（click listenerなどで設定）
        インテントを使ってアクティビティを起動
        ナビゲーションアクションを使ってフラグメントを起動

その他の予備知識

値の参照

• インテントを使う
  • インテントのエクストラを参照します
  • 設定・・・インテント.putExtra() で値を設定
  • 取得・・・インテント.extras?.getString() のようにして取得
• フラグメントの arguments を使う
  • フラグメントの arguments プロパティに設定した値を参照します
  • 設定・・・フラグメントを起動するときのナビゲーションアクションの引数で設定できます
  • 取得・・・フラグメントに arguments プロパティがあるので arguments.getString() のようにして取得
• フラグメントで親アクティビティのインテントを使う
  • 親アクティビティのインテントのエクストラを参照します
  • 設定・・・activity?.intent?.putExtra() のようにして値を設定
  • 取得・・・activity?.intent?.extras?.getString() のようにして取得

UI画面の起動のしかた

• インテントを使う起動
  • アクティビティをインテントを使って起動できます
• ナビゲーションアクションを使う起動
  • フラグメントの場合はナビゲーションアクションを使って起動します
  • 参照先を作成・・・val action = ディレクション名.ナビゲーションアクション関数名(引数)
  • 起動・・・オブジェクト.findNavController().navigate(action)

ファイルの名前

	命名規則	例
フラグメントのクラス名	PascalCase+Fragment	SampleNameFragment
フラグメントのファイル名	PascalCase+Fragment	SampleNameFragment.kt
フラグメントのレイアウトファイル名	fragment_snake_case	fragment_sample_name.xml
デスティネーション名	クラス名を camelCase で書く	sampleNameFragment
ナビゲーションアクション名	action_camelCase1 _to_camelCase2	action_デスティネーション名1_to_デスティネーション名2
ディレクション名	PascalCase+Directions	SampleNameFragmentDirections
ナビゲーションアクション関数名	PascalCase.action PascalCase1To PascalCase2	ディレクション名.actionフラグメント名1Toフラグメント名2

このチュートリアルのあらすじ

1. スターターコード（このチュートリアルを進めるための半完成状態のプロジェクト）を準備します
2. フラグメントのライフサイクルの概要を説明します
3. フラグメントのひな型を生成（クラスファイルとレイアウトファイル）
   • LetterListFragment.kt（fragment_letter_list.xml）
   • WordListFragment.kt（fragment_word_list.xml）
4. レイアウトをフラグメントに移動します
   • ホームフラグメントのレイアウト（fragment_letter_list.xml）に activity_main.xml の内容を移動
   • その他フラグメントのレイアウト（fragment_word_list.xml）に activity_detail.xml の内容を移動
5. 処理をフラグメントに移動します
   • ホームフラグメント（LetterListFragment.kt）に MainActivity.kt の処理のほとんどを移動
   • その他のフラグメント（WordListFragment.kt）に DetailActivity.kt の処理のほとんどを移動
6. ナビゲーションコンポーネントでアプリ画面の遷移を作成します
   • ナビゲーションコンポーネントの設定
   • Safe Args プラグインの設定
   • activity_main.xml にナビホスト,ナビグラフなどの設定
     • FragmentContainerView , NavHostFragment , navHost , navGraph などの設定
   • ナビゲーショングラフを作成
   • フラグメントを起動するクラス（RecyclerViewのアダプタなど）にナビゲーションアクションを設定
   • MainActivity.kt にナビコントローラを使ったアプリバーの設定など
7. フラグメント間でのデータのやりとりの設定をします
8. フラグメントのラベルなどの設定します

---