ブログ

<?xml version="1.0" encoding="utf-8"?>
<androidx.fragment.app.FragmentContainerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/overviewFragment"
    android:name="com.example.android.marsphotos.overview.OverviewFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:layout="@layout/fragment_overview" />

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <data>
        <variable
            name="viewModel"
            type="com.example.android.marsphotos.overview.OverviewViewModel" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.example.android.marsphotos.overview.OverViewFragment">
        <!--
            app:listData要素は、カスタムバインディングアダプタ
            BindingAdapters.ktで定義した
            @BindingAdapter("listData")の関数(bindRecyclerView)
            から戻されるイメージデータ
            入力する値はviewModelのLiveData
        -->
        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/photos_grid"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:padding="6dp"
            android:clipToPadding="false"
            app:layoutManager="androidx.recyclerview.widget.GridLayoutManager"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:listData="@{viewModel.photos}"
            app:spanCount="2"
            tools:itemCount="16"
            tools:listitem="@layout/grid_view_item" />
        <!--
            app:marsApiStatus要素は、、カスタムバインディングアダプタ
            BindingAdapters.ktで定義した
            @BindingAdapter("listData")の関数(bindRecyclerView)
            から戻されるイメージデータ
            入力する値はviewModelのLiveData
        -->
        <ImageView
            android:id="@+id/status_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:marsApiStatus="@{viewModel.status}" />
    </androidx.constraintlayout.widget.ConstraintLayout>

</layout>

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">
    <data>
        <variable
            name="photo"
            type="com.example.android.marsphotos.network.MarsPhoto" />
    </data>
    <ImageView
        android:id="@+id/mars_image"
        android:layout_width="wrap_content"
        android:layout_height="170dp"
        android:scaleType="fitXY"
        android:adjustViewBounds="true"
        android:padding="2dp"
        app:imageUrl="@{photo.imgSrcUrl}"
        tools:src="@tools:sample/backgrounds/scenic"/>
</layout>

import android.view.View
import android.widget.ImageView
import androidx.core.net.toUri
import androidx.databinding.BindingAdapter
import androidx.recyclerview.widget.RecyclerView
import coil.load
import com.example.android.marsphotos.network.MarsPhoto
import com.example.android.marsphotos.overview.MarsApiStatus
import com.example.android.marsphotos.overview.PhotoGridAdapter

/**
 * カスタムバインディングアダプタの作成
 * MainActivity.ktと同じフォルダにアノテーションと関数だけの
 * ファイルを作成しカスタムバインディングアダプターを定義する。
 *
 * 書式は、@BindingAdapter(カスタムバインディングアダプタ名)
 * fun 任意の関数名(
 *     アウトプットオブジェクトの変数名 : xmlレイアウトオブジェクトの型,
 *     インプットデータ : xmlレイアウトの右辺のデータ型 ){
 *     処理内容
 * }
 */

// grid_view_item.xmlで定義したapp:imageUrlのバインディングアダプタ
@BindingAdapter("imageUrl")
fun bindImage(imgView: ImageView, imgUrl: String?) {
    // URLが存在する場合は画像を取得しImageViewに表示する
    imgUrl?.let {
        // URL文字列をUriに変換しその上にスキームhttpsを付加
        val imgUri = imgUrl.toUri().buildUpon().scheme("https").build()
        // Coilで画像を取得してImageViewにセットする(たったこれだけ！)
        imgView.load(imgUri){
            placeholder(R.drawable.loading_animation)   // 処理中の画像
            error(R.drawable.ic_broken_image)   // エラー時の画像
        }
    }
}

// fragment_overview.xmlで定義したapp:listDataのバインディングアダプタ
@BindingAdapter("listData")
fun bindRecyclerView(recyclerView: RecyclerView,
                     data: List<MarsPhoto>?) {
    // 出力するrecyclerViewのadapterをListAdapter型の
    // PhotoGridAdapterにキャストし変数に代入
    // ※フラグメント側で binding.photosGrid.adapter = PhotoGridAdapter()
    // としているので、ここでもadapterの型をPhotoGridAdapterとしておく
    val adapter = recyclerView.adapter as PhotoGridAdapter
    // RecycleViewに表示するListデータ(data)を登録
    adapter.submitList(data)
}

// fragment_overview.xmlで定義したapp:marsApiStatusのバインディングアダプタ
@BindingAdapter("marsApiStatus")
fun bindStatus(statusImageView: ImageView,
               status: MarsApiStatus?) {
    // statusの値に応じてViewを表示・非表示を切替しイメージを表示する
    when (status) {
        MarsApiStatus.LOADING -> {
            statusImageView.visibility = View.VISIBLE
            statusImageView.setImageResource(R.drawable.loading_animation)
        }
        MarsApiStatus.ERROR -> {
            statusImageView.visibility = View.VISIBLE
            statusImageView.setImageResource(R.drawable.ic_connection_error)
        }
        MarsApiStatus.DONE -> {
            statusImageView.visibility = View.GONE
        }
    }
}

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import androidx.fragment.app.viewModels
import com.example.android.marsphotos.databinding.FragmentOverviewBinding
import com.example.android.marsphotos.databinding.GridViewItemBinding

class OverviewFragment : Fragment() {

    // ビューモデル OverviewViewModelを定義
    private val viewModel: OverviewViewModel by viewModels()

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // fragment_overview.xmlにデータバインディングを設定
        val binding = FragmentOverviewBinding.inflate(inflater)

        // lifecycleOwnerはフラグメントとする
        binding.lifecycleOwner = this

        // xmlレイアウトの<data>タグ部分との紐づけ
        // バインディングデータの設定
        binding.viewModel = viewModel

        // リサイクラービューの@+id/photos_grid"に対して
        // adapterをPhotoGridAdapterに設定する
        binding.photosGrid.adapter = PhotoGridAdapter()

        return binding.root
    }
}

import android.util.Log
import android.widget.ImageView
import androidx.core.net.toUri
import androidx.databinding.BindingAdapter
import androidx.lifecycle.LiveData
import androidx.lifecycle.MutableLiveData
import androidx.lifecycle.ViewModel
import androidx.lifecycle.viewModelScope
import coil.load
import com.example.android.marsphotos.network.MarsApi
import kotlinx.coroutines.launch
import com.example.android.marsphotos.network.MarsPhoto

// 定数を定義したenumクラス
enum class MarsApiStatus { LOADING, ERROR, DONE }

class OverviewViewModel : ViewModel() {

    // データバインディングのMutableLiveData変数を定義

    // ステータスはenumで定義した定数の型とする
    private val _status = MutableLiveData<MarsApiStatus>()
    val status: LiveData<MarsApiStatus> = _status

    private val _photos = MutableLiveData<List<MarsPhoto>>()
    val photos: LiveData<List<MarsPhoto>> = _photos

    init {
        // データ取得
        getMarsPhotos()
    }

    // JSONデータ取得メソッド
    private fun getMarsPhotos() {
        // launchによりコルーチン(子スレッド)を起動してデータを取得する
        viewModelScope.launch {
            _status.value = MarsApiStatus.LOADING
            try {
                // MarsApiオブジェクト(retrofitService)を
                _photos.value = MarsApi.retrofitService.getPhotos()
                _status.value = MarsApiStatus.DONE
            } catch (e: Exception) {
                // エラー処理
                _status.value = MarsApiStatus.ERROR
                _photos.value = listOf()
            }
        }
    }
}

import com.squareup.moshi.Moshi
import com.squareup.moshi.kotlin.reflect.KotlinJsonAdapterFactory
import retrofit2.Retrofit
import retrofit2.converter.moshi.MoshiConverterFactory
import retrofit2.http.GET

// ベースアドレス
private const val BASE_URL = "https://android-kotlin-fun-mars-server.appspot.com"

// Moshiの設定
// (項目名変換のMoshiアノテーションを動作させるためKotlinJsonAdapterFactoryを追加)
private val moshi = Moshi.Builder()
    .add(KotlinJsonAdapterFactory())
    .build()

// Retrofitの設定
private val retrofit = Retrofit.Builder()
    // ConverterFactoryにMoshiConverterFactoryを指定
    // Converterのcreate引数はMoshiビルダーのインスタンスをセット
    .addConverterFactory(MoshiConverterFactory.create(moshi))
    .baseUrl(BASE_URL)
    .build()

// interface
interface MarsApiService {
    // getリクエストを実行。ベースURLに続いての「photos」がurlになる
    @GET("photos")
    // 任意の名前の関数を定義し取得するデータの型を指定する
    // MoshiコンバータによりJsonデータをMarsPhoto型のリストとして取得
    // suspendとする事でコルーチンからの呼出しが可能
    suspend fun getPhotos(): List<MarsPhoto>
}

// retrofitのオブジェクトを作成
// ktファイルのロード時は「by lazy」で遅延初期化(実際に利用される時に初期化)
// シングルトンオブジェクトとして１つのみインスタンス化される
object MarsApi {
    val retrofitService : MarsApiService by lazy {
        // Retrofitビルダーのcreateメソッドに
        // MarsApiServiceインターフェイスを渡す
        retrofit.create(MarsApiService::class.java)
    }
}

import com.squareup.moshi.Json

/*
JSONのサンプルデータ
[{"id":"424905","img_src":"http://mars.jpl.nasa.gov/msl-raw-images/msss/01000/mcam/1000MR0044631300503690E01_DXXX.jpg"},
{"id":"424906","img_src":"http://mars.jpl.nasa.gov/msl-raw-images/msss/01000/mcam/1000ML0044631300305227E03_DXXX.jpg"},
 */
data class MarsPhoto(
    // 基本はJSONの項目名と同じ名前の変数名とする。
    // ただしJSON側の項目名がキャメルケースでない場合は@Jsonにより別名で紐づけを定義する
    val id: String,
    @Json(name = "img_src") val imgSrcUrl: String
)

import android.view.LayoutInflater
import android.view.ViewGroup
import androidx.recyclerview.widget.DiffUtil
import androidx.recyclerview.widget.ListAdapter
import androidx.recyclerview.widget.RecyclerView
import com.example.android.marsphotos.databinding.GridViewItemBinding
import com.example.android.marsphotos.network.MarsPhoto

/**
 * リサイクラービューのアダプタ　ListAdapter
 * ListAdapterはLiveDataの変更されたレコードを読取しバインドデータを戻す
 *
 * RecyclerViewの例はRecyclerView.Adapter型だったけれど
 * この例題はRecyclerView.Adapter型の派生クラスのListAdapterを使用
 *
 * 書式は
 * class クラス名 : ListAdapter<A: Object, B: RecyclerView.ViewHolder>(C: DiffUtils.ItemCallback<A>)
 * - A:Object は表示するデータ
 * (バインドデータよりカスタムバインディングアダプタで設定済み → adapter.submitList(data))
 * - B:クラス内でViewHolderを定義しそのクラス名をセット
 * ViewHolderは2つの抽象メソッドでも使用する
 * - C:DiffUtils.ItemCallback<A> は A:Objectの差分確認方法を実装したItemCallback
 * クラス内にcompanion objectを作成しDiffUtil.ItemCallbackを作成
 * 2つの抽象メソッドが必要
 *
 * ListAdapterクラス内には、前述のViewHolderとDiffUtil.ItemCallbackオブジェクトの他に
 * onCreateViewHolderとonBindViewHolderを実装する。
 * onCreateViewHolder→ViewHolderをリターン
 * onBindViewHolder→画面スクロール時に現在のposのデータをViewHolderに渡す
 */
class PhotoGridAdapter :    ListAdapter<
                                MarsPhoto,
                                PhotoGridAdapter.MarsPhotoViewHolder
                            >(DiffCallback) {

    // 2つの要素を比較するObject　
    // ListAdapterのコンストラクタにて必要
    companion object DiffCallback : DiffUtil.ItemCallback<MarsPhoto>() {
        override fun areItemsTheSame(oldItem: MarsPhoto, newItem: MarsPhoto): Boolean {
            return oldItem.id == newItem.id
        }
        override fun areContentsTheSame(oldItem: MarsPhoto, newItem: MarsPhoto): Boolean {
            return oldItem.imgSrcUrl == newItem.imgSrcUrl
        }
    }

    // ビューホルダの定義　型はRecyclerView.ViewHolder(binding.root)
    // 引数はレイアウトファイル(grid_view_item.xml)のバインディングデータ
    // ListAdapterのコンストラクタにて必要
    class MarsPhotoViewHolder(
        private var binding: GridViewItemBinding
    ) : RecyclerView.ViewHolder(binding.root) {
        // 後述のonBindViewHolderよりコールされる
        // ViewModelのinit処理で取得したLiveDataからカレントデータを受取り、
        // ビュー側(binding)にidとurlの入った文字列データをセットする
        fun bind(MarsPhoto: MarsPhoto) {
            binding.photo = MarsPhoto
            // bind関数が呼ばれた時点で画面反映させる
            binding.executePendingBindings()
        }
    }

    // 抽象メソッド1
    // 前述したビューホルダ(MarsPhotoViewHolder)をCreateして戻す
    override fun onCreateViewHolder(
        parent: ViewGroup,  // ViewGroup(リサイクラービューのレイアウトxmlのコンテキスト)
        viewType: Int       // 異なるビュータイプがある時に利用
    ): PhotoGridAdapter.MarsPhotoViewHolder {
        return MarsPhotoViewHolder(GridViewItemBinding.inflate(
            LayoutInflater.from(parent.context)))
    }

    // 抽象メソッド2
    // 画面スクロール時に現在のposのデータを受渡する
    override fun onBindViewHolder(
        holder: PhotoGridAdapter.MarsPhotoViewHolder,
        position: Int) {
        // 現在のposのデータを取得
        val marsPhoto = getItem(position)
        // 取得データをMarsPhotoViewHolderのbindメソッドに渡す
        holder.bind(marsPhoto)
    }
}