Android Kotlin基礎講座 08.1:インターネットからデータを取得する

Android Kotlin基礎講座

タスク:MarsRealEstateスターターアプリについて調べる

MarsRealEstateアプリのアーキテクチャには二つのメインモジュールがあります。

  • 一つは概要フラグメントです。これにはRecyclerViewで構築された物件画像のサムネイルのグリッドが含まれています。
  • もう一つは詳細ビューフラグメントです。これにはそれぞれの物件の情報が含まれています。

このアプリにはそれぞれのフラグメント用にViewModelが用意されています。この記事では、ネットワークサービス用のレイヤーを作成し、ViewModelが直接そのネットワークレイヤーとやり取りします。
これはViewModelがRoomデータベースとやり取りできるようにするときに、以前の記事で行ったことに似ています。

概要ビューモデルは火星の不動産情報を取得するために、ネットワークへの呼び出しを行う役割を担います。詳細ビューモデルは詳細フラグメントに表示されている火星の不動産の詳細を保持します。それぞれのビューモデルに対して、データが変更されたときにUIを更新するためのライフサイクル対応のデータバインディングを用いたLiveDataを使います。

二つのフラグメント間を遷移させるため、また選択された物件を引数として渡すためにナビゲーションコンポーネントを用います。

このタスクでは、MarsRealEstate用のスターターアプリをダウンロードし起動します。またプロジェクトの構造を調べていきます。

ステップ1:フラグメントとナビゲーションについて

  1. MarsRealEstate starter appをダウンロードし、Android Studioで開いてください。
  2. app/java/MainActivity.ktを調べます。このアプリは両方の画面用にフラグメントを使っているので、アクティビティの唯一の役割はアクティビティのレイアウトを読み込むことです。
  3. app/res/layout/activity_main.xmlを調べます。アクティビティレイアウトはナビゲーションファイルに定義されている二つのフラグメントのホストです。このレイアウトはNavHostFragmentと、それに関連するナビゲーションコントローラーをnav_graphリソースを用いてインスタンス化しています。
  4. app/res/navigation/nac_graph.xmlを開いてください。ここで二つのフラグメントのナビゲーション関係を見ることができます。ナビゲーショングラフのStartDestinationはoverviewFragment(概要フラグメント)を指示していますので、アプリ起動時には概要フラグメントがインスタンス化されます。

ステップ2:Kotlinソースファイルとデータバインディングについて

  1. プロジェクトパネルのapp>javaを展開してください。MarsRealEstateアプリには、detail、network、そしてoverviewの三つのパッケージフォルダがあることを確認してください。これらはアプリの三つの主なコンポーネントである、概要フラグメント、詳細フラグメント、そしてネットワークレイヤー用のコードに対応しています。
  2. app/java/overview/OverviewFragment.ktを開いてください。OverviewFragmentはOverviewViewModelをlazyでインタンス化しています。これはOverviewViewModelが実際に使われるときに初めて作られるということを意味しています。
  3. onCreateView()メソッドを調べます。このメソッドはfragment_overviewレイアウトをデータバインディングを使ってインフレートし、bindingのライフサイクルオーナーを自身(this)に設定し、binding中のviewModel変数をそれに設定します。
  4. app/java/overview/OverviewViewModelを開いてください。responseはLiveDataであり、binding変数にライフサイクルを設定したので、如何なる変更もUIに反映されます。
  5. initブロックを調べます。ViewModelが作られるときに、それがgetMarsRealEstateProperties()メソッドを呼び出します。
  6. getMarsRealEstateProperties()メソッドを調べます。このスターターアプリでは、このメソッドにプレースホルダーresponseが含まれています。この記事のゴールはViewModel内で、インターネットから取得した実際のデータを使って、response LiveDataをを更新することです。
  7. app/res/layout/fragment_overview.xmlを開いてください。これがこの記事で作業する概要フラグメント用のレイアウトです。これにはビューモデル用のデータバインディングが含まれています。これはOverviewViewModelをインポートし、ViewModelからのresponseをTextViewにバインドします。後の記事では、このテキストビューをRecyclerViewを用いた画像のグリッドで置き換えていきます。
  8. コンパイルしてアプリを起動してください。アプリの現段階では、初期の反応である、”Set the Mars API Response here!”のみが表示されます。

プロフィール

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

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

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