From deadb0aa1c7d148f7abec7c6fa32bcd02c31a4f3 Mon Sep 17 00:00:00 2001 From: SeongHoonC <108349655+SeongHoonC@users.noreply.github.com> Date: Sat, 10 Feb 2024 21:22:40 +0900 Subject: [PATCH] =?UTF-8?q?[AN/USER]=20feat:=20=EC=B6=95=EC=A0=9C=20?= =?UTF-8?q?=EB=AA=A9=EB=A1=9D=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=88=98?= =?UTF-8?q?=EC=A0=95(#698)=20(#701)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 뷰페이저 탭의 점 크기 줄이기 * feat: ForegroundPopularFestival 아이템 설명을 뷰페이저 밖으로 이동하고 사이즈 수정 * feat: 아이템 선택 시 해당 아이템에 맞는 정보가 화면에 불러와진다 * feat: 인기 축제 목록 넘기기 범위 확장 * refactor: offset 계산 로직을 함수 분리하여 가독성을 증가시킨다 * feat(FestivalList): 진행중 진행 예정 탭 가로 여백 추가 * chore: lint check --- .../festival/FestivalListPopularViewHolder.kt | 8 +- .../PopularFestivalViewPagerAdapter.kt | 51 +++++++++++-- .../PopularFestivalForegroundViewHolder.kt | 18 ----- .../src/main/res/drawable/ic_dot_default.xml | 2 +- .../src/main/res/drawable/ic_dot_selected.xml | 2 +- .../res/layout/item_festival_list_popular.xml | 76 +++++++++++++++++-- .../res/layout/item_festival_list_tab.xml | 1 + .../item_popular_festival_foreground.xml | 65 ++-------------- 8 files changed, 129 insertions(+), 94 deletions(-) diff --git a/android/festago/presentation/src/main/java/com/festago/festago/presentation/ui/home/festivallist/festival/FestivalListPopularViewHolder.kt b/android/festago/presentation/src/main/java/com/festago/festago/presentation/ui/home/festivallist/festival/FestivalListPopularViewHolder.kt index 919782c05..5fb89ed90 100644 --- a/android/festago/presentation/src/main/java/com/festago/festago/presentation/ui/home/festivallist/festival/FestivalListPopularViewHolder.kt +++ b/android/festago/presentation/src/main/java/com/festago/festago/presentation/ui/home/festivallist/festival/FestivalListPopularViewHolder.kt @@ -13,7 +13,11 @@ class FestivalListPopularViewHolder(val binding: ItemFestivalListPopularBinding) PopularFestivalViewPagerAdapter( foregroundViewPager = binding.vpPopularFestivalForeground, backgroundViewPager = binding.vpPopularFestivalBackground, - ) + ) { item -> + binding.item = item + binding.tvPopularFestivalArtistsName.text = + item.artists.joinToString(ARTIST_NAME_JOIN_SEPARATOR) { it.name } + } init { TabLayoutMediator( @@ -27,6 +31,8 @@ class FestivalListPopularViewHolder(val binding: ItemFestivalListPopularBinding) } companion object { + private const val ARTIST_NAME_JOIN_SEPARATOR = ", " + fun of(parent: ViewGroup): FestivalListPopularViewHolder { val binding = ItemFestivalListPopularBinding.inflate( LayoutInflater.from(parent.context), diff --git a/android/festago/presentation/src/main/java/com/festago/festago/presentation/ui/home/festivallist/popularfestival/PopularFestivalViewPagerAdapter.kt b/android/festago/presentation/src/main/java/com/festago/festago/presentation/ui/home/festivallist/popularfestival/PopularFestivalViewPagerAdapter.kt index 09e01fb91..792643f92 100644 --- a/android/festago/presentation/src/main/java/com/festago/festago/presentation/ui/home/festivallist/popularfestival/PopularFestivalViewPagerAdapter.kt +++ b/android/festago/presentation/src/main/java/com/festago/festago/presentation/ui/home/festivallist/popularfestival/PopularFestivalViewPagerAdapter.kt @@ -1,16 +1,20 @@ package com.festago.festago.presentation.ui.home.festivallist.popularfestival import android.content.res.Resources +import android.view.View import androidx.viewpager2.widget.ViewPager2 import com.festago.festago.presentation.ui.home.festivallist.popularfestival.background.PopularFestivalBackgroundAdapter import com.festago.festago.presentation.ui.home.festivallist.popularfestival.foreground.PopularFestivalForegroundAdapter import com.festago.festago.presentation.ui.home.festivallist.uistate.FestivalItemUiState +import kotlin.math.abs class PopularFestivalViewPagerAdapter( foregroundViewPager: ViewPager2, backgroundViewPager: ViewPager2, + private val onPopularFestivalSelected: (FestivalItemUiState) -> Unit, ) { + private val popularFestivals = mutableListOf() private val foregroundAdapter: PopularFestivalForegroundAdapter = PopularFestivalForegroundAdapter() private val backgroundAdapter: PopularFestivalBackgroundAdapter = @@ -32,6 +36,7 @@ class PopularFestivalViewPagerAdapter( override fun onPageSelected(position: Int) { super.onPageSelected(position) target.setCurrentItem(position, false) + onPopularFestivalSelected(popularFestivals[position]) } } viewpager.registerOnPageChangeCallback(onPageChangeCallback) @@ -39,27 +44,59 @@ class PopularFestivalViewPagerAdapter( private fun narrowSpaceViewPager(viewPager: ViewPager2) { viewPager.setPageTransformer { page, position -> - val offset = position * -(2 * dpToPx(OFFSET_BETWEEN_PAGES)) - page.translationX = offset + translateOffsetBetweenPages(position, page) + reduceUnselectedPagesScale(page, position) } } + private fun translateOffsetBetweenPages(position: Float, page: View) { + val screenWidth = Resources.getSystem().configuration.screenWidthDp + val offsetBetweenPages = screenWidth - IMAGE_SIZE - INTERVAL_IMAGE + val reducedDifference = IMAGE_SIZE - (IMAGE_SIZE * RATE_SELECT_BY_UNSELECT) + val offset = position * -dpToPx(offsetBetweenPages + reducedDifference * 0.5f) + page.translationX = offset + } + private fun dpToPx(dp: Float): Int { val density = Resources.getSystem().displayMetrics.density return (dp * density).toInt() } + private fun reduceUnselectedPagesScale(page: View, position: Float) { + page.movePivotTo(x = page.pivotX, y = MIDDLE_IMAGE_PIVOT) + if (position <= ALREADY_LOAD_POSITION_CONDITION) { + page.reduceScaleBy(position = position, rate = RATE_SELECT_BY_UNSELECT) + } + } + + private fun View.movePivotTo(x: Float, y: Float) { + pivotX = x + pivotY = y + } + + private fun View.reduceScaleBy(position: Float, rate: Float) { + val scaleFactor = rate.coerceAtLeast(1 - abs(position)) + scaleY = scaleFactor + scaleX = scaleFactor + } + private fun setOffscreenPagesLimit(viewPager: ViewPager2, limit: Int) { viewPager.offscreenPageLimit = limit } - fun submitList(popularFestivals: List) { - foregroundAdapter.submitList(popularFestivals) - backgroundAdapter.submitList(popularFestivals) + fun submitList(festivals: List) { + popularFestivals.clear() + popularFestivals.addAll(festivals) + foregroundAdapter.submitList(festivals) + backgroundAdapter.submitList(festivals) } companion object { - private const val PAGE_LIMIT = 3 - private const val OFFSET_BETWEEN_PAGES = 63.0f + private const val ALREADY_LOAD_POSITION_CONDITION = 2 + private const val RATE_SELECT_BY_UNSELECT = 0.81f + private const val PAGE_LIMIT = 4 + private const val IMAGE_SIZE = 220.0f + private const val INTERVAL_IMAGE = 24.0f + private const val MIDDLE_IMAGE_PIVOT = 360.0f } } diff --git a/android/festago/presentation/src/main/java/com/festago/festago/presentation/ui/home/festivallist/popularfestival/foreground/PopularFestivalForegroundViewHolder.kt b/android/festago/presentation/src/main/java/com/festago/festago/presentation/ui/home/festivallist/popularfestival/foreground/PopularFestivalForegroundViewHolder.kt index a59f2c000..c60b575d1 100644 --- a/android/festago/presentation/src/main/java/com/festago/festago/presentation/ui/home/festivallist/popularfestival/foreground/PopularFestivalForegroundViewHolder.kt +++ b/android/festago/presentation/src/main/java/com/festago/festago/presentation/ui/home/festivallist/popularfestival/foreground/PopularFestivalForegroundViewHolder.kt @@ -1,6 +1,5 @@ package com.festago.festago.presentation.ui.home.festivallist.popularfestival.foreground -import android.content.res.Resources import android.view.LayoutInflater import android.view.ViewGroup import androidx.recyclerview.widget.RecyclerView @@ -14,26 +13,9 @@ class PopularFestivalForegroundViewHolder( fun bind(item: FestivalItemUiState) { binding.item = item - binding.ivPopularFestivalImage.outlineProvider - binding.tvPopularFestivalArtistsName.text = - item.artists.joinToString(ARTIST_NAME_JOIN_SEPARATOR) { it.name } - setImageSizeFlexibleToScreenWidth() - } - - private fun setImageSizeFlexibleToScreenWidth() { - val imageSize = Resources.getSystem().configuration.screenWidthDp - MINUS_TO_IMAGE_SIZE - val density = Resources.getSystem().displayMetrics.density - - binding.ivPopularFestivalImage.layoutParams.apply { - this.width = (imageSize * density + ROUNDUP_CONDITION).toInt() - this.height = (imageSize * density + ROUNDUP_CONDITION).toInt() - } } companion object { - private const val MINUS_TO_IMAGE_SIZE = 160 - private const val ROUNDUP_CONDITION = 0.5f - private const val ARTIST_NAME_JOIN_SEPARATOR = ", " fun of(parent: ViewGroup): PopularFestivalForegroundViewHolder { val binding = ItemPopularFestivalForegroundBinding.inflate( diff --git a/android/festago/presentation/src/main/res/drawable/ic_dot_default.xml b/android/festago/presentation/src/main/res/drawable/ic_dot_default.xml index 4905cf54c..c980ed1d4 100644 --- a/android/festago/presentation/src/main/res/drawable/ic_dot_default.xml +++ b/android/festago/presentation/src/main/res/drawable/ic_dot_default.xml @@ -4,7 +4,7 @@ diff --git a/android/festago/presentation/src/main/res/drawable/ic_dot_selected.xml b/android/festago/presentation/src/main/res/drawable/ic_dot_selected.xml index 0cda1e925..28c930e22 100644 --- a/android/festago/presentation/src/main/res/drawable/ic_dot_selected.xml +++ b/android/festago/presentation/src/main/res/drawable/ic_dot_selected.xml @@ -4,7 +4,7 @@ diff --git a/android/festago/presentation/src/main/res/layout/item_festival_list_popular.xml b/android/festago/presentation/src/main/res/layout/item_festival_list_popular.xml index fc9364c08..402c70362 100644 --- a/android/festago/presentation/src/main/res/layout/item_festival_list_popular.xml +++ b/android/festago/presentation/src/main/res/layout/item_festival_list_popular.xml @@ -1,6 +1,16 @@ + xmlns:app="http://schemas.android.com/apk/res-auto" + xmlns:tools="http://schemas.android.com/tools"> + + + + + + + + + + + + + + + - - diff --git a/android/festago/presentation/src/main/res/layout/item_festival_list_tab.xml b/android/festago/presentation/src/main/res/layout/item_festival_list_tab.xml index 19a28b975..a32fee9a4 100644 --- a/android/festago/presentation/src/main/res/layout/item_festival_list_tab.xml +++ b/android/festago/presentation/src/main/res/layout/item_festival_list_tab.xml @@ -12,6 +12,7 @@ android:id="@+id/tlFestivalListTab" android:layout_width="match_parent" android:layout_height="48dp" + android:layout_marginHorizontal="16dp" android:background="@android:color/transparent" app:tabGravity="fill" app:tabIndicatorColor="@color/contents_gray_07" diff --git a/android/festago/presentation/src/main/res/layout/item_popular_festival_foreground.xml b/android/festago/presentation/src/main/res/layout/item_popular_festival_foreground.xml index bf7368a11..7b5bc2475 100644 --- a/android/festago/presentation/src/main/res/layout/item_popular_festival_foreground.xml +++ b/android/festago/presentation/src/main/res/layout/item_popular_festival_foreground.xml @@ -20,70 +20,19 @@ - - - - - - - - - - \ No newline at end of file +