このページは 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 アプリは、ナビゲーションパターンとコントロールを示しています。このアプリにはいくつかのコンポーネントがあります。

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

アプリの上部には、アプリバー（アクションバーとも呼ばれます）という色の付いたビューが表示されます。

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

AndroidTrivia-Starter Android Studio プロジェクトをダウンロードします。
Android Studio でプロジェクトを開き、アプリを実行します。アプリが開くと、アプリ名と空白の画面が表示されるだけで、何も行われません。
Android Studio の [Project] ペインで、[Project: Android] ビューを開いてプロジェクトファイルを確認します。app > java フォルダを開き、MainActivity クラスとフラグメントクラスを確認します。
[res] > [layout] フォルダを開き、activity_main.xml をダブルクリックします。activity_main.xml ファイルがレイアウトエディタに表示されます。
[デザイン] タブをクリックします。activity_main.xml ファイルの [Component Tree] には、ルートレイアウトが垂直の LinearLayout として表示されます。

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

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

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

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

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

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

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

Android Studio で、[Project] ペイン内の任意の場所をクリックして、プロジェクトファイルにフォーカスを戻します。たとえば、[com.example.android.navigation] フォルダをクリックします。
[File] > [New] > [Fragment] > [Fragment (Blank)] を選択します。
フラグメント名には、TitleFragment を使用します。[create Layout XML]、[include fragment factory methods]、[include interface callbacks] など、すべてのチェックボックスをオフにします。
[完了] をクリックします。
TitleFragment.kt フラグメントファイルを開きます（まだ開いていない場合）。これには、フラグメントのライフサイクル中に呼び出されるメソッドの 1 つである onCreateView() メソッドが含まれています。
onCreateView() で、setText で始まる行を含む return TextView(activity).apply セクションを削除します。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。（このパラメータは省略可能です）。
attachToParent 値の false。

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 で引き続き使用します。

フラグメントは、アクティビティのモジュール式セクションです。
フラグメントは独自のライフサイクルを持ち、独自の入力イベントを受信する。
<fragment> タグを使用して、XML レイアウトファイルでフラグメントのレイアウトを定義します。
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: フラグメントを作成する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。