プロジェクト: Dogglers アプリ

1. 始める前に

この Codelab では、Dogglers という新しいアプリを作成します。この Codelab では、Android Studio 内でのプロジェクトのセットアップやテストを含め、Dogglers アプリプロジェクトを完了するための手順を案内します。

この Codelab は、このコースの他の Codelab とは異なります。アプリの作成手順を説明する、これまでの Codelab のようなチュートリアルとは異なり、この Codelab ではユーザーが単独で進められるプロジェクトをセットアップし、完成したアプリを自分で確認する方法を紹介します。

そのため、解答コードではなく、ダウンロードするアプリの一部としてテストスイートを提供します。これらのテストを Android Studio で実行して（その方法については、後ほどこの Codelab で説明します）、コードが合格するかを確認します。1 回のテストで完了するとは限りません。プロのデベロッパーでも、すべてのテストを 1 回で合格することはほとんどないと言っていいでしょう。このプロジェクトは、作成したコードがすべてのテストに合格した時点で完了です。

これについては、解答を確認するだけでよいのではないかと考える方がいるかもしれません。解答コードを提供しないのは、プロフェッショナルなデベロッパーの作業を体験していただく意図からです。そのため次のような、まだ習熟していないスキルが求められる場合があります。

初めて目にする用語、エラーメッセージ、アプリ内のコードをオンライン検索
コードのテスト、エラーの読み取り、コードの変更と再テスト
Android の基本にあるコンテンツに戻り、学習した内容を復習
動作することがわかっているコード（プロジェクトで提供されたコード、またはユニット 2 で他のアプリについて使用した解答コード）と、作成したコードを比較

最初は大変に思えるかもしれませんが、ユニット 2 を完了できたなら、このプロジェクトにも十分に対応できると確信しています。じっくりと時間をかけ、あきらめずに取り組んでください。必ずできるはずです。

前提条件

このプロジェクトは、「Kotlin を用いた Android の基本」コースのユニット 2 を完了したユーザーを対象としています。

作成するアプリの概要

ユニット 2 で習得したスキルを活かして、RecyclerView に情報を表示する Dogglers というアプリを作成します。

必要なもの

Android Studio がインストールされているパソコン

2. アプリの概要

プロジェクト: Dogglers アプリへようこそ。

Google では、同僚の Google 社員を親しみを込めて Googler と呼んでいます。多くの Googler はペットとして犬を飼っているので、我らの友人である犬のためのアプリ「Dogglers」を作成したら面白いのではないかと考えました。ここでのタスクは、Googler が飼っている犬たちのスクロールリストと、それぞれの犬に関するちょっとした情報（名前、年齢、趣味、写真）を表示する Dogglers を実装することです。このプロジェクトでは、Dogglers アプリに RecyclerView アイテムのレイアウトを作成してアダプタを実装し、水平スクロールレイアウト、垂直スクロールレイアウト、垂直スクロールグリッドレイアウトの 3 つの方法で犬のリストを表示します。

アプリを起動すると、水平レイアウト、垂直レイアウト、グリッドレイアウトの各オプションが提示されます。

1 つ目のオプションは、垂直方向にスクロールするリサイクラービューで、画面の横幅いっぱいにアイテムを表示します。

2 つ目のオプションは、水平方向にスクロールするリサイクラービューで、犬のリストを表示します。

3 つ目のオプションは、垂直方向にスクロールするグリッドスタイルのレイアウトで、各行に 2 匹の犬を表示します。

これらのレイアウトは、すべて同じアダプタクラスを利用しています。ここでは、リサイクラービューカードのレイアウトを作成し、各アイテムに 1 匹の犬の情報が入力されるようにアダプタを実装します。

3.始める

プロジェクトコードをダウンロードする

フォルダ名は android-basics-kotlin-dogglers-app です。Android Studio でプロジェクトを開くときは、このフォルダを選択してください。

プロジェクト用に提供されている GitHub リポジトリページに移動します。
ブランチ名が Codelab で指定されたブランチ名と一致していることを確認します。たとえば、次のスクリーンショットでは、ブランチ名は main です。

プロジェクトの GitHub ページで、[Code] ボタンをクリックすると、ポップアップが表示されます。

ポップアップで、[Download ZIP] をクリックして、プロジェクトをパソコンに保存します。ダウンロードが完了するまで待ちます。
パソコンに保存したファイルを見つけます（[ダウンロード] フォルダなど）。
ZIP ファイルをダブルクリックして展開します。プロジェクトファイルが入った新しいフォルダが作成されます。

Android Studio でプロジェクトを開く

Android Studio を起動します。
[Welcome to Android Studio] ウィンドウで、[Open] をクリックします。

注: Android Studio がすでに開いている場合は、メニューから [File] > [Open] を選択します。

ファイルブラウザで、展開したプロジェクトフォルダがある場所（[ダウンロード] フォルダなど）に移動します。
そのプロジェクトフォルダをダブルクリックします。
Android Studio でプロジェクトが開かれるまで待ちます。
実行ボタンをクリックして、アプリをビルドし、実行します。想定どおりにビルドされることを確認します。

プロジェクトは個別のパッケージにまとめられます。ほとんどの機能はすでに実装済みですが、DogCardAdapter はご自分で実装する必要があります。さらに、変更が必要なレイアウトファイルが 2 つあります。他のファイルについては、次の手順で必要に応じて説明します。

レイアウトを実装する

垂直レイアウトと水平レイアウトは実質的に同じなので、実装する必要があるのは両方に対応する単一のレイアウトファイルのみです。グリッドレイアウトもまったく同じ情報を表示しますが、犬の名前、年齢、趣味が垂直方向に積み重ねられるため、これに対応する個別のレイアウトが必要になります。どちらのレイアウトでも、個々の犬に関する情報を表示するために 4 種類のビューが必要です。

犬の写真を含む ImageView
犬の名前を含む TextView
犬の年齢を含む TextView
犬の趣味を含む TextView

お気づきのとおり、各カードにスタイルを設定して枠線とシャドウを表示することもできます。これは、スタータープロジェクトのレイアウトファイルにすでに追加済みの MaterialCardView によって処理されます。個々の MaterialCardView 内には ConstraintLayout があり、これに残りのビューを追加する必要があります。

レイアウトを実装するには 2 つの XML ファイルが必要です。つまり、水平 / 垂直レイアウト用の vertical_horizontal_list_item.xml と、グリッドレイアウト用の grid_list_item.xml です。

垂直リストと水平リスト用のレイアウトを作成します。

vertical_horizontal_list_item.xml を開き、内部の ConstraintLayout 内で画像に合わせてレイアウトを作成します。

グリッドレイアウトを作成します。

grid_list_item.xml を開き、内部の ConstraintLayout 内で画像に合わせてレイアウトを作成します。

アダプタを実装する

レイアウトを定義したら、次のタスクは RecyclerView アダプタの実装です。adapter パッケージの DogCardAdapter.kt を開きます。何を実装する必要があるかを説明する TODO コメントが多数見つかるはずです。

アダプタを実装するには 5 つのステップが必要です。

犬のデータのリストを表す変数または定数を定義します。このリストは、data パッケージ内の DataSource というオブジェクトにあり、次のように記述されています。

object DataSource {

   val dogs: List<Dog> = listOf( ...

}

dogs プロパティの型は List<Dog> です。Dog モデルは model パッケージにあり、4 つのプロパティを定義しています。その内訳は、1 つの画像（リソース ID で表されます）と 3 つの String プロパティです。

data class Dog(
   @DrawableRes val imageResourceId: Int,
   val name: String,
   val age: String,
   val hobbies: String
)

DogCardAdapter で定義した変数を、DataSource オブジェクトの dogs リストに設定します。

DogCardViewHolder を実装します。ビューホルダーは 4 つのビューをバインドする必要があり、これらのビューはリサイクラービューカードごとに設定する必要があります。すべてのビューは grid_list_item レイアウトと vertical_horizontal_list_item レイアウトの両方で共有されるため、両方のレイアウトで同じビューホルダーが共有されます。DogCardViewHolder には、dog_image、dog_name、dog_age、dog_hobbies の各ビュー ID のプロパティを含める必要があります。
onCreateViewHolder() で、grid_list_item レイアウトまたは vertical_horizontal_list_item レイアウトをインフレートできます。使用されるレイアウトを確認するにはどうすればよいでしょうか？アダプタの定義を見ると、アダプタのインスタンスの作成時に Int 型の layout という値が渡されていることがわかります。

class DogCardAdapter(
   private val context: Context?,
   private val layout: Int
): RecyclerView.Adapter<DogCardAdapter.DogCardViewHolder>() {

これは、const パッケージ内にある Layout オブジェクトで定義された値に対応しています。

object Layout {
   val VERTICAL = 1
   val HORIZONTAL = 2
   val GRID = 3
}

layout の値は 1、2、3 のいずれかですが、これを Layout オブジェクトの識別子 VERTICAL、HORIZONTAL、GRID と照合できます。

GRID レイアウトの場合は grid_list_item レイアウトをインフレートし、HORIZONTAL レイアウトと VERTICAL レイアウトの場合は vertical_horizontal_list_item レイアウトをインフレートします。このメソッドは、インフレートされたレイアウトを表す DogCardViewHolder インスタンスを返す必要があります。

犬のリストの長さを返す getItemCount() を実装します。
最後に、個々のリサイクラービューカードにデータを設定する onBindViewHolder() を実装する必要があります。position を使用してリスト内の正しい犬のデータにアクセスし、画像と犬の名前を設定します。文字列リソース dog_age および dog_hobbies を使用して、年齢と趣味を適切に書式設定します。

アダプタの実装が完了したら、エミュレータでアプリを実行して、すべてが正しく実装されたことを確認します。

4. アプリをテストする

Dogglers プロジェクトには、複数のテストケース付きの「androidTest」ターゲットが含まれています。

テストを実行する

テストを実行するには、次のいずれかを行います。

テストケースが 1 つの場合は、テストケースクラスを開いて、クラス宣言の左側にある緑色の矢印をクリックします。メニューから [Run] オプションを選択します。これにより、テストケース内のすべてのテストが実行されます。

テストを 1 つだけ実行したい場合もあります。たとえば、失敗したテストが 1 つだけで、他のテストには合格している場合などです。テストケース全体を実行するときと同じように、1 つのテストを実行できます。緑色の矢印をクリックして [Run] オプションを選択します。

複数のテストケースがある場合は、テストスイート全体を実行することもできます。アプリを実行する場合と同様に、このオプションは [Run] メニューにあります。

Android Studio は、デフォルトでは最後に実行したターゲット（アプリやテストターゲットなど）を実行するため、メニューに [Run] > [Run 'app'] と表示されている場合は、[Run] > [Run] を選択してそのテストターゲットを実行できます。

ポップアップメニューからテストターゲットを選択します。

テストの実行結果が [Run] タブに表示されます。左側のペインに、失敗したテストのリストが表示されます（ある場合）。失敗したテストについては、関数名の横に赤い感嘆符が表示されます。合格したテストには緑色のチェックマークが表示されます。

テストが失敗すると、テキスト出力に、テスト失敗の原因となった問題の解決に役立つ情報が表示されます。

たとえば、上記のエラーメッセージは、「Nox」という単語を含む文字列が表示されているかどうかをテストし、失敗したことを示しています。テキストが見つかりませんでした。つまり、まだ表示されていない可能性があります。