Fix/#912 행사 목록 스크롤 시 버벅거림

android/2023-emmsale/app/build.gradle.kts

@@ -127,6 +127,7 @@ dependencies {
 
     // Glide
     implementation("com.github.bumptech.glide:glide:4.15.1")
+    implementation("com.github.bumptech.glide:recyclerview-integration:4.15.1")
 
     // SwipeRefresh
     implementation("androidx.swiperefreshlayout:swiperefreshlayout:1.1.0")

android/2023-emmsale/app/src/main/java/com/emmsale/presentation/ui/competitionList/CompetitionFragment.kt

@@ -14,9 +14,9 @@ import com.emmsale.presentation.common.extension.getSerializableExtraCompat
 import com.emmsale.presentation.common.views.FilterTag
 import com.emmsale.presentation.common.views.filterChipOf
 import com.emmsale.presentation.ui.competitionFilter.CompetitionFilterActivity
-import com.emmsale.presentation.ui.competitionList.recyclerView.CompetitionRecyclerViewAdapter
 import com.emmsale.presentation.ui.competitionList.uiState.CompetitionSelectedFilteringDateOptionUiState
 import com.emmsale.presentation.ui.competitionList.uiState.CompetitionSelectedFilteringOptionUiState
+import com.emmsale.presentation.ui.conferenceList.recyclerView.EventRecyclerViewAdapter
 import com.emmsale.presentation.ui.eventDetail.EventDetailActivity
 import dagger.hilt.android.AndroidEntryPoint
 import java.time.LocalDate
@@ -26,8 +26,12 @@ class CompetitionFragment :
     BaseFragment<FragmentCompetitionBinding>(R.layout.fragment_competition) {
 
     private val viewModel: CompetitionViewModel by viewModels()
-    private val eventAdapter: CompetitionRecyclerViewAdapter by lazy {
-        CompetitionRecyclerViewAdapter(::navigateToEventDetail)
+    private val eventAdapter: EventRecyclerViewAdapter by lazy {
+        EventRecyclerViewAdapter(
+            fragment = this,
+            onClickConference = ::navigateToEventDetail,
+            onPreloaderReady = { binding.rvEvents.addOnScrollListener(it) },
+        )
     }
     private val filterActivityLauncher =
         registerForActivityResult(StartActivityForResult()) { result ->

android/2023-emmsale/app/src/main/java/com/emmsale/presentation/ui/conferenceList/ConferenceFragment.kt

@@ -14,7 +14,7 @@ import com.emmsale.presentation.common.extension.getSerializableExtraCompat
 import com.emmsale.presentation.common.views.FilterTag
 import com.emmsale.presentation.common.views.filterChipOf
 import com.emmsale.presentation.ui.conferenceFilter.ConferenceFilterActivity
-import com.emmsale.presentation.ui.conferenceList.recyclerView.ConferenceRecyclerViewAdapter
+import com.emmsale.presentation.ui.conferenceList.recyclerView.EventRecyclerViewAdapter
 import com.emmsale.presentation.ui.conferenceList.uiState.ConferenceSelectedFilteringDateOptionUiState
 import com.emmsale.presentation.ui.conferenceList.uiState.ConferenceSelectedFilteringOptionUiState
 import com.emmsale.presentation.ui.eventDetail.EventDetailActivity
@@ -25,7 +25,13 @@ import java.time.LocalDate
 class ConferenceFragment : BaseFragment<FragmentConferenceBinding>(R.layout.fragment_conference) {
 
     private val viewModel: ConferenceViewModel by viewModels()
-    private val eventAdapter by lazy { ConferenceRecyclerViewAdapter(::navigateToEventDetail) }
+    private val eventAdapter: EventRecyclerViewAdapter by lazy {
+        EventRecyclerViewAdapter(
+            fragment = this,
+            onClickConference = ::navigateToEventDetail,
+            onPreloaderReady = { binding.rvEvents.addOnScrollListener(it) },
+        )
+    }
     private val filterActivityLauncher =
         registerForActivityResult(StartActivityForResult()) { result ->
             if (result == null || result.resultCode != RESULT_OK) return@registerForActivityResult

android/2023-emmsale/app/src/main/java/com/emmsale/presentation/ui/conferenceList/recyclerView/EventRecyclerViewAdapter.kt

@@ -0,0 +1,62 @@
+package com.emmsale.presentation.ui.conferenceList.recyclerView
+
+import android.graphics.drawable.Drawable
+import android.view.ViewGroup
+import androidx.fragment.app.Fragment
+import androidx.recyclerview.widget.ListAdapter
+import com.bumptech.glide.Glide
+import com.bumptech.glide.ListPreloader.PreloadModelProvider
+import com.bumptech.glide.RequestBuilder
+import com.bumptech.glide.RequestManager
+import com.bumptech.glide.integration.recyclerview.RecyclerViewPreloader
+import com.bumptech.glide.load.resource.bitmap.CenterCrop
+import com.bumptech.glide.load.resource.bitmap.RoundedCorners
+import com.bumptech.glide.util.ViewPreloadSizeProvider
+import com.emmsale.data.model.Event
+import com.emmsale.presentation.common.extension.dp
+
+class EventRecyclerViewAdapter(
+    private val fragment: Fragment,
+    private val onClickConference: (Event) -> Unit,
+    private val onPreloaderReady: (preloader: RecyclerViewPreloader<Event>) -> Unit,
+) : ListAdapter<Event, EventViewHolder>(EventDiffUtil), PreloadModelProvider<Event> {
+
+    private var isFirstPreloader: Boolean = true
+
+    private val requestManager: RequestManager = Glide.with(fragment)
+
+    override fun onCreateViewHolder(
+        parent: ViewGroup,
+        viewType: Int,
+    ): EventViewHolder = EventViewHolder(
+        parent = parent,
+        onClickConference = onClickConference,
+        onEventPosterPreDraw = { view ->
+            if (isFirstPreloader) {
+                isFirstPreloader = false
+                val preloader = RecyclerViewPreloader(
+                    fragment,
+                    this,
+                    ViewPreloadSizeProvider(view),
+                    MAX_PRELOAD,
+                )
+                onPreloaderReady(preloader)
+            }
+        },
+    )
+
+    override fun onBindViewHolder(holder: EventViewHolder, position: Int) {
+        holder.bind(getItem(position))
+    }
+
+    override fun getPreloadItems(position: Int): MutableList<Event> =
+        mutableListOf(getItem(position))
+
+    override fun getPreloadRequestBuilder(event: Event): RequestBuilder<Drawable> = requestManager
+        .load(event.posterImageUrl)
+        .transform(CenterCrop(), RoundedCorners(15.dp))
+
+    companion object {
+        private const val MAX_PRELOAD = 8
+    }
+}

android/2023-emmsale/app/src/main/java/com/emmsale/presentation/ui/conferenceList/recyclerView/ConferenceViewHolder.kt → android/2023-emmsale/app/src/main/java/com/emmsale/presentation/ui/conferenceList/recyclerView/EventViewHolder.kt

@@ -1,22 +1,26 @@
 package com.emmsale.presentation.ui.conferenceList.recyclerView
 
 import android.view.LayoutInflater
+import android.view.View
 import android.view.ViewGroup
+import androidx.core.view.doOnPreDraw
 import androidx.recyclerview.widget.RecyclerView.ViewHolder
 import com.emmsale.R
 import com.emmsale.data.model.Event
-import com.emmsale.databinding.ItemConferenceBinding
+import com.emmsale.databinding.ItemEventBinding
 
-class ConferenceViewHolder(
+class EventViewHolder(
     parent: ViewGroup,
     onClickConference: (Event) -> Unit,
+    onEventPosterPreDraw: (View) -> Unit,
 ) : ViewHolder(
-    LayoutInflater.from(parent.context).inflate(R.layout.item_conference, parent, false),
+    LayoutInflater.from(parent.context).inflate(R.layout.item_event, parent, false),
 ) {
-    private val binding = ItemConferenceBinding.bind(itemView)
+    private val binding = ItemEventBinding.bind(itemView)
 
     init {
         binding.onClickConference = onClickConference
+        binding.ivEventPoster.doOnPreDraw { onEventPosterPreDraw(it) }
     }
 
     fun bind(event: Event) {

android/2023-emmsale/app/src/main/java/com/emmsale/presentation/ui/eventSearch/EventSearchActivity.kt

@@ -5,7 +5,6 @@ import android.content.Intent
 import android.os.Bundle
 import androidx.activity.viewModels
 import androidx.appcompat.app.AppCompatActivity
-import androidx.recyclerview.widget.DividerItemDecoration
 import com.emmsale.R
 import com.emmsale.databinding.ActivityEventSearchBinding
 import com.emmsale.presentation.common.views.ConfirmDialog
@@ -50,12 +49,7 @@ class EventSearchActivity : AppCompatActivity() {
     }
 
     private fun setupSearchResultRecyclerView() {
-        with(binding.rvEventSearchResult) {
-            adapter = eventSearchAdapter
-            addItemDecoration(
-                DividerItemDecoration(this@EventSearchActivity, DividerItemDecoration.VERTICAL),
-            )
-        }
+        binding.rvEventSearchResult.adapter = eventSearchAdapter
     }
 
     private fun setupSearchHistoryRecyclerView() {

android/2023-emmsale/app/src/main/java/com/emmsale/presentation/ui/eventSearch/recyclerView/eventSearch/EventSearchViewHolder.kt

@@ -5,15 +5,15 @@ import android.view.ViewGroup
 import androidx.recyclerview.widget.RecyclerView
 import com.emmsale.R
 import com.emmsale.data.model.Event
-import com.emmsale.databinding.ItemConferenceBinding
+import com.emmsale.databinding.ItemEventBinding
 
 class EventSearchViewHolder(
     parent: ViewGroup,
     onEventClick: (event: Event) -> Unit,
 ) : RecyclerView.ViewHolder(
-    LayoutInflater.from(parent.context).inflate(R.layout.item_conference, parent, false),
+    LayoutInflater.from(parent.context).inflate(R.layout.item_event, parent, false),
 ) {
-    private val binding = ItemConferenceBinding.bind(itemView)
+    private val binding = ItemEventBinding.bind(itemView)
 
     init {
         binding.onClickConference = onEventClick

android/2023-emmsale/app/src/main/res/layout/activity_event_search.xml

@@ -146,7 +146,7 @@
             app:layout_constraintTop_toBottomOf="@id/divider"
             app:spanCount="@integer/event_search_column_size"
             app:visible="@{!etEventSearch.text.toString().isBlank()}"
-            tools:listitem="@layout/item_conference"
+            tools:listitem="@layout/item_event"
             tools:visibility="gone" />
 
         <com.emmsale.presentation.common.views.NoContentView

android/2023-emmsale/app/src/main/res/layout/fragment_conference.xml

@@ -118,7 +118,7 @@
                 app:layout_constraintTop_toBottomOf="@+id/sv_filters"
                 app:spanCount="@integer/event_column_size"
                 tools:itemCount="5"
-                tools:listitem="@layout/item_conference" />
+                tools:listitem="@layout/item_event" />
 
             <com.google.android.material.floatingactionbutton.FloatingActionButton
                 android:id="@+id/fab_scroll_top"

android/2023-emmsale/app/src/main/res/layout/fragment_scrapped_event.xml

@@ -72,7 +72,7 @@
                     app:spanCount="@integer/event_column_size"
                     tools:background="@drawable/bg_event_recyclerview"
                     tools:itemCount="2"
-                    tools:listitem="@layout/item_conference" />
+                    tools:listitem="@layout/item_event" />
 
                 <com.google.android.material.floatingactionbutton.FloatingActionButton
                     android:id="@+id/fab_scroll_top"