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

学ぶこと

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

すること

Activity 内に Fragment を作成します

アプリの概要

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

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

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

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

Starter app project を探索する

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

AndroidTrivia-Starter をダウンロードします。
Android Studio でプロジェクトを開き、アプリを実行します。アプリが開くと、アプリ名と空白の画面が表示されるだけです。

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

res > layout フォルダーを開き、activity_main.xml をダブルクリックします。activity_main.xml ファイルがレイアウトエディターに表示されます。
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 クラスを作成することから始めます。

Android Studio で、プロジェクトペイン内の任意の場所をクリックして、フォーカスをプロジェクトファイルに戻します。com.example.android.navigation フォルダーをクリックします。
File > New > Fragment > Fragment(Blank) を選択します。
Fragment 名として、TitleFragment と入力します。
Fragment Layout 名として、placeholder_layout を入力します。(このレイアウトは、TitleFragment用に設計されたレイアウトがすでにあるため、アプリでは使用しません)
ソース言語として、Kotlin を選択します。
Finish をクリックします。
TitleFragment.kt ファイルをまだ開いていない場合は開きます。これには、Fragment lifecycle 中に呼び出されるメソッドの１つである。onCreateView()) メソッドが含まれています。
onCreateView() 内のコードを削除します。onCreateView() 関数には、次のコードのみが残されています。

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

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() を使用するのと同じです。)

TitleFragment.kt の onCreateView()メソッドで、binding 変数(val binding)を作成します。
Fragment's view を inflate するためには、Fragment の Binding オブジェクト(FragmentTitleBinding) で、DataBindingUtil.inflate() メソッドを呼び出します。

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

binging layout を inflate するために使用される LayoutInflater である、inflater。
inflate するレイアウトの XML レイアウトリソース。すでに定義されているレイアウトの１つである R.layout.fragment_title を使用します。
親 ViewGroup の container。(このパラメーターはオプションです。)
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
   }

res > layout を開き、placeholder_layout.xml を削除します。

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

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

res > layout > activity_main.xml を開き、Code タブを選択して、レイアウト XML コードを表示します。
既存の LinearLayout 要素内に、fragment 要素を追加します。
フラグメントの ID を titleFragment に設定します。
fragment's name を Fragment クラスのフルパスに設定します。この場合、com.example.android.navigation.TitleFragment です。
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>