カテゴリー
Kotlin言語

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

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


Unit3 – 2(フラグメント)の内容

第1回目の動画は、Android Jetpack にあるナビゲーションコンポーネント(Navigation Architecture Component)の紹介です。飛ばしてもだいじょうぶです

このチュートリアルの進め方

  • このチュートリアルでは、「アクティビティとインテントのチュートリアル(Unit3 – 1 の第3回~第4回)」で作成した単語アプリをフラグメントを使うように書き換えます
  • Unit3 – 1 では、画面はアクティビティで用意して、その間をインテントを使って移動しました
  • 今回はフラグメントを使って、その間をナビゲーションコンポーネントを利用して移動するようにします

フラグメントとは

  • 多くのAndroidアプリは画面ごとにアクティビティを用意しません
  • ひとつのアクティビティの中にフラグメントとよばれるものを入れ替えて表示することで複雑な画面操作を実現します
  • ひとつの画面に複数のフラグメントを表示することも可能です
  • 新たにアクティビティを起ち上げることなく、フラグメントの入れ替えだけで行うことができます

このチュートリアルで学ぶこと

  • フラグメントライフサイクルとアクティビティライフサイクルの違いを学びます
  • 複数のアクティビティを使ったUnit3 -1 の単語アプリを、単一アクティビティ+複数フラグメントを使ったものに書き換えます
  • フラグメント間の移動は Jetpack の ナビゲーションコンポーネント(Navigation Component)で行います。ナビグラフ(NavGraph)を使ってフラグメント間のナビゲーションを記述してみます
  • Safe Args プラグインを使って、フラグメント間でデータのやり取りをしてみます

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

このチュートリアルは長くてちょっと分かりにくいので、先にあらすじを説明しちゃいますね

よく出てくるキーワード

これから出てくるキーワードですね

  • アクティビティ(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の開発ツールを上手に使ってくださいね

  • フラグメントは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 はすっきり

MainActivity クラス

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

フラグメントは onCreate, onCreateView, onViewCreated の3つでお仕事するの

フラグメント(ホーム)クラス

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

フラグメント(その他)クラス

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

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

このチュートリアルでは 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+FragmentSampleNameFragment
フラグメントのファイル名PascalCase+FragmentSampleNameFragment.kt
フラグメントのレイアウトファイル名fragment_snake_casefragment_sample_name.xml
デスティネーション名クラス名を camelCase で書くsampleNameFragment
ナビゲーションアクション名action_camelCase1
_to_camelCase2
action_デスティネーション名1_to_デスティネーション名2
ディレクション名PascalCase+DirectionsSampleNameFragmentDirections
ナビゲーションアクション関数名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. フラグメントのラベルなどの設定します