iOSエンジニアのつぶやき

毎朝8:30に iOS 関連の技術について1つぶやいています。まれに釣りについてつぶやく可能性があります。

知識ゼロからの Kotlin Android アプリリリースへの軌跡 / Day10【Create a fragment編】

学ぶこと

  • Fragment を静的にアプリに追加する方法

すること

  • Activity 内に Fragment を作成します

アプリの概要

このレッスンを構成する3つのコードラボでは、AndroidTrivia というアプリで作業します。完成したアプリは、ユーザが Android コーディングに関する3つの雑学に答えるゲームです。ユーザが3つ全ての質問に正しく答えると、ゲームに勝ち、結果を共有できます。

AndroidTrivia アプリは、Navigation パターンとコントロールを示しています。アプリにはいくつかのコンポーネントがあります。

  • 上のスクリーンショットの左側に示されているタイトル画面で、ユーザはゲームを開始します。
  • 上の中央に示す質問のあるゲーム画面で、ユーザはゲームをプレイして回答を送信します。
  • 右上に示されている Navigation drawer は、アプリの側面からスライドして出て、ヘッダー付きのメニューが含まれてます。Drawer アイコンは、Navigation drawer を開きます。Navigation drawer には、ページへのリンクとゲームのルールへのリンクが含まれています。

アプリの上部には、アプリバーと呼ばれるアクションバーとも呼ばれる色付きの View が表示されます。

Starter app project を探索する

このコードラボでは、Trivia App を完了する時に必要なテンプレートコードと Fragment クラスを提供するスターターアプリから作業します。

  1. AndroidTrivia-Starter をダウンロードします。

  2. Android Studio でプロジェクトを開き、アプリを実行します。アプリが開くと、アプリ名と空白の画面が表示されるだけです。

  1. app > java フォルダーを開き、MainActivity クラスと Fragment クラスを確認します。

  1. res > layout フォルダーを開き、activity_main.xml をダブルクリックします。activity_main.xml ファイルがレイアウトエディターに表示されます。

  2. Desgin タブに切り替えます。activity_main.xml ファイルの Component Tree には、ルートレイアウトが垂直の LinearLayout として表示されます。

vertical linear layout では、レイアウト内の全ての子 View が垂直に配置されます。

Fragment を追加する

Fragment は、activity の動作またはユーザーインターフェース(UI)の一部を表します。単一の Activity で複数のフラグメントを組み合わせてマルチペイン UI を構築したり、Fragment を複数の Activity で再利用したりできます。

Fragment を、他の Activity でも使用できる "sub-activity" のような Activity のモジュールセクションと考えてください。

  • Fragment には独自のライフサイクルがあり、独自の入力イベントを受け取ります。
  • Activity の実行中に Fragment を追加または削除できます。
  • Fragment は Kotlin クラスで定義されます。
  • Fragment のUIは、XML レイアウトファイルで定義されます。

AndroidTrivia アプリには、Main Activity といくつかの Fragment があります。ほとんどの Fragment とそのレイアウトファイルは定義されています。このタスクでは、Fragment を作成し、その Fragment をアプリの Main Activity に追加します。

Fragment クラスを追加する

空の TitleFragment クラスを作成します。新しい Fragment の Kotlin クラスを作成することから始めます。

  1. Android Studio で、プロジェクトペイン内の任意の場所をクリックして、フォーカスをプロジェクトファイルに戻します。com.example.android.navigation フォルダーをクリックします。

  2. File > New > Fragment > Fragment(Blank) を選択します。

  3. Fragment 名として、TitleFragment と入力します。

  4. Fragment Layout 名として、placeholder_layout を入力します。(このレイアウトは、TitleFragment用に設計されたレイアウトがすでにあるため、アプリでは使用しません)

  5. ソース言語として、Kotlin を選択します。

  6. Finish をクリックします。

  7. TitleFragment.kt ファイルをまだ開いていない場合は開きます。これには、Fragment lifecycle 中に呼び出されるメソッドの1つである。onCreateView()) メソッドが含まれています。

  8. onCreateView() 内のコードを削除します。onCreateView() 関数には、次のコードのみが残されています。

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                         savedInstanceState: Bundle?): View? {
}
  1. TitleFragment クラスで、onCreate() メソッド、fragment 初期化パラメーター、および companion オブジェクトを削除します。TitleFragment クラスが次のようになっていることを確認します。
class TitleFragment : Fragment() {

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        
    }
}

binding object を作成する

Fragment を現在コンパイルされません。Fragment をコンパイルするには、binding object を作成し、Fragment's view を inflate する必要があります。(これは、Activity に setContentView() を使用するのと同じです。)

  1. TitleFragment.ktonCreateView()メソッドで、binding 変数(val binding)を作成します。

  2. Fragment's view を inflate するためには、Fragment の Binding オブジェクト(FragmentTitleBinding) で、DataBindingUtil.inflate() メソッドを呼び出します。

メソッドに4つのパラメータを渡します:

  • binging layout を inflate するために使用される LayoutInflater である、inflater
  • inflate するレイアウトの XML レイアウトリソース。すでに定義されているレイアウトの1つである R.layout.fragment_title を使用します。
  • ViewGroupcontainer。(このパラメーターはオプションです。)
  • attachToParent 値の場合は false

  • DataBindingUtil.inflate が返す binding を binding 変数に割り当てます。

  • inflate view を含むメソッドから binding.root を返します。onCreateView() メソッドは次のコードのようになります。

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                         savedInstanceState: Bundle?): View? {
   val binding = DataBindingUtil.inflate<FragmentTitleBinding>(inflater,
           R.layout.fragment_title,container,false)
   return binding.root
   }
  1. res > layout を開き、placeholder_layout.xml を削除します。

新しい Fragment を main layout file に追加する

このステップでは、TitleFragment をアプリの activity_main.xml レイアウトファイルに追加します。

  1. res > layout > activity_main.xml を開き、Code タブを選択して、レイアウト XML コードを表示します。

  2. 既存の LinearLayout 要素内に、fragment 要素を追加します。

  3. フラグメントの ID を titleFragment に設定します。

  4. fragment's name を Fragment クラスのフルパスに設定します。この場合、com.example.android.navigation.TitleFragment です。

  5. layout の幅と高さを match_parent に設定します。

<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <fragment
                android:id="@+id/titleFragment"
                android:name="com.example.android.navigation.TitleFragment"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                />
        </LinearLayout>

</layout>
  1. アプリを実行します。Fragment がメイン画面に追加されました。

まとめ

このコードラボでは、AndroidTrivia アプリに Fragment を追加しました。これは、このレッスンの次の2つのコードラボで引き続き作業していきます。

  • Fragment は、Activity のモジュールセクションです。
  • Fragment には独自のライフサイクルがあり、独自の入力イベントを受け取ります。
  • <fragment> タグを使用して、XML レイアウトファイルでフラグメントのレイアウトを定義します。
  • onCreateView() で Fragment のレイアウトを Inflate します。
  • activity の実行中に Fragment を追加または削除できます。

その他の記事

yamato8010.hatenablog.com

yamato8010.hatenablog.com

yamato8010.hatenablog.com