プロジェクト: Dogglers アプリ

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

前提条件

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

作成するアプリの概要

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

必要なもの

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

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

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

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

adf6ec8cce8cc655.png

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

51045288de047217.png

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

ce534bc07ecba432.png

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

6dac0c59577f6fbb.png

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

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

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

この Codelab のコードを取得して Android Studio で開くには、以下の手順に沿って操作します。

コードを取得する

  1. 指定された URL をクリックします。プロジェクトの GitHub ページがブラウザで開きます。
  2. プロジェクトの GitHub ページで、[Code] ボタンをクリックすると、ダイアログが表示されます。

5b0a76c50478a73f.png

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

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

  1. Android Studio を起動します。
  2. [Welcome to Android Studio] ウィンドウで [Open an existing Android Studio project] をクリックします。

36cc44fcf0f89a1d.png

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

21f3eec988dcfbe9.png

  1. [Import Project] ダイアログで、展開したプロジェクト フォルダがある場所([ダウンロード] フォルダなど)に移動します。
  2. そのプロジェクト フォルダをダブルクリックします。
  3. Android Studio でプロジェクトが開かれるまで待ちます。
  4. 実行ボタン 11c34fc5e516fb1c.png をクリックして、アプリをビルドし、実行します。期待どおりにビルドされることを確認します。
  5. [Project] ツール ウィンドウでプロジェクト ファイルを見て、アプリがどのように設定されているかを確認します。

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

93c2c1fee50a493b.png

レイアウトを実装する

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

  1. 犬の写真を含む ImageView
  2. 犬の名前を含む TextView
  3. 犬の年齢を含む TextView
  4. 犬の趣味を含む TextView

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

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

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

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

73a663ae61811a4b.png

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

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

50dd020683b63b1a.png

アダプタを実装する

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

3192d25f55b403bc.png

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

  1. 犬のデータのリストを表す変数または定数を定義します。このリストは、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 リストに設定します。

  1. DogCardViewHolder を実装します。ビューホルダーは 4 つのビューをバインドする必要があり、これらのビューはリサイクラー ビューカードごとに設定する必要があります。すべてのビューは grid_list_item レイアウトと vertical_horizontal_list_item レイアウトの両方で共有されるため、両方のレイアウトで同じビューホルダーが共有されます。DogCardViewHolder には、dog_imagedog_namedog_agedog_hobbies の各ビュー ID のプロパティを含める必要があります。
  2. 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 オブジェクトの識別子 VERTICALHORIZONTALGRID と照合できます。

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

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

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

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

583b42ccd1e5b22.png

テストを実行する

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

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

a32317d35c77142b.png

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

ac6244434cfafb60.png

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

7a925c5e196725bb.png

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

ee1e227446c536fe.png

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

d570c947769db65c.png

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

6d68f2bf589501ae.png

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

63f37b6428781c02.png

たとえば、上記のエラー メッセージは、TextView が特定の文字列リソースを使用しているかどうかをテストでチェックしたことを示しています。テスト結果は失敗です。「Expected」と「Got」の後のテキストが一致していません。これは、テストで予想された値と実行中のアプリから得られた値が一致しないことを意味します。

このプロジェクトに関するご意見をお寄せいただけければ幸いです。こちらの簡単なアンケートにお答えください。お寄せいただいたフィードバックは、このコースに関する今後のプロジェクトの参考にさせていただきます。