Skip to content

Commit

Permalink
Boolti-241 style: scaleX 및 translationX 추가하여 티켓 비율 유지, Ticket clickab…
Browse files Browse the repository at this point in the history
…le 위치 변경하여 클릭 indicator 티켓 모양으로 표시되도록 변경
  • Loading branch information
mangbaam committed May 5, 2024
1 parent d340ea2 commit 0b8ae55
Show file tree
Hide file tree
Showing 2 changed files with 31 additions and 25 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
Expand All @@ -31,7 +33,7 @@ import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Color.Companion.Black
import androidx.compose.ui.graphics.Color.Companion.White
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.layout.ContentScale
Expand All @@ -54,7 +56,6 @@ import com.nexters.boolti.presentation.extension.toPx
import com.nexters.boolti.presentation.theme.Grey30
import com.nexters.boolti.presentation.theme.Grey40
import com.nexters.boolti.presentation.theme.Grey50
import com.nexters.boolti.presentation.theme.Grey70
import com.nexters.boolti.presentation.theme.Grey80
import com.nexters.boolti.presentation.theme.Grey95
import com.nexters.boolti.presentation.theme.marginHorizontal
Expand All @@ -65,8 +66,25 @@ import com.nexters.boolti.presentation.util.rememberQrBitmapPainter
import java.time.LocalDateTime

@Composable
fun TicketContent(
fun Ticket(
modifier: Modifier = Modifier,
ticket: Ticket,
onClick: () -> Unit,
onClickQr: (data: String, ticketName: String) -> Unit,
) {
Card(
modifier = modifier,
shape = RectangleShape,
colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.background),
) {
TicketContent(ticket = ticket, onClick = onClick, onClickQr = onClickQr)
}
}

@Composable
private fun TicketContent(
ticket: Ticket,
onClick: () -> Unit,
onClickQr: (data: String, ticketName: String) -> Unit,
modifier: Modifier = Modifier,
) {
Expand Down Expand Up @@ -96,7 +114,8 @@ fun TicketContent(
width = 1.dp,
brush = Brush.verticalGradient(listOf(White.copy(.5f), White.copy(.2f))),
shape = ticketShape,
),
)
.clickable(onClick = onClick),
) {
// 배경 블러된 이미지
AsyncImage(
Expand Down Expand Up @@ -189,7 +208,9 @@ private fun Title(
verticalAlignment = Alignment.CenterVertically,
) {
Icon(
modifier = Modifier.padding(end = 4.dp).size(20.dp),
modifier = Modifier
.padding(end = 4.dp)
.size(20.dp),
painter = painterResource(R.drawable.ic_logo),
tint = Grey80,
contentDescription = null,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
package com.nexters.boolti.presentation.screen.ticket

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
Expand All @@ -22,13 +21,11 @@ import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.unit.dp
import androidx.compose.ui.util.lerp
import androidx.hilt.navigation.compose.hiltViewModel
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import com.nexters.boolti.domain.model.Ticket
import com.nexters.boolti.presentation.component.BtCircularProgressIndicator
import com.nexters.boolti.presentation.component.CenterAlignedHorizontalPager
import kotlin.math.absoluteValue
Expand Down Expand Up @@ -113,10 +110,13 @@ private fun TicketNotEmptyScreen(
stop = scaleSizeRatio,
fraction = pageOffset.absoluteValue.coerceIn(0f, 1f),
).let {
scaleX = it
scaleY = it
val sign = if (pageOffset > 0) 1 else -1
translationX = sign * (screenWidth - size.width) * (1 - it) * 3
}
}
.clickable { onClickTicket(ticket.ticketId) },
},
onClick = { onClickTicket(ticket.ticketId) },
ticket = ticket,
onClickQr = onClickQr,
)
Expand All @@ -136,18 +136,3 @@ private fun TicketNotEmptyScreen(
}
}
}

@Composable
private fun Ticket(
modifier: Modifier = Modifier,
ticket: Ticket,
onClickQr: (data: String, ticketName: String) -> Unit,
) {
Card(
modifier = modifier,
shape = RectangleShape,
colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.background),
) {
TicketContent(ticket = ticket, onClickQr = onClickQr)
}
}

0 comments on commit 0b8ae55

Please sign in to comment.