Compose 스크롤 시 AppBar 처리 - TopAppBarScrollBehavior

TopAppBarScrollBehavior란?

TopAppBar는 현재 레이아웃을 대표하는 타이틀을 나타내거나, 필요에 따라서 추가적인 네비게이션 요소들을 제공하는 UI이다.

그래서 중요한 요소이면서도 정작 콘텐츠들을 담고는 있지 않기 때문에 앱을 사용하는 도중에는 불필요한 요소로 취급 될 수 있기 때문에 상황에 따라 적절히 처리해 줄 필요가 있다.

특히 메인 콘텐츠가 스크롤을 하여 나타내는 경우, 스크롤 도중에는 이미 TopAppBar의 타이틀은 봤기 때문에 화면만 차지하고 굳이 나타낼 필요는 없다.

그림1. TopAppBar

이러한 경우 활용할 수 있는 것이 TopAppBarScrollBehavior이다.

TopAppBarScrollBehavior는 단어 그대로 보면 TopAppBar의 Scroll Behavior(스크롤 동작)으로 스크롤 동작에 따라 TopAppBar의 애니메이션이나 상태를 관리하는 인터페이스이다.

따라서 TopAppBarScrollBehavior을 사용하면 원하는 위치의 스크롤 동작에 따라서 TopAppBar의 동작을 지정할 수 있다.

ScrollBehavior 사용

Compose에서는 아래와 같이 각각 다른 3개의 상황에서 사용할 수 있는 TopAppBarScrollBehavior를 함수로 정의해 놓았다.

enterAlwaysScrollBehavior : 맨 위 혹은 위쪽으로 스크롤 중 보여짐
exitUntilCollapsedScrollBehavior : 맨 위에서만 보여짐
pinnedScrollBehavior : 스크롤 무관하게 보여짐

추가적으로 이것들은 Scroll Behavior(스크롤 동작)이다. 즉, 스크롤 동작을 처리하기 위해서 어느 곳에서 일어난 스크롤에 따라 동작을 처리해야 할지 위치를 지정해 줄 필요가 있다.

enterAlwaysScrollBehavior

지정한 위치에서 1.스크롤 위치가 맨 위에 있을 경우 2.위쪽으로 스크롤 하는 경우 TopAppBar가 나타나며 아래로 스크롤 하는 경우에는 TopAppBar가 감춰진다.

그림2. enterAlwaysScrollBehavior

보통 TopAppBar의 추가적인 기능이 있지만 막상 사용자가 아래로 스크롤 하는 도중에는 굳이 사용하지 않을 기능이라 생각되면 사용할 수 있다.

exitUntilCollapsedScrollBehavior

지정한 위치에서 스크롤 위치가 맨 위에 있는 경우에만 TopAppBar가 나타나며 그 외에 경우에는 감춰진다.

그림3. exitUntilCollapsedScrollBehavior

스크롤 중에는 굳이 활용할 기능이 없어 TopAppBar가 없어도 무관한 경우에 사용한다.

pinnedScrollBehavior

스크롤을 하여도 TopAppBar가 상단의 고정되어 항상 나타나게 된다.

그림4. pinnedScrollBehavior

스크롤 중에도 보여져야 유용한 정보나 기능을 포함하고 있을 경우 사용한다.

스크롤 위치 지정

앞서 ScrollBehavior는 지정한 위치에 스크롤 동작에 따라 처리하기 때문에 먼저 이 위치를 지정해 줄 필요가 있다 하였다.

아래 코드를 보면 Scaffold > content > Column의 modifier서 nestedScroll 메서드를 사용하여 지정해 준 것을 볼 수 있다.

Column에는 LazyColumn으로 구현한 리스트만 포함하며, 이렇게 지정해줌으로써 리스트에 스크롤 동작에 따라서 TopAppBar가 반응하게 된다.

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun Main() {
    val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()  // 맨 위 혹은 위로 스크롤 할 때 나타남
//    val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior() // 맨 위인 경우만 나타남
//    val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior() // 화면 상단의 고정

    Scaffold(
        topBar = { TopBar(scrollBehavior = scrollBehavior) }
    ) { innerPadding ->
        Column(
            modifier = Modifier
                .fillMaxSize()
                .nestedScroll(scrollBehavior.nestedScrollConnection)
                .padding(innerPadding)
        ) {
            LazyColumn {
                items(40) { index ->

물론 TopAppBar 쪽에도 scrollBehavior 파라미터의 scrollBehavior 변수를 연결해주어야 한다.

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TopBar(scrollBehavior: TopAppBarScrollBehavior) {
    CenterAlignedTopAppBar(
        scrollBehavior = scrollBehavior, // 변수 연결

추가적으로 TopAppBar의 colors 파라미터를 활용하여 TopAppBar의 배경색, 스크롤 시 TopAppBar의 배경색 등을 지정할 수 있다.

colors = TopAppBarDefaults.topAppBarColors(
    containerColor = Color(137, 228, 153, 255),
    scrolledContainerColor = Color(71, 129, 230, 255)   // 스크롤 중 TopBar 배경색
)

참고

전체 코드 | Github

이 블로그 검색

Compose World