プロジェクト: Dogglers アプリ

1. 始める前に

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

この Codelab は、このコースの他の Codelab とは異なります。これまでの Codelab とは異なり、この Codelab は、アプリのビルド手順を説明するチュートリアルではありません。代わりに、ユーザーが単独で完了できるプロジェクトを設定し、アプリを完成させて自分で確認する方法を紹介しています。

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

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

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

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

前提条件

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

作成するアプリの概要

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

必要なもの

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

2. アプリの概要

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

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

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

9e1186e8d2cff595.png

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

dc2852940d6994e7.png

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

b959082c9491381d.png

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

438b19a77ecfaaba.png

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

3.始める

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

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

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

1e4c0d2c081a8fd2.png

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

1debcf330fd04c7b.png

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

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

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

d8e9dbdeafe9038a.png

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

8d1fda7396afe8e5.png

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

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

c181caccdddc5c2e.png

レイアウトを実装する

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

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

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

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

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

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

6464da5b34a739ed.png

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

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

dfa4b5f0acda0ec6.png

アダプタを実装する

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

1bd9c8014cd1070e.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 レイアウトの場合は vertical_horizontal_list_item レイアウトをインフレートします。このメソッドは、インフレートされたレイアウトを表す DogCardViewHolder インスタンスを返す必要があります。

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

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

4. アプリをテストする

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

5a6691e43e85409d.png

テストを実行する

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

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

a2be071431d93972.png

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

4dbc8422f9d3551.png

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

be4b7b8805335082.png

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

6d0de7b74787e91.png

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

c0d58fc64ea5c33d.png

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

5c90c852965bbc3f.png

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

31167a1fa7383f46.png

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