[Android/Kotlin] Compose App Bar

함수 뜯어보고 탐구하기

---

App Bar

앱 바는 사용자에게 주요 기능 및 탐색 항목에 대한 액세스 권한을 제공하는 컨테이너입니다. 앱 바에는 상단 앱 바와 하단 앱 바의 두 가지 유형이 있습니다. 각각의 모양과 목적은 다음과 같습니다.

• 상단 앱 바 : 주요 작업 및 정보에 대한 액세스 권한을 제공합니다. 일반적으로 제목, 핵심 작업 항목, 특징 탐색 황목을 호스팅합니다. - TopAppBar
• 하단 앱 바 : 일반적으로 핵심 탐색 항목에 포함됩니다. 포함된 플로팅 작업 버튼을 통해 다른 주요 작업에 액세스할 수도 있습니다. - BottomAppBar

앱바는 일반적으로 이를 수신하는 특정 매개변수가 있는 Scaffold Composable에 전달됩니다. 

 

* 처음 Scaffold을 통해 AppBar을 설정할 시에 innerPadding을 설정을 안하게 될 경우 content 안에 설정된 여러 components가 겹치는 경험을 할 때가 있는데 innerPadding을 contentPadding에 설정을 하게 된다면 상단 앱 바, 하단 앱 바 등의 높이만큼 자동으로 여백을 확보할 수 있게 해줍니다.

 

상단 앱바의 종류

• Small (작은) - TopAppBar
• Center aligned (중앙 정렬) -  CenterAlignedTopAppBar
• Medium (중간) - MediumTopAppBar
• Large (대형) - LargeTopAppBar 

주요 매개변수

• Title : 앱 바 전체에 표시되는 텍스트입니다.
• navigationIcon : 탐색의 기본 아이콘입니다. 앱 바 왼쪽에 표시됩니다.
• actions : 사용자에게 주요 작업에 대한 액세스 권한을 제공하는 아이콘입니다. 앱 바 오른쪽에 표시됩니다.
• scrollBehavior : 상단 앱 바가 Scaffold의 내부 콘텐츠 스크롤에 응답하는 방식을 결정합니다.
• colors : 앱 바가 표시되는 방식을 결정합니다.

@Composable
fun SmallTopAppBarExample() {
    Scaffold(
        topBar = {
            TopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text("Small Top App Bar")
                }
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}

 

스크롤 동작

 

사용자가 지정한 내부 콘텐츠를 스크롤할 때 앱바가 반응하는 방식을 제어할 수 있습니다. TopAppBarScrollBehavior 인스턴스를 만들어서 scrollBehavior 매개변수의 상단 앱 바에 전달합니다.

TopAppBarScrollBehavior의 유형

• enterAlwaysScrollBehavior : 사용자가 스캐폴드의 내부 콘텐츠를 위로 당기면 상단 앱 바가 접힙니다. 그런 다음 사용자가 내부 콘텐츠를 아래로 당기면 앱 바가 확장됩니다.

val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior(rememberTopAppBarState())
modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection)

• exitUntilCollapsedScrollBehavior : enterAlwaysScrollBehavior와 유사하지만 사용자가 스캐폴드의 내부 콘텐츠 끝에 도달하면 앱 바가 추가로 확장됩니다.

val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior(rememberTopAppBarState())
modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection)

• pinnedScrollBehavior : 앱 바가 제자리에 유지되고 스크롤에 반응하지 않습니다.

val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(rememberTopAppBarState())
modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection)

 

하단 앱 바의 주요 매개변수

• actions : 막대 왼쪽에 표시되는 일련의 아이콘입니다. 일반적으로 이러한 작업은 특정 화면의 주요 작업 또는 탐색 항목입니다.
• floatingActionButton : 막대의 오른쪽에 표시되는 플로팅 작업 버튼입니다.

@Composable
fun BottomAppBarExample() {
    Scaffold(
        bottomBar = {
            BottomAppBar(
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(Icons.Filled.Check, contentDescription = "Localized description")
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Edit,
                            contentDescription = "Localized description",
                        )
                    }
                },
                floatingActionButton = {
                    FloatingActionButton(
                        onClick = { /* do something */ },
                        containerColor = BottomAppBarDefaults.bottomAppBarFabColor,
                        elevation = FloatingActionButtonDefaults.bottomAppBarFabElevation()
                    ) {
                        Icon(Icons.Filled.Add, "Localized description")
                    }
                }
            )
        },
    ) { innerPadding ->
        Text(
            modifier = Modifier.padding(innerPadding),
            text = "Example of a scaffold with a bottom app bar."
        )
    }
}

Compose에서 Screen으로 화면전환하는 방식이 있는데 그 때 Navigation으로 사용하는 방식이 있습니다.

상단바 왼쪽 <- 이러한 아이콘을 클릭하면 그 전 페이지로 이동하게 되는 설정을 하고싶을 때

NavHost(navController, startDestination = "home") {
    composable("topBarNavigationExample") {
        TopBarNavigationExample{ navController.popBackStack() }
    }

 

이런식으로 navController.popBackStack()을 통해 처리하는 방식이 있습니다.

다음 아래는 예시입니다.

@Composable
fun TopBarNavigationExample(
    navigateBack: () -> Unit,
) {
    Scaffold(
        topBar = {
            CenterAlignedTopAppBar(
                title = {
                    Text(
                        "Navigation example",
                    )
                },
                navigationIcon = {
                    IconButton(onClick = navigateBack) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
            )
        },
    ) { innerPadding ->
        Text(
            "Click the back button to pop from the back stack.",
            modifier = Modifier.padding(innerPadding),
        )
    }
}