このページは Cloud Translation API によって翻訳されました。

Android Kotlin の基礎 03.1: フラグメントを作成する

この Codelab は、Android Kotlin の基礎コースの一部です。Codelab を順番に進めていくと、このコースを最大限に活用できます。すべてのコース Codelab は Android Kotlin の基礎 Codelab ランディングページに掲載されています。

この Codelab では、フラグメントについて学び、AndroidTrivia というスターターアプリ内でフラグメントを作成します。次の Codelab では、ナビゲーションについて詳しく学習し、AndroidTrivia アプリをさらに活用します。

前提となる知識

Kotlin の基礎
Kotlin で基本的な Android アプリを作成する方法
レイアウトの操作方法

学習内容

フラグメントをアプリに静的に追加する方法

演習内容

アクティビティ内にフラグメントを作成します。

このレッスンを構成する 3 つの Codelab では、AndroidTrivia というアプリを使用します。完成したアプリは、Android コーディングに関する 3 つの雑学クイズに答えるゲームです。3 つの質問に正しく答えたユーザーは、ゲームに勝ち、その結果を共有できます。

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

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

アプリの上部には、アプリバーとも呼ばれる色付きのビューが表示されます。

この Codelab では、トリビアアプリを完成させるために必要なテンプレートコードとフラグメントクラスを提供するスターターアプリから作業します。

AndroidTrivia-Starter Android Studio プロジェクトをダウンロードします。
Android Studio でプロジェクトを開き、アプリを実行します。アプリを開くと、アプリ名と空白の画面が表示される以外に何もは行われません。
Android Studio の [Project] ペインで、[Project: Android] ビューを開き、プロジェクトファイルを調べます。app > java フォルダを開き、MainActivity クラスとフラグメントクラスを表示します。
res > layout フォルダを開き、activity_main.xml をダブルクリックします。Layout Editor に activity_main.xml ファイルが表示されます。
[Design] タブをクリックします。activity_main.xml ファイルのコンポーネントツリーには、ルートレイアウトが縦方向 LinearLayout として表示されます。

垂直方向の線形レイアウトでは、レイアウト内のすべての子ビューが垂直方向に揃えられます。

フラグメントはアクティビティ内のユーザーインターフェース（UI）の動作や部分を表しています。1 つのアクティビティで複数のフラグメントを組み合わせて、複数のペインがある UI を構築したり、複数のアクティビティでフラグメントを再利用したりできます。

フラグメントは、アクティビティのモジュール型セクションと考えることができます。これは「サブアクティビティ」のようなもので、他のアクティビティでも使用できます。

フラグメントは独自のライフサイクルを持ち、独自の入力イベントを受信する。
アクティビティの実行中でも追加や削除を行えます。
フラグメントは Kotlin クラスで定義する。
フラグメントの UI は XML レイアウトファイルで定義する。

AndroidTrivia アプリには、メインアクティビティと、いくつかのフラグメントがあります。ほとんどのフラグメントとレイアウトファイルはあらかじめ定義されています。このタスクでは、フラグメントを作成し、アプリのメインアクティビティに追加します。

ステップ 1: フラグメントクラスを追加する

このステップでは、空の TitleFragment クラスを作成します。まず、新しいフラグメント用の Kotlin クラスを作成します。

Android Studio で [Project] ペインの任意の場所をクリックすると、フォーカスがプロジェクトファイルに戻ります。たとえば、com.example.android.navigation フォルダをクリックします。
[File > New > Fragment > Fragment (Blank)] を選択します。
フラグメント名には、TitleFragment を使用します。[Layout XML を作成]、[フラグメントファクトリメソッドを含める]、[インターフェースコールバックを含める] などのチェックボックスをすべてオフにします。
[Finish] をクリックします。
TitleFragment.kt フラグメントファイルを開きます（まだ開いていない場合）。これには、フラグメントのライフサイクル中に呼び出されるメソッドの 1 つである onCreateView() メソッドが含まれています。
onCreateView() で、return TextView(activity).apply セクション（setText で始まる行を含む）を削除します。onCreateView() 関数は次のコードだけを残します。

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

バインディングオブジェクトを作成する

フラグメントは現在コンパイルされません。フラグメントをコンパイルするには、バインディングオブジェクトを作成し、フラグメントのビューをインフレートする必要があります（これは、アクティビティで setContentView() を使用する場合と同様です）。

TitleFragment.kt の onCreateView() メソッドで、binding 変数（val binding）を作成します。
フラグメントのビューをインフレートするには、フラグメントの Binding オブジェクト（FragmentTitleBinding）に対して DataBindingUtil.inflate() メソッドを呼び出します。

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

inflater: バインディングレイアウトをインフレートするために使用される LayoutInflater。
インフレートするレイアウトの XML レイアウトリソース。定義済みのレイアウトの 1 つである R.layout.fragment_title を使用します。
親 ViewGroup の container（このパラメータは省略可能です）。
false（attachToParent の値）。

DataBindingUtil.inflate が返すバインディングを binding 変数に割り当てます。
インフレートされたビューを含むメソッドから 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
   }

ステップ 2: メインレイアウトファイルに新しいフラグメントを追加する

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

res > layout > activity_main.xml を開き、[Text] タブをクリックしてレイアウトの XML コードを表示します。
既存の LinearLayout 要素内に fragment 要素を追加します。
フラグメントの ID を titleFragment に設定します。
フラグメントの名前をフラグメントクラスのフルパス（この場合は com.example.android.navigation.TitleFragment）に設定します。
レイアウトの幅と高さを 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>

アプリを実行します。フラグメントがメイン画面に追加されました。

Android Studio プロジェクト: AndroidTriviaFragment

この Codelab では、AndroidTrivia アプリにフラグメントを追加しました。これは、このレッスンの次の 2 つの Codelab で引き続き学習します。

フラグメントは、アクティビティのモジュールセクションです。
フラグメントは独自のライフサイクルを持ち、独自の入力イベントを受信する。
XML レイアウトファイルでフラグメントのレイアウトを定義するには、<fragment> タグを使用します。
onCreateView() 内のフラグメントのレイアウトをインフレートします。
アクティビティの実行中でも追加や削除を行えます。

Udacity コース:

Kotlin による Android アプリの開発

Android デベロッパードキュメント:

このセクションでは、インストラクターが主導するコースの一環として、この Codelab に取り組む生徒の課題について説明します。教師は以下のことを行えます。

必要に応じて課題を割り当てます。
宿題の提出方法を生徒に伝える。
宿題を採点します。

教師はこれらの提案を少しだけ使うことができます。また、他の課題は自由に割り当ててください。

この Codelab にご自分で取り組む場合は、これらの課題を使用して知識をテストしてください。

次の質問に答えてください

問題 1

フラグメントとアクティビティの違いは何ですか？正しい説明をすべて選択してください。

フラグメントを作成する際、onCreateView() メソッドでレイアウトをインフレートします。アクティビティを作成する際には、onCreate() でレイアウトをインフレートします。
アクティビティには独自のレイアウトがありますが、フラグメントには独自のレイアウトを設定できません。
アクティビティには独自のライフサイクルがありますが、フラグメントにはライフサイクルがありません。
フラグメントまたはアクティビティのレイアウトをインフレートする場合、R.layout.layoutname としてレイアウトを参照できます。

問題 2

フラグメントの説明として正しいものは次のうちどれですか。該当するものをすべて選択してください。

複数のアクティビティで 1 つのアクティビティを使用できる。
1 つのアクティビティに複数のフラグメントを設定できます。
Kotlin クラスでフラグメントを定義すると、そのフラグメントは自動的に activity_main.xml レイアウトファイルに追加されます。
<fragment> タグを使用して、レイアウトファイル内でフラグメントを挿入する場所を定義します。

次のレッスンを開始する: 3.2 ナビゲーションパスを定義する

このコースの他の Codelab へのリンクについては、Android Kotlin の基礎 Codelab ランディングページをご覧ください。

Android Kotlin の基礎 03.1: フラグメントを作成する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。