目次
- 1この講座について
- 2イントロダクション
- 3前提知識
- 4この講座で学べること
- 5概要
- 6アプリの概観
- 7タスク:インターネットの画像を表示する
- 7.1ステップ1:Glideの依存関係を追加する
- 7.2ステップ2:ビューモデルをアップデートする
- 7.3ステップ3:バインディングアダプターの作成とGlideの呼び出し
- 7.4ステップ4:レイアウトとフラグメントを更新する
- 7.5ステップ5:シンプルなローディング画像とエラー画像を追加する
- 8タスク:RecyclerViewで画像のグリッドを表示する
- 8.1ステップ1:ビューモデルを更新する
- 8.2ステップ2:レイアウトをフラグメントを更新する
- 8.3ステップ3:PhotoGridAdapterを追加する
- 8.4ステップ4:バインディングアダプターを追加し、パーツに接続する
- 9タスク:RecyclerViewにエラー処理を追加する
- 9.1ステップ1:ビューモデルに状態を追加する
- 9.2ステップ2:状態を表すImageView用のバインディングアダプターを追加する
- 9.3ステップ3:状態ImageViewをレイアウトに追加する
- 10完成済みプロジェクト
- 11まとめ
この講座について
この記事はAndroid Kotlin基礎講座の一部です。これ以外のAndroid Kotlin基礎講座(全10回)も一緒に受講することでAndroidアプリの開発手法、およびKotlinの基礎知識を学ぶことができます。全講座はAndroid Kotlin基礎講座にリスト化されていますので参考にしてください。
またこの記事ではGoogle Developers Training teamによってGoogle Codelabsに公開されているAndroid Kotlin Fundamentals courseを日本語に翻訳しつつ、筆者の考察も交えながら発信しています。オリジナルのサイト(英文)はこちら。
イントロダクション
前回の記事では、ウェブサービスからデータを取得し、結果をデータオブジェクトにパースする方法を学習しました。この記事では、その知識を活用してウェブURLから写真を読み込み、表示する方法を学習します。また、RecyclerViewを使って概要ページに画像のグリッド(格子)を表示する方法を復習します。
前提知識
- フラグメントの作り方、および使い方
- ViewModel、ViewModelProvider.Factory、LiveData、LiveData transformationを含むアーキテクチャコンポーネントの使い方
- RESTウェブサービスからJSONを取得し、RetrofitおよびMoshiライブラリを使ってKotlinオブジェクトにパースする方法
- RecyclerViewでグリッドレイアウトを作る方法
- Adapter、ViewHolder、DiffUtilの基礎知識
この講座で学べること
- Glideライブラリを使ってウェブURLから画像を読み取り、表示する方法
- RecyclerViewとグリッドアダプターを使って画像のグリッドを表示する方法
- 画像をダウンロードし表示する際に発生し得るエラーを処理する方法
概要
- 火星の物件データから画像のURLを取得し、Glideを使ってその画像を読み取り、表示できるようにMarsRealEstateアプリを修正
- 読み取り中のアニメーションとエラーアイコンをアプリに追加
- RecyclerViewを使って火星の物件の画像をグリッドで表示する
- RecyclerViewにステータスとエラー処理を追加
プロフィール
大学卒業後SEに就職、現在は退職しフリーランスとして活動中。
『初心者でも挫折せずに一人でプログラミングを学べる』をモットーに、コードラボJPを開設
お問い合わせ等はcodelabsjp@gmail.comまで