-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[FIX/#46] 탑앱바 컴포넌트 수정 #214
base: develop
Are you sure you want to change the base?
Changes from 2 commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change | ||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
@@ -1,13 +1,15 @@ | ||||||||||||||||||||||||||||||||||||||||||||||
package com.spoony.spoony.core.designsystem.component.topappbar | ||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||
import androidx.compose.foundation.layout.RowScope | ||||||||||||||||||||||||||||||||||||||||||||||
import androidx.compose.foundation.background | ||||||||||||||||||||||||||||||||||||||||||||||
import androidx.compose.foundation.layout.Arrangement | ||||||||||||||||||||||||||||||||||||||||||||||
import androidx.compose.foundation.layout.Row | ||||||||||||||||||||||||||||||||||||||||||||||
import androidx.compose.foundation.layout.fillMaxWidth | ||||||||||||||||||||||||||||||||||||||||||||||
import androidx.compose.foundation.layout.padding | ||||||||||||||||||||||||||||||||||||||||||||||
import androidx.compose.foundation.layout.size | ||||||||||||||||||||||||||||||||||||||||||||||
import androidx.compose.material3.CenterAlignedTopAppBar | ||||||||||||||||||||||||||||||||||||||||||||||
import androidx.compose.material3.ExperimentalMaterial3Api | ||||||||||||||||||||||||||||||||||||||||||||||
import androidx.compose.foundation.layout.statusBarsPadding | ||||||||||||||||||||||||||||||||||||||||||||||
import androidx.compose.material3.Icon | ||||||||||||||||||||||||||||||||||||||||||||||
import androidx.compose.material3.IconButton | ||||||||||||||||||||||||||||||||||||||||||||||
import androidx.compose.material3.TopAppBarDefaults | ||||||||||||||||||||||||||||||||||||||||||||||
import androidx.compose.runtime.Composable | ||||||||||||||||||||||||||||||||||||||||||||||
import androidx.compose.ui.Alignment | ||||||||||||||||||||||||||||||||||||||||||||||
import androidx.compose.ui.Modifier | ||||||||||||||||||||||||||||||||||||||||||||||
import androidx.compose.ui.graphics.Color | ||||||||||||||||||||||||||||||||||||||||||||||
import androidx.compose.ui.graphics.vector.ImageVector | ||||||||||||||||||||||||||||||||||||||||||||||
|
@@ -16,40 +18,46 @@ import androidx.compose.ui.tooling.preview.Preview | |||||||||||||||||||||||||||||||||||||||||||||
import androidx.compose.ui.unit.dp | ||||||||||||||||||||||||||||||||||||||||||||||
import com.spoony.spoony.R | ||||||||||||||||||||||||||||||||||||||||||||||
import com.spoony.spoony.core.designsystem.theme.SpoonyAndroidTheme | ||||||||||||||||||||||||||||||||||||||||||||||
import com.spoony.spoony.core.util.extension.noRippleClickable | ||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||
@OptIn(ExperimentalMaterial3Api::class) | ||||||||||||||||||||||||||||||||||||||||||||||
@Composable | ||||||||||||||||||||||||||||||||||||||||||||||
fun SpoonyBasicTopAppBar( | ||||||||||||||||||||||||||||||||||||||||||||||
modifier: Modifier = Modifier, | ||||||||||||||||||||||||||||||||||||||||||||||
showBackButton: Boolean = false, | ||||||||||||||||||||||||||||||||||||||||||||||
backgroundColor: Color = SpoonyAndroidTheme.colors.white, | ||||||||||||||||||||||||||||||||||||||||||||||
onBackButtonClick: () -> Unit = {}, | ||||||||||||||||||||||||||||||||||||||||||||||
actions: @Composable RowScope.() -> Unit = {}, | ||||||||||||||||||||||||||||||||||||||||||||||
actions: @Composable () -> Unit = {}, | ||||||||||||||||||||||||||||||||||||||||||||||
content: @Composable () -> Unit = {} | ||||||||||||||||||||||||||||||||||||||||||||||
) { | ||||||||||||||||||||||||||||||||||||||||||||||
CenterAlignedTopAppBar( | ||||||||||||||||||||||||||||||||||||||||||||||
title = content, | ||||||||||||||||||||||||||||||||||||||||||||||
modifier = modifier, | ||||||||||||||||||||||||||||||||||||||||||||||
navigationIcon = { | ||||||||||||||||||||||||||||||||||||||||||||||
Row( | ||||||||||||||||||||||||||||||||||||||||||||||
verticalAlignment = Alignment.CenterVertically, | ||||||||||||||||||||||||||||||||||||||||||||||
horizontalArrangement = Arrangement.SpaceBetween, | ||||||||||||||||||||||||||||||||||||||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. p2) SpaceBetween의 역할이 여기서 무엇인가요? |
||||||||||||||||||||||||||||||||||||||||||||||
modifier = modifier | ||||||||||||||||||||||||||||||||||||||||||||||
.background(backgroundColor) | ||||||||||||||||||||||||||||||||||||||||||||||
.fillMaxWidth() | ||||||||||||||||||||||||||||||||||||||||||||||
.padding(vertical = 12.dp) | ||||||||||||||||||||||||||||||||||||||||||||||
.statusBarsPadding() | ||||||||||||||||||||||||||||||||||||||||||||||
) { | ||||||||||||||||||||||||||||||||||||||||||||||
Row( | ||||||||||||||||||||||||||||||||||||||||||||||
verticalAlignment = Alignment.CenterVertically, | ||||||||||||||||||||||||||||||||||||||||||||||
modifier = Modifier | ||||||||||||||||||||||||||||||||||||||||||||||
.weight(1f) | ||||||||||||||||||||||||||||||||||||||||||||||
) { | ||||||||||||||||||||||||||||||||||||||||||||||
if (showBackButton) { | ||||||||||||||||||||||||||||||||||||||||||||||
IconButton( | ||||||||||||||||||||||||||||||||||||||||||||||
onClick = onBackButtonClick | ||||||||||||||||||||||||||||||||||||||||||||||
) { | ||||||||||||||||||||||||||||||||||||||||||||||
Icon( | ||||||||||||||||||||||||||||||||||||||||||||||
imageVector = ImageVector.vectorResource(R.drawable.ic_arrow_left_24), | ||||||||||||||||||||||||||||||||||||||||||||||
contentDescription = null, | ||||||||||||||||||||||||||||||||||||||||||||||
tint = SpoonyAndroidTheme.colors.gray700, | ||||||||||||||||||||||||||||||||||||||||||||||
modifier = Modifier | ||||||||||||||||||||||||||||||||||||||||||||||
.size(32.dp) | ||||||||||||||||||||||||||||||||||||||||||||||
) | ||||||||||||||||||||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||||||||||||||||||||
Icon( | ||||||||||||||||||||||||||||||||||||||||||||||
imageVector = ImageVector.vectorResource(R.drawable.ic_arrow_left_24), | ||||||||||||||||||||||||||||||||||||||||||||||
contentDescription = null, | ||||||||||||||||||||||||||||||||||||||||||||||
tint = SpoonyAndroidTheme.colors.gray700, | ||||||||||||||||||||||||||||||||||||||||||||||
modifier = Modifier | ||||||||||||||||||||||||||||||||||||||||||||||
.size(32.dp) | ||||||||||||||||||||||||||||||||||||||||||||||
.noRippleClickable(onBackButtonClick) | ||||||||||||||||||||||||||||||||||||||||||||||
.padding(start = 12.dp) | ||||||||||||||||||||||||||||||||||||||||||||||
) | ||||||||||||||||||||||||||||||||||||||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. P1) 현재 코드에서는 터치영역이 잘못 할당 되어있는것 같고, 아이콘 크기도 피그마보다 작아진 것 같습니다.
Suggested change
위와 같이 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 와 터치영역 놓칠뻔했네요 꼼꼼한 감사합니다😊😊 말씀하신대로 아이콘 크기가 24.dp, 터치 영역은 32.dp가 맞아요..!! 그리고 확인해보니 아이콘 크기는 피그마에 있던 그대로 24.dp로 적용되어 있습니다!! 아마 프리뷰라서 작아보였던 것이 아닐까 싶네요?? IconButton이 Icon을 Box로 감싼 구조인거 처음 알았어요ㅎㅎ 사실 개인적으로는 사용하지 않아도 구현이 가능한 컴포저블 함수들은 최대한 쓰지 않는 것을 좋아하는데 이 경우 제안해주신대로 Box로 감싸는 것이 가독성 측면에서 이점이 커서 이렇게 수정하도록 하겠습니다!! There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 아 그리고 IconButton 내부 코드 보다가 발견했는데요 Material3 문서를 보시면 아이콘 버튼의 터치 영역은 최소 48.dp여야 해서 IconButton도 최소크기가 48.dp로 되어있더라구요ㅎㅎ 알게 된 점 1: 우리 서비스는 Material Design을 따르지 않고 있어요 *TextButton도 최소크기 있네요 디자인과 정확하게 일치하게 쓰려면 이것도 잘 확인하고 써야겠어요 여러분 모두 이거 참고하기!!! There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 맞아요 |
||||||||||||||||||||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||||||||||||||||||||
}, | ||||||||||||||||||||||||||||||||||||||||||||||
actions = actions, | ||||||||||||||||||||||||||||||||||||||||||||||
colors = TopAppBarDefaults.centerAlignedTopAppBarColors( | ||||||||||||||||||||||||||||||||||||||||||||||
containerColor = backgroundColor | ||||||||||||||||||||||||||||||||||||||||||||||
) | ||||||||||||||||||||||||||||||||||||||||||||||
) | ||||||||||||||||||||||||||||||||||||||||||||||
content() | ||||||||||||||||||||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||||||||||||||||||||
actions() | ||||||||||||||||||||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||
@Preview | ||||||||||||||||||||||||||||||||||||||||||||||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
p4) RowScop를 뺀 이유가 있나요?