Android Kotlin基礎講座 07.4:RecyclerViewのタップ処理

Android Kotlin基礎講座

タスク:スターターコードを取得し、変更部分を調べる

重要: この記事のスターターコードには前回の記事で作成したTrackMySleepQualityアプリには含まれていない追加のレイアウト、リソース、ユーティリティが含まれています。ですので、この記事用のスターターコードを以下に従ってダウンロードして作業していくことを推奨しています。

ステップ1:スターターアプリを取得する

  1. GitHubからRecyclerViewClickHandler-Starter codeをダウンロードし、Android Studioでプロジェクトを開いてください。
  2. ビルドしてアプリを起動してください。

[オプショナル] 前回の記事からのアプリを引き続き使いたい方はアプリをアップデートしてください。

この記事用のスターターアプリをGithHubから取得して作業する予定の方は、次のステップにスキップして構いません。

前回の記事で作成したアプリを引き続き使って作業したいという方は、以下の指示に従ってアプリを更新し、詳細画面フラグメント用のコードを追加してください。

Tip: ファイルシステムのファイルをAndroid Studioにコピーするには、ファイルをコピー&ペーストするか、ドラッグ&ドロップすることができます。

  1. 既存のアプリを使って作業をする場合も、RecyclerViewClickHandler-Starter codeをGitHubからダウンロードしてください。必要な一部ファイルをコピーするためです。
  2. sleepdetailパッケージ内の全てのファイルをコピーしてください。
  3. layoutフォルダー内のfragment_sleep_detail.xmlをコピーしてください。
  4. navigation.xmlの更新されている部分をコピーしてください。これはsleep_detail_fragment用のナビゲーションを追加するものです。
  5. databaseパッケージ内、SleepDatabaseDao内に、以下のgetNigtWithId()メソッドを追加してください。
/** * Selects and returns the night with given nightId.*/@Query("SELECT * from daily_sleep_quality_table WHERE nightId = :key")fun getNightWithId(key: Long): LiveData<SleepNight>
  1. res/values/stringsに以下のstringリソースを追加してください。
<string name="close">Close</string>
  1. クリーンアップしアプリをリビルドしてデータバインディングを更新してください。

ステップ2:詳細画面用のコードを調べる

この記事では、クリックされた夜のデータの詳細を示すフラグメントに遷移させるクリックハンドラーを実装します。かなりのコード量になってしまうのと、フラグメントとナビゲーションに関してはこの記事の範囲ではないので、スターターコードには既にフラグメントとSleepDetailFragment用のナビゲーショングラフが含まれています。
以下のコードを確認しておいてください。

  1. アプリ内のsleepdetailパッケージを見つけてください。このパッケージには一夜のデータの詳細を表示するためのフラグメント、ビューモデル、ビューモデルファクトリ―が含まれています。
  2. sleepdetailパッケージ内のSleepDetailViewModelを開き、中身を確認してください。このビューモデルはSleepNightのキーとDAOをコンストラクタで受け取ります。

クラスのボディ部分には、与えられたキーに対応するSleepNightを取得するためのコード、Closeボタンが押された時にSleepTrackerFragmentに戻るためのnavigateToSleepTracker変数があります。

getNightWithId()関数はLiveData<SleepNight>を返し、SleepDatabaseDao内に定義されています。(databaseパッケージ内)

  1. sleepdetailパッケージ内のSleepDetailFragmentを開き、中身を確認してください。
    データバインディング、ビューモデル、ナビゲーション用のオブザーバーのセットアップがなされていることを確認してください。
  2. sleepdetailパッケージ内のSleepDetailViewModelFactoryを開き、中身を確認してください。
  3. layoutフォルダー内のfragment_sleep_detail.xmlを開き、中身を確認してください。sleepDetailViewModel変数が<data>タグ内に定義されていることを確認してください。これはビューモデルからそれぞれのビューに表示するデータを取得するためのものです。

レイアウトには睡眠の質を画像で表すためのImageView、質を数値で表すためのTextView、睡眠時間を表すためのTextView、詳細フラグメントを閉じる多衛野Buttonに位置制約を付けているConstraintLayoutが含まれています。

  1. navigation.xmlを開いてください。sleep_tracker_fragmentのsleep_detail_fragment用の新しいアクションを確認してください。
    Open the navigation.xml file. For the sleep_tracker_fragment, notice the new action for the sleep_detail_fragment.

この新しいアクションであるaction_sleep_tracker_fragment_to_sleepDetailFragmentはSleepTrackerFragmentから詳細画面に遷移するものです。

コメント

プロフィール

プロフィール
コードラボJP

大学卒業後SEに就職、現在は退職しフリーランスとして活動中。
『初心者でも挫折せずに一人でプログラミングを学べる』をモットーに、コードラボJPを開設
お問い合わせ等はcodelabsjp@gmail.comまで

コードラボJPをフォローする
タイトルとURLをコピーしました