fix : 공연 상세 이미지 위치 및 scale type 변경

Nexters · Oct 15, 2024 · 818dd5b · 818dd5b
1 parent 77c57a1
commit 818dd5b
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 41 deletions.
diff --git a/presentation/src/main/java/com/nexters/boolti/presentation/screen/showdetail/Indicator.kt b/presentation/src/main/java/com/nexters/boolti/presentation/screen/showdetail/Indicator.kt
@@ -14,12 +14,10 @@ import androidx.compose.ui.unit.dp
 
 @Composable
 fun Indicator(
-    modifier: Modifier = Modifier,
     position: Int,
     size: Int,
+    modifier: Modifier = Modifier,
 ) {
-    if (size == 1) return
-
     Row(modifier = modifier) {
         (0 until size).forEach { index ->
             val opacity = if (index == position) 1f else 0.5f

diff --git a/...ation/src/main/java/com/nexters/boolti/presentation/screen/showdetail/ShowImagesScreen.kt b/...ation/src/main/java/com/nexters/boolti/presentation/screen/showdetail/ShowImagesScreen.kt
@@ -1,25 +1,18 @@
 package com.nexters.boolti.presentation.screen.showdetail
 
-import androidx.compose.foundation.ExperimentalFoundationApi
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.pager.HorizontalPager
 import androidx.compose.foundation.pager.rememberPagerState
-import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material3.Scaffold
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
@@ -29,7 +22,6 @@ import com.nexters.boolti.presentation.component.BtCloseableAppBar
 import net.engawapg.lib.zoomable.rememberZoomState
 import net.engawapg.lib.zoomable.zoomable
 
-@OptIn(ExperimentalFoundationApi::class)
 @Composable
 fun ShowImagesScreen(
     index: Int,
@@ -49,31 +41,40 @@ fun ShowImagesScreen(
     ) { innerPadding ->
         Column(
             modifier = Modifier
-                .fillMaxSize()
                 .padding(innerPadding)
-                .padding(top = 56.dp),
+                .fillMaxSize(),
             horizontalAlignment = Alignment.CenterHorizontally,
-            verticalArrangement = Arrangement.SpaceBetween,
         ) {
-            HorizontalPager(
-                modifier = Modifier,
-                state = pageState,
-                key = { it },
+            Box(
+                modifier = Modifier.weight(1f),
+                contentAlignment = Alignment.Center,
             ) {
-                AsyncImage(
-                    modifier = Modifier
-                        .fillMaxWidth()
-                        .zoomable(rememberZoomState()),
-                    model = uiState.showDetail.images[it].originImage,
-                    contentDescription = null,
-                    contentScale = ContentScale.FillWidth,
-                )
+                HorizontalPager(
+                    state = pageState,
+                    key = { it },
+                ) {
+                    AsyncImage(
+                        modifier = Modifier
+                            .fillMaxSize()
+                            .zoomable(rememberZoomState()),
+                        model = uiState.showDetail.images[it].originImage,
+                        contentDescription = null,
+                        contentScale = ContentScale.Fit,
+                    )
+                }
+            }
+
+            Box(
+                modifier = Modifier.height(47.dp), // indicator 높이가 7이라...
+                contentAlignment = Alignment.Center
+            ) {
+                if (pageState.pageCount > 1) {
+                    Indicator(
+                        position = pageState.currentPage,
+                        size = pageState.pageCount,
+                    )
+                }
             }
-            Indicator(
-                modifier = Modifier.padding(bottom = 20.dp),
-                position = pageState.currentPage,
-                size = pageState.pageCount,
-            )
         }
     }
 }
diff --git a/...ntation/src/main/java/com/nexters/boolti/presentation/screen/showdetail/SwipeableImage.kt b/...ntation/src/main/java/com/nexters/boolti/presentation/screen/showdetail/SwipeableImage.kt
@@ -1,16 +1,13 @@
 package com.nexters.boolti.presentation.screen.showdetail
 
-import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.pager.HorizontalPager
 import androidx.compose.foundation.pager.rememberPagerState
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -27,7 +24,6 @@ import coil.compose.AsyncImage
 import com.nexters.boolti.presentation.constants.posterRatio
 import com.nexters.boolti.presentation.theme.Grey95
 
-@OptIn(ExperimentalFoundationApi::class)
 @Composable
 fun SwipeableImage(
     models: List<String>,
@@ -72,10 +68,12 @@ fun SwipeableImage(
                     )
                 )
         )
-        Indicator(
-            modifier = Modifier.padding(bottom = 14.dp),
-            position = pageState.currentPage,
-            size = models.size
-        )
+        if (models.size > 1) {
+            Indicator(
+                modifier = Modifier.padding(bottom = 14.dp),
+                position = pageState.currentPage,
+                size = models.size
+            )
+        }
     }
 }