Android Kotlin基礎講座 08.3:フィルタリングとインターネットデータの詳細ビュー

タスク：詳細ページを改良する

現在、詳細ページでは概要ページで使っているのと同じ写真を表示しています。MarsPropertyクラスには物件のタイプと価格情報も保持されています。詳細画面はこれらの値両方を含んでいるべきです。さらに貸し出し用物件であれば、月ごとの金額を示していたら、より便利になるでしょう。これらを実装するにはビューモデル内のLiveData transformationを利用します。

res/values/strings.xmlを開いてください。スターターコードには以下の詳細ビューのためのstringリソースが含まれています。価格に対しては、display_price_monthly_rentalリソースかdisplay_priceリソースを物件のタイプに応じて使い分けます。

<string name="type_rent">Rent</string>
<string name="type_sale">Sale</string>
<string name="display_type">For %s</string>
<string name="display_price_monthly_rental">$%,.0f/month</string>
<string name="display_price">$%,.0f</string>

detail/DetailViewModel.ktを開いてください。クラスの一番下に以下のコードを追加してください。
要求されたら、androidx.lifecycle.Transformationsをインポートしてください。

このtransformationは選択された物件が貸し出し用かを最初のタスクと同じやり方でテストしています。when{}を使って適切なstringを選択しています。これらのstringは両方とも終わりに数字を必要とするので、後でproperty.priceを連結します。

val displayPropertyPrice = Transformations.map(selectedProperty) {
   app.applicationContext.getString(
           when (it.isRental) {
               true -> R.string.display_price_monthly_rental
               false -> R.string.display_price
           }, it.price)
}

生成されたRクラスをインポートして、プロジェクト内のstringリソースにアクセスできるようにしましょう。

import com.example.android.marsrealestate.R

displayPropertyPrice transformationの後に、以下のコードを追加してください。このtransformationは物件タイプが貸し出し用かに基づいて、複数のstringリソースを連結しています。

val displayPropertyType = Transformations.map(selectedProperty) {
   app.applicationContext.getString(R.string.display_type,
           app.applicationContext.getString(
                   when (it.isRental) {
                       true -> R.string.type_rent
                       false -> R.string.type_sale
                   }))
}

res/layout/fragment_detail.xmlを開いてください。もう一つだけしなければならないことがあります。それは新規string（LiveData transformationで先ほど作成したもの）を詳細ビューにバインドすることです。これをするためには、物件タイプのテキスト用のテキストフィールドの値をviewModel.displayPropertyTypeに設定し、価格用のテキストフィールドの値をviewModel.displayPropertyPriceに設定します。

<TextView
   android:id="@+id/property_type_text"
...
android:text="@{viewModel.displayPropertyType}"
...
   tools:text="To Rent" />

<TextView
   android:id="@+id/price_value_text"
...
android:text="@{viewModel.displayPropertyPrice}"
...
   tools:text="$100,000" />

コンパイルしてアプリを起動してください。これで全ての物件データが詳細ページに表示されるようになりました。

完成済みプロジェクト

お疲れさまでした。完成済みプロジェクトは以下からダウンロードできます。

MarsRealEstateFinal