ContentWithSwipeableBottomSheet()

#1 개요

BottomSheetScaffold()의 문제점을 개선한, 커스텀 컴포넌트 ContentWithSwipeableBottomSheet()를 구현한다 (게시글 맨 아래에 소스코드 있음).
 

#2 BottomSheetScaffold()

#2-1 개요

androidx.compose.material  |  API reference  |  Android Developers

말 그대로 Bottom쪽에 Swipe 가능한 Sheet를 보유한 Scaffold다.
 

#2-2 한계

(1) content 높이의 동적 조절 불가능
sheet에 있는 dragHandle을 swipe 할 수 있다. 하지만, sheet의 swipe 동작으로 content의 높이에 영향을 줄 수는 없다.
 
(2) nestedScroll 강제 적용
sheet에 적용된 nestedScroll 때문에, sheet를 Expanded 상태로 두어야 비로소 sheetContent를 스크롤할 수 있다.
 

#2-3 업그레이드

#2-2의 한계때문에 개발 중이던 앱을 만들 수 없었다. 그래서 BottomSheetScaffold()을 개선한 커스텀 컴포넌트를 만들었다. 이름은 ContentWithSwipeableBottomSheet()다. content를 감싸는 wrapper면서, bottomSheet를 보유했음을 표현한 이름이다.
 

#3 ContentWithSwipeableBottomSheet()

#3-1 완성된 모습 미리보기

ContentWithSwipeableBottomSheet()를 기반으로 만든 샘플 앱(#6)이다. swipe 동작으로 sheetContent 및 content 영역의 크기가 동적으로 변하는 모습 그리고 nestScroll이 없어 sheetContent를 스크롤할 수 있음을 확인할 수 있다.
 

#3-2 API (함수 인수 부분)

@OptIn(ExperimentalMaterial3Api::class, ExperimentalLayoutApi::class)
@Composable
fun ContentWithSwipeableBottomSheet(
    sheetContent: @Composable (() -> Unit),
    modifier: Modifier = Modifier,
    sheetState: ContentWithSwipeableBottomSheetState = rememberContentWithSwipeableBottomSheetState(),
    sheetExpandedAnchorOffset: Dp = 0.dp,
    sheetPartiallyExpandedHeight: Dp = 300.dp,
    sheetShape: Shape = BottomSheetDefaults.ExpandedShape,
    sheetContainerColor: Color = BottomSheetDefaults.ContainerColor,
    sheetContentColor: Color = contentColorFor(sheetContainerColor),
    sheetTonalElevation: Dp = 0.dp,
    sheetShadowElevation: Dp = BottomSheetDefaults.Elevation,
    sheetDragHandle: @Composable (() -> Unit) = { BottomSheetDefaults.DragHandle() },
    sheetSwipeEnabled: Boolean = true,
    hasContentNavigationBarPadding: Boolean = false,
    content: @Composable (() -> Unit),
) {
    ...
}

인수 이름과 기능은 BottomSheetScaffold()의 것과 최대한 똑같이 맞췄다. 이유는 2가지다. 첫째로 BottomSheetScaffold()에 기반한 커스텀 컴포넌트이기 때문이다. 둘째로 기반이 된 BottomSheetScaffold()은 구글 '공식' 컴포넌트이기 때문이다. '공식'이 제공하는 이름은 안드로이드 개발자 모두에게 친숙할 것이므로, 이 친숙한 스키마를 사용하지 않을 이유가 없다.
 
인수 중 hasContentNavigationBarPadding는, content 프로퍼티에 전달한 UI가 '네비게이션바를 고려한 bottomPadding'을 지녔는지의 여부다. 뜬금없이 왜 이런 인수를 넣었는지 궁금할 것이다. 이는 bottomSheet의 위치 변동 때문이다. #4-3에서 자세히 설명한다.
 

#3-3 구현 (함수 몸통 부분)

@OptIn(ExperimentalMaterial3Api::class, ExperimentalLayoutApi::class)
@Composable
fun ContentWithSwipeableBottomSheet(
    ...
) {
    AssertSoftInputModeIsAdjustNothing() // #6-2에서 설명

    val density = LocalDensity.current

    BoxWithConstraints(
        modifier = modifier
    ) {
        val layoutHeight = this.maxHeight
        val anchoredDraggableState = sheetState.anchoredDraggableState

        LaunchedEffect(density, layoutHeight, sheetExpandedAnchorOffset, sheetPartiallyExpandedHeight) {
            anchoredDraggableState.updateAnchors(
                DraggableAnchors<SheetValue> {
                    SheetValue.Expanded at with(density) { sheetExpandedAnchorOffset.toPx() }
                    SheetValue.PartiallyExpanded at with(density) { (layoutHeight - sheetPartiallyExpandedHeight).toPx() }
                    SheetValue.Hidden at with(density) { layoutHeight.toPx() }
                }
            )
        }

        ContentWithSwipeableBottomSheetLayout(
            anchoredDraggableState = anchoredDraggableState,
            body = content,
            bottomSheet = {
                BottomSheetLayout(
                    anchoredDraggableState = anchoredDraggableState,
                    sheetSwipeEnabled = sheetSwipeEnabled,
                    shape = sheetShape,
                    containerColor = sheetContainerColor,
                    contentColor = sheetContentColor,
                    tonalElevation = sheetTonalElevation,
                    shadowElevation = sheetShadowElevation,
                    dragHandle = sheetDragHandle,
                    content = sheetContent
                )
            },
            hasBodyNavigationBarPadding = hasContentNavigationBarPadding
        )
    }
}

본 컴포넌트는 swipe 동작에 영향을 받아 높이를 조절한다. 그래서 AnchoredDraggableState가 중요한 역할을 수행한다. BoxWithConstraints()를 쓴 이유는 AnchoredDraggableState 때문이다. AnchoredDraggableState.updateAnchors()를 통해 anchor를 결정하기 위해서는 ContentWithSwipeableBottomSheet()를 담는 부모의 높이가 필요하기 때문이다.
 
이후로는 private fun ContentWithSwipeableBottomSheetLayout()으로 넘어간다. ContentWithSwipeableBottomSheet()가 받은 대부분의 인수를 BottomSheetLayout()이 받아내고 있음이 보인다.
 

#4 ContentWithSwipeableBottomSheetLayout()

#4-1 코드 초안

@OptIn(ExperimentalMaterial3Api::class)
@Composable
private fun ContentWithSwipeableBottomSheetLayout(
    anchoredDraggableState: AnchoredDraggableState<SheetValue>,
    body: @Composable (() -> Unit),
    bottomSheet: @Composable (() -> Unit),
    // hasBodyNavigationBarPadding: Boolean
) {
    if (!anchoredDraggableState.offset.isNaN()) {
        SubcomposeLayout { constraints ->
            val layoutWidth = constraints.maxWidth
            val layoutHeight = constraints.maxHeight
            val looseConstraints = constraints.copy(minWidth = 0, minHeight = 0)

            val sheetOffsetY = anchoredDraggableState.offset

            val bodyPlaceables = subcompose("body") { body() }.fastMap {
                val sheetPartiallyExpandedOffset = anchoredDraggableState.anchors.positionOf(SheetValue.PartiallyExpanded)
                val sheetHiddenOffset = anchoredDraggableState.anchors.positionOf(SheetValue.Hidden)
                val maxHeightAffectedBySheetOffsetY = sheetOffsetY.coerceIn(
                    minimumValue = sheetPartiallyExpandedOffset,
                    maximumValue = sheetHiddenOffset
                )

                val imePlaceables = subcompose("ime") { Spacer(modifier = Modifier.imePadding()) }.fastMap { it.measure(looseConstraints) }
                val imeOffsetY = layoutHeight - (imePlaceables.fastMaxBy { it.height }?.height ?: 0)
                val maxHeightAffectedByImeOffsetY = imeOffsetY.coerceAtMost(
                    maximumValue = sheetHiddenOffset.fastRoundToInt()
                )

                it.measure(
                    looseConstraints.copy(
                        maxHeight = minOf(
                            maxHeightAffectedBySheetOffsetY.fastRoundToInt(),
                            maxHeightAffectedByImeOffsetY
                        )
                    )
                )
            }

            val bottomSheetPlaceables = subcompose("bottomSheet") { bottomSheet() }.fastMap {
                it.measure(
                    looseConstraints.copy(
                        maxHeight = (layoutHeight - sheetOffsetY).fastRoundToInt()
                    )
                )
            }

            layout(layoutWidth, layoutHeight) {
                bodyPlaceables.fastForEach { it.place(0, 0) }
                bottomSheetPlaceables.fastForEach { it.place(0, sheetOffsetY.fastRoundToInt()) }
            }
        }
    }
}

hasBodyNavigationBarPadding을 구현하지 않은, 코드 초안이다.
 

#4-2 content의 maxHeight 결정 1

아래는 #4-1에 있는 코드의 bodyPlaceables 구현 부분이 잘 보이게 강조하고, 해당 코드를 설명한 것이다.
 

...
@Composable
private fun ContentWithSwipeableBottomSheetLayout(
    anchoredDraggableState: AnchoredDraggableState<SheetValue>,
    body: @Composable (() -> Unit),
    bottomSheet: @Composable (() -> Unit),
    // hasBodyNavigationBarPadding: Boolean
) {
    if (...) {
        SubcomposeLayout { ... ->
            ...

            val bodyPlaceables = subcompose("body") { body() }.fastMap {
                val sheetPartiallyExpandedOffset = anchoredDraggableState.anchors.positionOf(SheetValue.PartiallyExpanded)
                val sheetHiddenOffset = anchoredDraggableState.anchors.positionOf(SheetValue.Hidden)
                val maxHeightAffectedBySheetOffsetY = sheetOffsetY.coerceIn(
                    minimumValue = sheetPartiallyExpandedOffset,
                    maximumValue = sheetHiddenOffset
                )

                val imePlaceables = subcompose("ime") { Spacer(modifier = Modifier.imePadding()) }.fastMap { it.measure(looseConstraints) }
                val imeOffsetY = layoutHeight - (imePlaceables.fastMaxBy { it.height }?.height ?: 0)
                val maxHeightAffectedByImeOffsetY = imeOffsetY.coerceAtMost(
                    maximumValue = sheetHiddenOffset.fastRoundToInt()
                )

                it.measure(
                    looseConstraints.copy(
                        maxHeight = minOf(
                            maxHeightAffectedBySheetOffsetY.fastRoundToInt(),
                            maxHeightAffectedByImeOffsetY
                        )
                    )
                )
            }

            ...
        }
    }
}

Jetpack compose에서 X축 offset은 →쪽으로 갈수록 커지고 Y축 offset은 ↓쪽으로 갈수록 커진다. 그리고 sheetOffsetY는 sheet의 Y축 위치 offset을 의미하는 변수다. sheetOffsetY가 커질수록 (= sheet가 ↓쪽으로 갈수록) content의 높이 또한 커지고, sheetContent의 높이는 작아진다. 반대로 sheetOffsetY가 작아질수록 content의 높이는 작아지고 sheetContent의 높이는 커진다. 이 때, content의 높이에는 하한선을 설정했다. 이 하한선은 sheet가 partiallyExpanded 일때의 content 높이다. 그러나, ime(소프트 키보드)는 시스템 차원의 UI이므로 ime는 하한선을 무시할 수 있어야 한다 (하한선을 설정하지 않았다).
 
결론은, Layout Phase의 Measurement 단계에서 sheet에 영향(affect)을 받는 Constraint.maxHeight (코드에 있는 maxHeightAffectedBySheetOffsetY)와 ime의 영향을 받는 Constraint.maxHeight (코드에 있는 maxHeightAffectedByImeOffsetY)를 동시에 고려해야 한다는 것이다. 둘 중에서 더 작은 값을 취한다.
 

#4-3 hasContentNavigationBarPadding 관련

이 인수는 왜 존재할까? 아래 스크린샷과 같은 일이 발생하기 때문이다.
 

sheet가 hidden 상태 일 때는 자연스럽지만, hidden 상태가 아닐때는 부자연스러운(의미없는) bottomPadding을 가지고 있게 된다. 이 의미없는 bottomPadding을 가리려면 content Measurement 시의 Constraint.maxHeight를 bottomPadding만큼 늘려주면 될 것이다. sheet는 content보다 zIndex가 높게끔 설정해두었다. 그래서 sheet와 content가 겹치면 겹친 부분을 보이지 않게 할 수 있다. '부자연스러운 부분'을 보이지 않게 할 수 있다는 말이다.
 

#4-4 content의 maxHeight 결정 2

#4-3를 고려해서 #4-2의 코드를 업데이트하면 아래와 같다.
 

...
@Composable
private fun ContentWithSwipeableBottomSheetLayout(
    anchoredDraggableState: AnchoredDraggableState<SheetValue>,
    body: @Composable (() -> Unit),
    bottomSheet: @Composable (() -> Unit),
    hasBodyNavigationBarPadding: Boolean
) {
    if (...) {
        // ↓ ★
        val density = LocalDensity.current
        val navigationBarHeight = if (hasBodyNavigationBarPadding) {
            with(density) { WindowInsets.navigationBars.getBottom(density) }
        } else {
            null
        }

        SubcomposeLayout { ... ->
            ...

            val bodyPlaceables = subcompose("body") { body() }.fastMap {
                ...
                val maxHeightAffectedBySheetOffsetY = (sheetOffsetY + (navigationBarHeight ?: 0)).coerceIn( // ← ★
                    minimumValue = sheetPartiallyExpandedOffset + (navigationBarHeight ?: 0), // ← ★
                    maximumValue = sheetHiddenOffset
                )

                ...
                val maxHeightAffectedByImeOffsetY = (imeOffsetY + (navigationBarHeight ?: 0)).coerceAtMost( // ← ★
                    maximumValue = sheetHiddenOffset.fastRoundToInt()
                )

                it.measure(
                    ...
                )
            }

            ...
        }
    }
}

달라진 점에 ★ 주석을 달았다.
 

#4-5 문제가 해결된 스크린샷

부자연스러운 여백이 사라졌다.
 

#5 ContentWithSwipeableBottomSheetState

enum class BottomOccupier { None, Ime, BottomSheet }

class ContentWithSwipeableBottomSheetState(
    val anchoredDraggableState: AnchoredDraggableState<SheetValue>,
    val isImeAppearingState: State<Boolean>
) {
    suspend fun hide() = anchoredDraggableState.animateTo(
        targetValue = SheetValue.Hidden,
        animationSpec = BottomSheetAnimationSpec
    )

    suspend fun partiallyExpand() = anchoredDraggableState.animateTo(
        targetValue = SheetValue.PartiallyExpanded,
        animationSpec = BottomSheetAnimationSpec
    )

    suspend fun expand() = anchoredDraggableState.animateTo(
        targetValue = SheetValue.Expanded,
        animationSpec = BottomSheetAnimationSpec
    )

    val currentValue: SheetValue
        get() = anchoredDraggableState.currentValue

    val settledValue: SheetValue
        get() = anchoredDraggableState.settledValue

    val targetValue: SheetValue
        get() = anchoredDraggableState.targetValue

    val bottomOccupier: BottomOccupier
        get() = if (isImeAppearingState.value) {
            BottomOccupier.Ime
        } else {
            if (anchoredDraggableState.targetValue == SheetValue.Hidden) {
                BottomOccupier.None
            } else {
                BottomOccupier.BottomSheet
            }
        }
}

@OptIn(ExperimentalLayoutApi::class)
@Composable
fun rememberContentWithSwipeableBottomSheetState(
    anchoredDraggableState: AnchoredDraggableState<SheetValue> = AnchoredDraggableState(SheetValue.Hidden),
): ContentWithSwipeableBottomSheetState {
    val imeAppearingState = remember { mutableStateOf(false) }

    val density = LocalDensity.current
    val imeTargetHeight by rememberUpdatedState(WindowInsets.imeAnimationTarget.getBottom(density))
    LaunchedEffect(density) {
        snapshotFlow { 0 < imeTargetHeight }
            .distinctUntilChanged()
            .collectLatest { imeAppearingState.value = it }
    }

    return remember {
        ContentWithSwipeableBottomSheetState(
            anchoredDraggableState = anchoredDraggableState,
            isImeAppearingState = imeAppearingState
        )
    }
}

anchoredDraggableState의 Wrapper다. Wrapper로서 추가된 기능은, bottomOccupier 프로퍼티를 보유한다는 점이다. 이 프로퍼티는 현재 화면에 bottomSheet가 표시되는지, 아니면 ime가 표시되는지, 그것도 아니면 아무것도 표시하지 않는지를 알려준다. ime는 시스템 UI로 항상 bottomSheet보다 위에 표시되기 때문에 ime와 bottomSheet가 동시에 떠 있는 경우 bottomOccupier는 ime가 되도록 분기를 짰다.
 
하지만, bottomSheet와 ime는 서로 배타적(exclusive)이어야 사용자 경험이 좋다. bottomSheet가 ime가 알아서 배타적(둘 중 하나만 표시되게) 만들어주는 ImeSheetExclusivityHandler()를 만들어 샘플 앱(#6)에 사용했다 (#6-4 참고). 
 

#6 샘플 앱

#6-1 개요

ContentWithSwipeableBottomSheet()를 이용한 샘플 앱이다. 전체 소스 코드는 #6-5에서 다운로드 할 수 있다. 전체 소스 코드를 보면서 읽는 걸 추천한다.
 

#6-2 코드 - MainActivity

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        window.setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_NOTHING)
        setContent {
            ContentWithSwipeableBottomSheetTheme {
                SampleScreen()
            }
        }
    }
}

window.setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_NOTHING)를 쓰지 않으면,  ContentWithSwipeableBottomSheet() 사용 시 에러가 나게 만들었다. ContentWithSwipeableBottomSheet() 내부에 쓰인 아래의 함수 때문이다.
 

@Composable
private fun AssertSoftInputModeIsAdjustNothing() {
    val context = LocalView.current.context
    val activity = context as Activity
    val window = activity.window
    val softInputAdjustType by remember { mutableIntStateOf(window.attributes.softInputMode and WindowManager.LayoutParams.SOFT_INPUT_MASK_ADJUST) }
    LaunchedEffect(window) {
        check(softInputAdjustType == WindowManager.LayoutParams.SOFT_INPUT_ADJUST_NOTHING) {
            """
                Expected SOFT_INPUT_ADJUST_NOTHING but was $softInputAdjustType
                해결법: Activity의 setContent {} 호출 전에, window.setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_NOTHING)와 같은 코드를 사용하세요.
            """.trimIndent()
        }
    }
}

ContentWithSwipeableBottomSheet()는 ime에 의해 밀려나서는 안 된다. bottomSheet와 ime가 서로 같은 공간을 점유해야하기 때문이다.
 

#6-3 코드 - SampleScreen()

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SampleScreen() {
    val scope = rememberCoroutineScope()

    val sheetState = rememberContentWithSwipeableBottomSheetState()
    ImeSheetExclusivityHandler(sheetState.anchoredDraggableState)

    var sheetExpandedAnchorOffset by remember { mutableStateOf(0.dp) }

    ContentWithSwipeableBottomSheet(
        sheetContent = {
            LazyColumn(
                modifier = Modifier.fillMaxWidth()
            ) {
                repeat(30) {
                    item {
                        Text("${it + 1}")
                    }
                }

                item {
                    Spacer(Modifier.navigationBarsPadding())
                }
            }

            BottomSheetBackHandler(sheetState.anchoredDraggableState)
        },
        modifier = Modifier
            .fillMaxSize()
            .background(BottomAppBarDefaults.containerColor),
        sheetState = sheetState,
        sheetExpandedAnchorOffset = sheetExpandedAnchorOffset,
        sheetPartiallyExpandedHeight = storedImeMaxHeight(),
        sheetSwipeEnabled = true,
        hasContentNavigationBarPadding = true
    ) {
        Scaffold(
            topBar = {
                TopAppBar(
                    title = {
                        Text("제목")
                    },
                    actions = {
                        IconButton(
                            onClick = {
                                scope.launch {
                                    sheetState.expand()
                                }
                            }
                        ) {
                            Icon(
                                imageVector = ImageVector.vectorResource(id = R.drawable.keyboard_double_arrow_up_24dp_1f1f1f_fill0_wght400_grad0_opsz24),
                                contentDescription = "Bottom Sheet Expand"
                            )
                        }

                        IconButton(
                            onClick = {
                                scope.launch {
                                    when (sheetState.currentValue) {
                                        SheetValue.Hidden -> sheetState.partiallyExpand()
                                        SheetValue.PartiallyExpanded -> sheetState.expand()
                                        SheetValue.Expanded -> {}
                                    }
                                }
                            }
                        ) {
                            Icon(
                                imageVector = Icons.Default.KeyboardArrowUp,
                                contentDescription = "Bottom Sheet Up"
                            )
                        }

                        IconButton(
                            onClick = {
                                scope.launch {
                                    when (sheetState.currentValue) {
                                        SheetValue.Hidden -> {}
                                        SheetValue.PartiallyExpanded -> sheetState.hide()
                                        SheetValue.Expanded -> sheetState.partiallyExpand()
                                    }
                                }
                            }
                        ) {
                            Icon(
                                imageVector = Icons.Default.KeyboardArrowDown,
                                contentDescription = "Bottom Sheet Down"
                            )
                        }

                        IconButton(
                            onClick = {
                                scope.launch {
                                    sheetState.hide()
                                }
                            }
                        ) {
                            Icon(
                                imageVector = ImageVector.vectorResource(id = R.drawable.keyboard_double_arrow_down_24dp_1f1f1f_fill0_wght400_grad0_opsz24),
                                contentDescription = "Bottom Sheet Hide"
                            )
                        }
                    }
                )
            },
            bottomBar = {
                BottomAppBar(
                    containerColor = BottomAppBarDefaults.containerColor
                ) {
                    val imeController = LocalSoftwareKeyboardController.current
                    IconButton(
                        onClick = {
                            scope.launch {
                                when (sheetState.bottomOccupier) {
                                    BottomOccupier.None, BottomOccupier.Ime -> sheetState.partiallyExpand()
                                    BottomOccupier.BottomSheet -> imeController?.show()
                                }
                            }
                        }
                    ) {
                        Icon(
                            imageVector = when (sheetState.bottomOccupier) {
                                BottomOccupier.None, BottomOccupier.Ime ->
                                    ImageVector.vectorResource(id = R.drawable.bottom_drawer_24dp_1f1f1f_fill0_wght400_grad0_opsz24)

                                BottomOccupier.BottomSheet ->
                                    ImageVector.vectorResource(id = R.drawable.keyboard_24dp_1f1f1f_fill0_wght400_grad0_opsz24)
                            },
                            contentDescription = ""
                        )
                    }

                    val focusRequester = remember { FocusRequester() }
                    val interactionSource = remember { MutableInteractionSource() }
                    TextFieldAutoFocusOnceWithoutIme(
                        modifier = Modifier
                            .weight(1f)
                            .focusRequester(focusRequester),
                        interactionSource = interactionSource
                    )
                }
            },
        ) { innerPadding ->
            LaunchedEffect(innerPadding) {
                sheetExpandedAnchorOffset = innerPadding.calculateTopPadding()
            }

            Column {
                LazyColumn(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(innerPadding),
                    reverseLayout = true
                ) {
                    repeat(30) {
                        item {
                            Text("${it + 1}")
                        }
                    }
                }
            }
        }
    }
}

ImeSheetExclusivityHandler(), BottomSheetBackHandler(), storedImeMaxHeight(), TextFieldAutoFocusOnceWithoutIme() 등의 컴포저블 함수(컴포넌트)들은 #6-4에서 하나하나 설명한다.
 

#6-4 사용된 Composable들

(1) ImeSheetExclusivityHandler()

@Composable
fun ImeSheetExclusivityHandler(
    anchoredDraggableState: AnchoredDraggableState<SheetValue>
) {
    val imeController = LocalSoftwareKeyboardController.current
    val isImeSettledVisible by rememberIsImeSettledVisible()

    // ↓ LaunchedEffect 요약: ime가 전부 올라온 직후 트리거, bottomSheet를 hidden 상태로
    LaunchedEffect(Unit) {
        snapshotFlow { isImeSettledVisible }
            .filter { it } // ime가 완전히(settled) 올라왔는데(visible),
            .filter { anchoredDraggableState.settledValue != SheetValue.Hidden } // bottomSheet가 숨겨진(hidden) 상태가 아니라면 (= ime와 bottomSheet가 겹쳐져 있는 상태라면),
            .collectLatest {
                anchoredDraggableState.snapTo(SheetValue.Hidden)
            }
    }

    // ↓ LaunchedEffect 요약: bottomSheet가 조금이라도 올라오기 직전 트리거, bottomSheet를 즉시 배치 후 ime를 hide
    val isBottomSheetTransitioningFromHidden by remember {
        derivedStateOf {
            anchoredDraggableState.settledValue == SheetValue.Hidden
                    && anchoredDraggableState.targetValue != SheetValue.Hidden
        }
    }
    LaunchedEffect(Unit) {
        snapshotFlow { isBottomSheetTransitioningFromHidden }
            .filter { it } // bottomSheet가 숨겨진(hidden) 상태에서 벗어나려 하는데,
            .filter { isImeSettledVisible } // 이미 완전히(settled) 자리잡은(visible) ime가 있다면,
            .collectLatest {
                when (anchoredDraggableState.targetValue) {
                    SheetValue.PartiallyExpanded -> {
                        // 먼저 bottomSheet를 즉시 배치하고,
                        anchoredDraggableState.snapTo(SheetValue.PartiallyExpanded)
                        // ime를 숨김 (이렇게 해야 자연스럽게 스르륵 bottomSheet가 드러나는 화면이 나옴. ime는 시스템 window라 항상 bottomSheet보다 위에 표시되기 때문)
                        imeController?.hide()
                    }

                    SheetValue.Expanded -> {
                        anchoredDraggableState.snapTo(SheetValue.PartiallyExpanded)
                        imeController?.hide()
                        anchoredDraggableState.animateTo(SheetValue.Expanded)
                    }

                    else -> {}
                }
            }
    }
}

@OptIn(ExperimentalLayoutApi::class)
@Composable
private fun rememberIsImeSettledVisible(): State<Boolean> {
    val density = LocalDensity.current
    val source = WindowInsets.imeAnimationSource
    val target = WindowInsets.imeAnimationTarget

    return remember {
        derivedStateOf {
            val sourceHeight = source.getBottom(density)
            val targetHeight = target.getBottom(density)

            sourceHeight > 0 && sourceHeight == targetHeight
        }
    }
}

ime와 bottomSheet는 서로 같은 공간을 점유하지만, 동시에 배타적이어야 한다. ime가 올라올 때 bottomSheet가 이미 올라와있으면 bottomSheet를 내려주고, 반대로 bottomSheet가 올라올 때 ime가 이미 올라와있으면 ime를 내려주는 컴포넌트다.

 
(2) BottomSheetBackHandler()

@Composable
fun BottomSheetBackHandler(
    anchoredDraggableState: AnchoredDraggableState<SheetValue>
) {
    val scope = rememberCoroutineScope()
    BackHandler(enabled = (anchoredDraggableState.currentValue != SheetValue.Hidden)) {
        scope.launch {
            when (anchoredDraggableState.currentValue) {
                SheetValue.Expanded -> anchoredDraggableState.animateTo(SheetValue.PartiallyExpanded)
                SheetValue.PartiallyExpanded -> anchoredDraggableState.animateTo(SheetValue.Hidden)
                else -> {}
            }
        }
    }
}

bottomSheet의 상태에 따른 뒤로가기 버튼 동작 정의

 
(3) storedImeMaxHeight()

@OptIn(ExperimentalLayoutApi::class)
@Composable
fun storedImeMaxHeight(): Dp {
    val dimensDataStore = (LocalContext.current.applicationContext as CwsbsApplication).dimensDataStore

    val density = LocalDensity.current
    val imeTargetHeight by rememberUpdatedState(WindowInsets.imeAnimationTarget.getBottom(density))

    LaunchedEffect(density) {
        snapshotFlow { imeTargetHeight }
            .filter { 0 < it }
            .distinctUntilChanged()
            .collectLatest {
                with(density) {
                    dimensDataStore.setImeMaxHeight(it.toDp())
                }
            }
    }

    return dimensDataStore.imeMaxHeightStateFlow.collectAsState().value
}

bottomSheet가 partiallyExpanded일 때의 높이를 ime가 끝까지 올라왔을 때의 높이와 맞추기 위한 컴포넌트다. DataStore를 사용했다.

 
(4) TextFieldAutoFocusOnceWithoutIme()

@Composable
fun TextFieldAutoFocusOnceWithoutIme(
    value: String = "",
    onValueChange: (String) -> Unit = {},
    @SuppressLint("ModifierParameter") modifier: Modifier = Modifier,
    interactionSource: MutableInteractionSource,
) {
    val focusRequester = remember { FocusRequester() }
    val imeController = LocalSoftwareKeyboardController.current
    var showKeyboardOnFocus by remember { mutableStateOf(false) }

    OutlinedTextField(
        value = value,
        onValueChange = {
            onValueChange(it)
        },
        modifier = modifier.focusRequester(focusRequester),
        keyboardOptions = KeyboardOptions.Default.copy(
            showKeyboardOnFocus = showKeyboardOnFocus
        ),
        interactionSource = interactionSource
    )

    LaunchedEffect(Unit) {
        focusRequester.requestFocus()
        imeController?.hide() // showKeyboardOnFocus가 false여도 완벽히 동작하질 않음. 이 문제가 해결될 때까지는 이 코드를 통해 보조함.
        showKeyboardOnFocus = true
    }
}

최초 실행 시 TextField에 focus를 주되, ime가 올라오지는 않게하는 TextField다. 왜 굳이 이런 컴포넌트를 썼냐면 focus를 최초로 한 번은 걸어주어야 (#6-3에 있는 코드인) imeController?.show()가 제대로 동작하기 때문이다.

 

#6-5 완성된 앱

android-practice/playground/ContentWithSwipeableBottomSheet at 5f2073d84b19d38c06dda94957b127c9314a4ea4 · Kanmanemone/android-p

 

#7 리팩토링된 샘플 앱

#7-1 모듈화

[Android] Module 구조

위 게시글에 기반해서 "app" 모듈에 추가로 "ui" 및 "datastore" 모듈을 추가해 코드를 분산시켰다. 그 결과 더 깔끔한 코드로 리팩토링 되었다.
 

#7-2 변경 사항

1. "ui" 모듈 생성 후 ContentWithSwipeableBottomSheet() 관련 코드 옮김

2. @OptIn(ExperimentalMaterial3Api::class) 어노테이션을 주렁주렁 달기 싫어서, androidx.compose.material3.SheetValue 대신 커스텀 SheetValue를 정의해 사용해왔음. 그러나, 이렇게 이름이 같은 경우는 (다른 개발자 입장에서) 혼란을 줄 여지가 다분함. 따라서 그냥 androidx.compose.material3.SheetValue을 사용하기로 결정하고 이에 맞춰 전체 코드를 리팩토링함

3. BottomSheetBackHandler()와 ImeSheetExclusivityHandler()를 "ui" 모듈의 "internal" 패키지로 이동 및 internal 접근제어자를 붙임. 일관성을 위해 비슷한 함수인 AssertSoftInputModeIsAdjustNothing()도 별도의 파일로 포장해서 internal 접근제어자를 붙여둠

4. "datastore" 모듈 추가 후, 관련 코드들을 옮김. 또, DimensDataStore의 난해한 초기화 코드를 제거하고 공식 가이드(https://developer.android.com/topic/libraries/architecture/datastore#preferences-datastore)의 코드에 기반해서 다시 씀. 해당 클래스의 이름을 SystemPreferences로 변경하고, class가 아니라 object로 변경

 

#7-3 완성된 앱

android-practice/playground/ContentWithSwipeableBottomSheet at 3cd7d083176e5be8a8f919c118ca953a119f1bc9 · Kanmanemone/android-p