[Feat] TimeTagSpinner Compose 마이그레이션 #10
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,185 @@ | ||
| package com.daedan.festabook.presentation.placeMap.timeTagSpinner.component | ||
|
|
||
| import androidx.compose.foundation.background | ||
| import androidx.compose.foundation.border | ||
| import androidx.compose.foundation.clickable | ||
| import androidx.compose.foundation.interaction.MutableInteractionSource | ||
| import androidx.compose.foundation.layout.Arrangement | ||
| import androidx.compose.foundation.layout.Row | ||
| import androidx.compose.foundation.layout.fillMaxWidth | ||
| import androidx.compose.foundation.layout.height | ||
| import androidx.compose.foundation.layout.padding | ||
| import androidx.compose.foundation.layout.width | ||
| import androidx.compose.foundation.layout.wrapContentSize | ||
| import androidx.compose.material3.DropdownMenu | ||
| import androidx.compose.material3.DropdownMenuItem | ||
| import androidx.compose.material3.ExperimentalMaterial3Api | ||
| import androidx.compose.material3.ExposedDropdownMenuBox | ||
| import androidx.compose.material3.ExposedDropdownMenuBoxScope | ||
| import androidx.compose.material3.Icon | ||
| import androidx.compose.material3.MenuAnchorType | ||
| import androidx.compose.material3.Text | ||
| import androidx.compose.material3.TopAppBarDefaults | ||
| import androidx.compose.material3.ripple | ||
| import androidx.compose.runtime.Composable | ||
| import androidx.compose.runtime.getValue | ||
| import androidx.compose.runtime.mutableStateOf | ||
| import androidx.compose.runtime.remember | ||
| import androidx.compose.runtime.rememberCoroutineScope | ||
| import androidx.compose.runtime.setValue | ||
| import androidx.compose.ui.Alignment | ||
| import androidx.compose.ui.Modifier | ||
| import androidx.compose.ui.graphics.Color | ||
| import androidx.compose.ui.layout.onGloballyPositioned | ||
| import androidx.compose.ui.platform.LocalDensity | ||
| import androidx.compose.ui.res.painterResource | ||
| import androidx.compose.ui.tooling.preview.Preview | ||
| import androidx.compose.ui.unit.DpOffset | ||
| import androidx.compose.ui.unit.IntSize | ||
| import androidx.compose.ui.unit.dp | ||
| import com.daedan.festabook.R | ||
| import com.daedan.festabook.domain.model.TimeTag | ||
| import com.daedan.festabook.presentation.theme.FestabookColor | ||
| import com.daedan.festabook.presentation.theme.FestabookTheme | ||
| import com.daedan.festabook.presentation.theme.FestabookTypography | ||
| import com.daedan.festabook.presentation.theme.festabookShapes | ||
| import com.daedan.festabook.presentation.theme.festabookSpacing | ||
| import kotlinx.coroutines.delay | ||
| import kotlinx.coroutines.launch | ||
|
|
||
| @OptIn(ExperimentalMaterial3Api::class) | ||
| @Composable | ||
| fun TimeTagMenu( | ||
| initialTitle: String, | ||
| timeTags: List<TimeTag>, | ||
| modifier: Modifier = Modifier, | ||
| onTimeTagClick: (TimeTag) -> Unit = {}, | ||
| ) { | ||
| var title by remember { mutableStateOf(initialTitle) } | ||
|
||
| var expanded by remember { mutableStateOf(false) } | ||
| var dropdownWidth by remember { mutableStateOf(IntSize.Zero) } | ||
| val density = LocalDensity.current | ||
| val scope = rememberCoroutineScope() | ||
|
|
||
| Row( | ||
| modifier = modifier.fillMaxWidth(), | ||
| ) { | ||
| ExposedDropdownMenuBox( | ||
| modifier = | ||
| Modifier | ||
| .wrapContentSize() | ||
| .background(Color.Transparent), | ||
| expanded = expanded, | ||
| onExpandedChange = { expanded = !expanded }, | ||
| ) { | ||
| TimeTagButton( | ||
| title = title, | ||
| onSizeDetermined = { dropdownWidth = it }, | ||
| ) | ||
| DropdownMenu( | ||
|
Contributor
There was a problem hiding this comment. 오 compose에서는 dropdown으로 바로 만들 수 있네요?! 👀 |
||
| expanded = expanded, | ||
| onDismissRequest = { expanded = false }, | ||
| offset = DpOffset(x = 0.dp, y = festabookSpacing.paddingBody2), | ||
| modifier = | ||
| Modifier | ||
| .width( | ||
| with(density) { dropdownWidth.width.toDp() }, | ||
| ).background(color = FestabookColor.white) | ||
| .border( | ||
| width = 2.dp, | ||
| color = FestabookColor.gray300, | ||
| shape = festabookShapes.radius2, | ||
| ), | ||
|
||
| shape = festabookShapes.radius2, | ||
| ) { | ||
| timeTags.forEach { item -> | ||
| DropdownMenuItem( | ||
| text = { | ||
| Text( | ||
| text = item.name, | ||
| style = FestabookTypography.bodyLarge, | ||
|
||
| ) | ||
| }, | ||
| onClick = { | ||
| scope.launch { | ||
| title = item.name | ||
| onTimeTagClick(item) | ||
| waitForRipple { | ||
| expanded = false | ||
| } | ||
| } | ||
| }, | ||
| ) | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @Composable | ||
| @OptIn(ExperimentalMaterial3Api::class) | ||
| private fun ExposedDropdownMenuBoxScope.TimeTagButton( | ||
| title: String, | ||
| onSizeDetermined: (IntSize) -> Unit, | ||
| ) { | ||
| Row( | ||
| modifier = | ||
| Modifier | ||
| .width(140.dp) | ||
| .onGloballyPositioned { coordinates -> | ||
| onSizeDetermined(coordinates.size) | ||
| }.menuAnchor( | ||
| type = MenuAnchorType.PrimaryNotEditable, | ||
| enabled = true, | ||
| ).height(TopAppBarDefaults.MediumAppBarCollapsedHeight) // Festabook TopAppbar Size | ||
| .background(Color.Transparent) | ||
| .clickable( | ||
| onClick = {}, | ||
| interactionSource = remember { MutableInteractionSource() }, | ||
| indication = ripple(), | ||
| ), | ||
| verticalAlignment = Alignment.CenterVertically, | ||
| horizontalArrangement = Arrangement.SpaceBetween, | ||
| ) { | ||
| Text( | ||
| text = title, | ||
| style = FestabookTypography.displaySmall, | ||
|
||
| ) | ||
|
|
||
| Icon( | ||
| painter = painterResource(id = R.drawable.ic_chevron_down), | ||
| contentDescription = "드롭다운", | ||
|
||
| ) | ||
| } | ||
| } | ||
|
|
||
| private suspend inline fun waitForRipple( | ||
| timeMillis: Long = 100, | ||
| after: () -> Unit = {}, | ||
| ) { | ||
| delay(timeMillis) | ||
| after() | ||
| } | ||
|
Comment on lines
+155
to
+161
Contributor
There was a problem hiding this comment. 요친구 역할을 알 수 있을까요?(진짜 모름..)
Contributor
Author
There was a problem hiding this comment. delay를 걸어주지 않으면 TimeTag를 클릭했을 때 너무 빨리 사라져서 클릭 리플 효과가 발생하지 않더라구요 ! |
||
|
|
||
| @Composable | ||
| @Preview(showBackground = true) | ||
| private fun TimeTagMenuPreview() { | ||
| val timeTags = | ||
| listOf( | ||
| TimeTag(1, "1일차 오전"), | ||
| TimeTag(2, "오후"), | ||
| ) | ||
| var title by remember { mutableStateOf("1일차 오전") } | ||
| FestabookTheme { | ||
| TimeTagMenu( | ||
| initialTitle = title, | ||
| timeTags = timeTags, | ||
| modifier = | ||
| Modifier | ||
| .background(FestabookColor.white) | ||
| .padding(horizontal = festabookSpacing.paddingScreenGutter), | ||
| // Festabook Gutter | ||
| onTimeTagClick = { }, | ||
| ) | ||
| } | ||
| } | ||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.
isNotEmpty()를 써도 좋을 것 같아용Uh oh!
There was an error while loading. Please reload this page.
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.
collectAsStateWithLifecycle(viewLifecycleOwner)이렇게viewLifecycleOwner를 직접 명시해주는게 메모리 누수 측면에서 더 좋은가요?명시 안해주었을 때 어떤 상황에서 문제가 발생하나요?(단순 질문)
제 코드엔 안되어 있어서 적용하려구요!
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.
앗 코멘트 남기는걸 까먹었네요.
처음에는 fragment의 생명주기임을 명시하려고 했지만
viewLifecycleOwner와 LocalLifeCycleOwner.current가 동일한 인스턴스라서 그냥 제거했습니다. !