#6 - Display a grid of images with a RecyclerView

Jikdroid · Jul 8, 2022 · 0e5f7b3 · 0e5f7b3
1 parent 96c6c76
commit 0e5f7b3
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 18 deletions.
diff --git a/...ealEstate-Starter/app/src/main/java/com/example/android/marsrealestate/BindingAdapters.kt b/...ealEstate-Starter/app/src/main/java/com/example/android/marsrealestate/BindingAdapters.kt
@@ -20,8 +20,11 @@ package com.example.android.marsrealestate
 import android.widget.ImageView
 import androidx.core.net.toUri
 import androidx.databinding.BindingAdapter
+import androidx.recyclerview.widget.RecyclerView
 import com.bumptech.glide.Glide
 import com.bumptech.glide.request.RequestOptions
+import com.example.android.marsrealestate.network.MarsProperty
+import com.example.android.marsrealestate.overview.PhotoGridAdapter
 
 @BindingAdapter("imageUrl")
 fun bindImage(imgView: ImageView, imgUrl:String?){
@@ -34,4 +37,10 @@ fun bindImage(imgView: ImageView, imgUrl:String?){
                 .error(R.drawable.ic_broken_image))     // 에러가 떴을 떄 표시할 이미지
             .into(imgView)
     }
+}
+
+@BindingAdapter("listData")
+fun bindRecyclerView(recyclerView: RecyclerView, data: List<MarsProperty>?){
+    val adapter = recyclerView.adapter as PhotoGridAdapter
+    adapter.submitList(data)
 }
diff --git a/...Starter/app/src/main/java/com/example/android/marsrealestate/overview/OverviewFragment.kt b/...Starter/app/src/main/java/com/example/android/marsrealestate/overview/OverviewFragment.kt
@@ -43,15 +43,18 @@ class OverviewFragment : Fragment() {
      */
     override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                               savedInstanceState: Bundle?): View? {
-//        val binding = FragmentOverviewBinding.inflate(inflater)
-        val binding = GridViewItemBinding.inflate(inflater)
+
+        val binding = FragmentOverviewBinding.inflate(inflater)
+//        val binding = GridViewItemBinding.inflate(inflater)
 
         // Allows Data Binding to Observe LiveData with the lifecycle of this Fragment
         binding.lifecycleOwner = this
 
         // Giving the binding access to the OverviewViewModel
         binding.viewModel = viewModel
 
+        binding.photosGrid.adapter = PhotoGridAdapter()
+
         setHasOptionsMenu(true)
         return binding.root
     }

diff --git a/...tarter/app/src/main/java/com/example/android/marsrealestate/overview/OverviewViewModel.kt b/...tarter/app/src/main/java/com/example/android/marsrealestate/overview/OverviewViewModel.kt
@@ -40,9 +40,9 @@ class OverviewViewModel : ViewModel() {
     val response: LiveData<String>
         get() = _response
 
-    private val _property = MutableLiveData<MarsProperty>()
-    val property : LiveData<MarsProperty>
-        get() = _property
+    private val _properties = MutableLiveData<List<MarsProperty>>()
+    val properties : LiveData<List<MarsProperty>>
+        get() = _properties
 
     /**
      * Call getMarsRealEstateProperties() on init so we can display status immediately.
@@ -57,11 +57,8 @@ class OverviewViewModel : ViewModel() {
     private fun getMarsRealEstateProperties() {
        viewModelScope.launch {
            try {
-               val listResult = MarsApi.retrofitService.getProperties()
-               _response.value = "Success: ${listResult.size} Mars properties retrieved"
-               if (listResult.size > 0) {
-                   _property.value = listResult[0]
-               }
+               _properties.value = MarsApi.retrofitService.getProperties()
+               _response.value = "Success: Mars properties retrieved"
            } catch (e: Exception){
                _response.value = "Failure: ${e.message}"
            }

diff --git a/...Starter/app/src/main/java/com/example/android/marsrealestate/overview/PhotoGridAdapter.kt b/...Starter/app/src/main/java/com/example/android/marsrealestate/overview/PhotoGridAdapter.kt
@@ -17,4 +17,43 @@
 
 package com.example.android.marsrealestate.overview
 
+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.marsrealestate.databinding.GridViewItemBinding
+import com.example.android.marsrealestate.network.MarsProperty
+import com.example.android.marsrealestate.overview.PhotoGridAdapter.MarsPropertyViewHolder.Companion.from
 
+class PhotoGridAdapter : ListAdapter<MarsProperty,PhotoGridAdapter.MarsPropertyViewHolder>(DiffCallback) {
+    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): PhotoGridAdapter.MarsPropertyViewHolder {
+        return from(parent)
+    }
+
+    override fun onBindViewHolder(holder: PhotoGridAdapter.MarsPropertyViewHolder, position: Int) {
+        holder.bind(getItem(position))
+    }
+
+    class MarsPropertyViewHolder private constructor(private val binding: GridViewItemBinding) :
+        RecyclerView.ViewHolder(binding.root) {
+        fun bind(marsProperty: MarsProperty){
+            binding.property = marsProperty
+            binding.executePendingBindings()
+        }
+        companion object{
+            fun from(parent: ViewGroup) = MarsPropertyViewHolder(GridViewItemBinding.inflate(LayoutInflater.from(parent.context)))
+        }
+    }
+
+    companion object DiffCallback: DiffUtil.ItemCallback<MarsProperty>() {
+        override fun areItemsTheSame(oldItem: MarsProperty, newItem: MarsProperty): Boolean {
+            return oldItem == newItem
+        }
+
+        override fun areContentsTheSame(oldItem: MarsProperty, newItem: MarsProperty): Boolean {
+            return oldItem.id == newItem.id
+        }
+
+    }
+}
diff --git a/MarsRealEstate-Starter/app/src/main/res/layout/fragment_overview.xml b/MarsRealEstate-Starter/app/src/main/res/layout/fragment_overview.xml
@@ -22,6 +22,7 @@
     xmlns:tools="http://schemas.android.com/tools">
 
     <data>
+
         <variable
             name="viewModel"
             type="com.example.android.marsrealestate.overview.OverviewViewModel" />
@@ -31,14 +32,22 @@
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         tools:context="com.example.android.marsrealestate.MainActivity">
-        <TextView
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:text="@{viewModel.property.imgSrcUrl}"
+
+        <androidx.recyclerview.widget.RecyclerView
+            android:id="@+id/photos_grid"
+            android:layout_width="0dp"
+            android:layout_height="0dp"
+            android:clipToPadding="false"
+            android:padding="6dp"
+            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:layout_constraintTop_toTopOf="parent"
+            app:listData="@{viewModel.properties}"
+            app:spanCount="2"
+            tools:itemCount="16"
+            tools:listitem="@layout/grid_view_item" />
 
     </androidx.constraintlayout.widget.ConstraintLayout>
 </layout>
diff --git a/MarsRealEstate-Starter/app/src/main/res/layout/grid_view_item.xml b/MarsRealEstate-Starter/app/src/main/res/layout/grid_view_item.xml
@@ -23,8 +23,8 @@
 
     <data>
         <variable
-            name="viewModel"
-            type="com.example.android.marsrealestate.overview.OverviewViewModel" />
+            name="property"
+            type="com.example.android.marsrealestate.network.MarsProperty" />
     </data>
 
     <ImageView
@@ -34,6 +34,6 @@
         android:scaleType="centerCrop"
         android:adjustViewBounds="true"
         android:padding="2dp"
-        app:imageUrl="@{viewModel.property.imgSrcUrl}"
+        app:imageUrl="@{property.imgSrcUrl}"
         tools:src="@tools:sample/backgrounds/scenic"/>
 </layout>