[TIL-230726] Jetpack Compose - BottomSheetScaffold

안녕하세요

TIL 포스팅 각각의 날짜 간격이 멀어지고 있는 요즘입니다.

사실 Toady I learned 라는 개념으로 하루하루 배운것을 정리하려고 하면서, 예제 소스를 개발하고 있긴 합니다만,

하루 치 공부 후 포스팅을 작성하는게 시간이 더 드는 것 같아 쉬운일이 아니구나 느끼고 있네요

 

그래도 조금씩이라도 시간날때 꾸준히 작성하도록 해야겠습니다.

 

---

오늘은 BottomSheetScaffold 라는 개념에 대해서 작성해보려고 합니다.

 

BottomSheetScaffold란?

이름에서도 나타나듯이 BottomSheet라는게 위의 사진처럼 아래에서 위로 확장할 수 있는 Compose UI 입니다.

화면의 기본 UI 영역외에 BottomSheet가 공존하면서 두 영역간의 상호작용도 가능합니다.

출처 : Android Developer Site

기본 UI 영역이 자주 스크롤 되거나 한쪽으로 계속 드래그하는 액션(Panning) 등을 하더라도, 하단에 보조 데이터 등을 출력하기 위해 사용됩니다.

추가로, topBar, floatingActionBotton 등도 같이 UI를 구성할 수 있습니다.

 

BottomSheetScaffold 상세

@Composable
@ExperimentalMaterialApi
fun BottomSheetScaffold(
    sheetContent: @Composable ColumnScope.() -> Unit,
    modifier: Modifier = Modifier,
    scaffoldState: BottomSheetScaffoldState = rememberBottomSheetScaffoldState(),
    topBar: (@Composable () -> Unit)? = null,
    snackbarHost: @Composable (SnackbarHostState) -> Unit = { SnackbarHost(it) },
    floatingActionButton: (@Composable () -> Unit)? = null,
    floatingActionButtonPosition: FabPosition = FabPosition.End,
    sheetGesturesEnabled: Boolean = true,
    sheetShape: Shape = MaterialTheme.shapes.large,
    sheetElevation: Dp = BottomSheetScaffoldDefaults.SheetElevation,
    sheetBackgroundColor: Color = MaterialTheme.colors.surface,
    sheetContentColor: Color = contentColorFor(sheetBackgroundColor),
    sheetPeekHeight: Dp = BottomSheetScaffoldDefaults.SheetPeekHeight,
    drawerContent: (@Composable ColumnScope.() -> Unit)? = null,
    drawerGesturesEnabled: Boolean = true,
    drawerShape: Shape = MaterialTheme.shapes.large,
    drawerElevation: Dp = DrawerDefaults.Elevation,
    drawerBackgroundColor: Color = MaterialTheme.colors.surface,
    drawerContentColor: Color = contentColorFor(drawerBackgroundColor),
    drawerScrimColor: Color = DrawerDefaults.scrimColor,
    backgroundColor: Color = MaterialTheme.colors.background,
    contentColor: Color = contentColorFor(backgroundColor),
    content: @Composable (PaddingValues) -> Unit
): Unit

반응형

위의 내용에서 Parameter를 다 알 필요는 없을 것 같고, 주요 항목들을 알아보면 될 것 같습니다.

• sheetContent : Bottom Sheet의 컨텐츠를 표시하는 부분
• scaffoldState : ScaffoldState에 상태. BottomSheetState에 접근할 수 있고, expand(), collapse() 로 확장, 축소가 가능합니다.
• sheetPeekHeight : BottomSheet가 접혔을 때의 높이. 실제 높이와 sheetPeekHeight와 같은 높이로 구현한다면, BottomSheet는 항상 접혀있는 상태를 유지합니다.
• sheetGesturesEnabled : 사용자 제스처로 펼치거나 접는 액션 가능 유무를 설정합니다. 기본값은 true 입니다.
• sheetShape : BottomSheet의 모양을 변경합니다. (ex) RoundedCornerShape(10.dp))
• sheetBackgroundColor : BottomSheet의 기본 배경색을 설정합니다.
• sheetContentColor : BottomSheet에 속해있는 Child 요소들에 색상을 설정합니다. 기본 sheetBackgroundColor를 따라갑니다.
  
  

예제

위에 주요 항목에 대해서 예제 코드를 작성해보았습니다.

    val scope = rememberCoroutineScope()
    val scaffoldState = rememberBottomSheetScaffoldState()
    BottomSheetScaffold(
    sheetContent = {
        Box(
            Modifier
                .fillMaxWidth()
                .height(128.dp),
            contentAlignment = Alignment.Center
        ) {
            Text("Swipe up to expand sheet")
        }
        Column(
            Modifier
                .fillMaxWidth()
                .padding(64.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text("Sheet content")
            Spacer(Modifier.height(20.dp))
        }
    },
    scaffoldState = scaffoldState,
    sheetPeekHeight = 128.dp,
    sheetShape = RoundedCornerShape(10.dp),
    sheetBackgroundColor = Color.Gray,
    sheetContentColor = Color.Red,
    ) {
        Box(
            Modifier
                .fillMaxSize()
                .background(Color.Cyan)
        ){
            Column() {
                Text("This is main ui")
                Button(
                    onClick = {
                        scope.launch { scaffoldState.bottomSheetState.collapse() }
                    }
                ) {
                    Text("collapse sheet")
                }

                Button(
                    onClick = {
                        scope.launch { scaffoldState.bottomSheetState.expand() }
                    }
                ) {
                    Text("expand sheet")
                }
            }
        }
    }

 

예제 결과

(이상한 격자무늬가 왜나오는지?;; 무시해주세요!)

---

오늘은 BottomSheetScaffold에 대해서 알아보았습니다.
잘못된 내용이 있다면 댓글 부탁드리고, 내용이 좋았다면 공감, 구독 부탁드려요