앱 바는 사용자에게 주요 기능에 대한 액세스 권한을 제공하는 컨테이너입니다. 탐색 항목 앱 바에는 상단 앱 바와 하단 앱의 두 가지 유형이 있습니다. 막대 각각의 모양과 목적은 다음과 같습니다.
유형 |
디자인 |
목적 |
---|---|---|
상단 앱 바 |
화면 상단 |
주요 작업 및 정보에 대한 액세스를 제공합니다. 일반적으로 제목, 핵심 작업 항목, 특정 탐색 항목을 호스팅합니다. |
하단 앱 바 |
화면 하단 |
일반적으로 핵심 탐색 항목이 포함됩니다. 포함된 플로팅 작업 버튼과 같은 다른 주요 작업에 대한 액세스를 제공할 수도 있습니다. |
상단 앱 바와 하단 앱 바를 구현하려면 TopAppBar
및
각각 BottomAppBar
컴포저블을 사용합니다. 이를 통해 일관성 있는
인터페이스이며 탐색 및 작업 컨트롤을 캡슐화하고
머티리얼 디자인 원칙에
부합하는 디자인입니다
상단 앱 바
다음 표에는 상단 앱 바의 네 가지 유형이 요약되어 있습니다.
유형 |
예 |
---|---|
작게: 많은 탐색이나 작업이 필요하지 않은 화면에 적합합니다. |
|
가운데 정렬: 기본 작업이 하나인 화면에 사용됩니다. |
|
중간: 적당한 양의 탐색과 작업이 필요한 화면에 적합합니다. |
|
대형: 많은 탐색 및 작업이 필요한 화면에 적합합니다. |
|
API 노출 영역
네 가지 상단 앱을 구현할 수 있는 다양한 컴포저블 매우 유사합니다. 다음과 같은 몇 가지 주요 매개변수를 공유합니다.
title
: 앱 바 전체에 표시되는 텍스트입니다.navigationIcon
: 탐색을 위한 기본 아이콘입니다. 표시 위치 을 클릭합니다.actions
: 사용자에게 키 작업에 대한 액세스 권한을 제공하는 아이콘입니다. 나타남 을 클릭합니다.scrollBehavior
: 상단 앱 바가 스크롤에 반응하는 방식을 결정합니다. 내부 콘텐츠를 확인할 수 있습니다.colors
: 앱 바가 표시되는 방식을 결정합니다.
스크롤 동작
사용자가 주어진 영역을 스크롤할 때 앱 바가 응답하는 방식을 제어할 수 있습니다.
내부 콘텐츠를 확인하는 것입니다. 이렇게 하려면
TopAppBarScrollBehavior
를 열고 다음 앱의 상단 앱 바에 전달합니다.
scrollBehavior
매개변수
TopAppBarScrollBehavior
에는 세 가지 유형이 있습니다. 다음과 같습니다.
enterAlwaysScrollBehavior
: 사용자가 Scaffold의 내부를 가져올 때 상단 앱 바가 접힙니다. 사용자가 앱 바를 펼치면 내부 콘텐츠를 아래로 내립니다.exitUntilCollapsedScrollBehavior
:enterAlwaysScrollBehavior
와 유사합니다. 하지만 사용자가 앱의 끝에 도달하면 앱 바가 추가로 확장됩니다. 내부 콘텐츠를 확인하는 것입니다.pinnedScrollBehavior
: 앱 바가 그대로 유지되며 사용할 수 있습니다.
다음 예에서는 이러한 옵션 중 몇 가지를 구현합니다.
예
다음 섹션에서는 네 가지 유형의 상단 앱 바(스크롤 동작을 제어하는 방법에 관한 다양한 예시 포함)
사이즈: S
작은 상단 앱 바를 만들려면 TopAppBar
컴포저블을 사용합니다. 이것은
가능한 가장 간단한 상단 앱 바이며 이 예에서는 제목만 포함합니다.
다음 예에서는 TopAppBar
에 다음 값을 전달하지 않습니다.
scrollBehavior
따라서 내부 스크롤에 반응하지 않음
있습니다.
@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) } }
이 구현은 다음과 같이 표시됩니다.
![작은 상단 앱 바의 예](https://developer.android.google.cn/static/develop/ui/compose/images/components/appbar-small.png?authuser=19&hl=ko)
가운데 정렬됨
가운데 정렬된 상단 앱 바는 기본적으로 작은 앱 바와 동일합니다.
제목이 구성요소 내에서 중앙에 위치합니다. 구현하려면
전용 CenterAlignedTopAppBar
컴포저블이 있습니다.
이 예시에서는 enterAlwaysScrollBehavior()
를 사용하여 전달되는 값을 가져옵니다.
(scrollBehavior
) 따라서 사용자가
내부 콘텐츠를 확인하는 것입니다.
@Composable fun CenterAlignedTopAppBarExample() { val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(rememberTopAppBarState()) Scaffold( modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection), topBar = { CenterAlignedTopAppBar( colors = TopAppBarDefaults.centerAlignedTopAppBarColors( containerColor = MaterialTheme.colorScheme.primaryContainer, titleContentColor = MaterialTheme.colorScheme.primary, ), title = { Text( "Centered Top App Bar", maxLines = 1, overflow = TextOverflow.Ellipsis ) }, navigationIcon = { IconButton(onClick = { /* do something */ }) { Icon( imageVector = Icons.AutoMirrored.Filled.ArrowBack, contentDescription = "Localized description" ) } }, actions = { IconButton(onClick = { /* do something */ }) { Icon( imageVector = Icons.Filled.Menu, contentDescription = "Localized description" ) } }, scrollBehavior = scrollBehavior, ) }, ) { innerPadding -> ScrollContent(innerPadding) } }
이 구현은 다음과 같이 표시됩니다.
![여기에 대체 텍스트를 작성하세요.](https://developer.android.google.cn/static/develop/ui/compose/images/components/appbar-centered.png?authuser=19&hl=ko)
보통
중간 크기의 상단 앱 바는 추가 아이콘 아래에 제목을 배치합니다. 만들기
첫째, MediumTopAppBar
컴포저블을 사용합니다.
이전 스니펫과 마찬가지로 이 예에서는 enterAlwaysScrollBehavior()
를 사용하여
scrollBehavior
에 전달하는 값을 가져옵니다.
@Composable fun MediumTopAppBarExample() { val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior(rememberTopAppBarState()) Scaffold( modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection), topBar = { MediumTopAppBar( colors = TopAppBarDefaults.topAppBarColors( containerColor = MaterialTheme.colorScheme.primaryContainer, titleContentColor = MaterialTheme.colorScheme.primary, ), title = { Text( "Medium Top App Bar", maxLines = 1, overflow = TextOverflow.Ellipsis ) }, navigationIcon = { IconButton(onClick = { /* do something */ }) { Icon( imageVector = Icons.AutoMirrored.Filled.ArrowBack, contentDescription = "Localized description" ) } }, actions = { IconButton(onClick = { /* do something */ }) { Icon( imageVector = Icons.Filled.Menu, contentDescription = "Localized description" ) } }, scrollBehavior = scrollBehavior ) }, ) { innerPadding -> ScrollContent(innerPadding) } }
이 구현은 다음과 같이 표시되며 스크롤이 스크롤되는 방식을 보여 줍니다.
enterAlwaysScrollBehavior()
의 동작이 표시됩니다.
크게
대형 상단 앱 바는 중형 앱 바와 유사하지만
제목 및 아이콘이 더 크고 전체적으로 화면에서 더 많은 공간을 차지합니다. 받는사람
LargeTopAppBar
컴포저블을 사용합니다.
앞의 스니펫과 달리 이 예에서는
전달하는 값을 가져오기 위한 exitUntilCollapsedScrollBehavior()
scrollBehavior
입니다. 따라서 사용자가
Scaffold의 내부 콘텐츠를 표시하지만, 사용자가
내부 콘텐츠입니다.
@Composable fun LargeTopAppBarExample() { val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior(rememberTopAppBarState()) Scaffold( modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection), topBar = { LargeTopAppBar( colors = TopAppBarDefaults.topAppBarColors( containerColor = MaterialTheme.colorScheme.primaryContainer, titleContentColor = MaterialTheme.colorScheme.primary, ), title = { Text( "Large Top App Bar", maxLines = 1, overflow = TextOverflow.Ellipsis ) }, navigationIcon = { IconButton(onClick = { /* do something */ }) { Icon( imageVector = Icons.AutoMirrored.Filled.ArrowBack, contentDescription = "Localized description" ) } }, actions = { IconButton(onClick = { /* do something */ }) { Icon( imageVector = Icons.Filled.Menu, contentDescription = "Localized description" ) } }, scrollBehavior = scrollBehavior ) }, ) { innerPadding -> ScrollContent(innerPadding) } }
이 구현은 다음과 같이 표시됩니다.
![왼쪽에는 작업 아이콘이 있고 오른쪽에는 플로팅 작업 버튼이 있는 하단 앱 바가 있는 앱의 화면](https://developer.android.google.cn/static/develop/ui/compose/images/components/appbar-large.png?authuser=19&hl=ko)
하단 앱 바
하단 앱 바를 만들려면 BottomAppBar
컴포저블을 사용합니다. 사용
컴포저블은 아래 설명된 상단 앱 바 컴포저블과 매우 유사합니다.
이 페이지의 이전 섹션에 나와 있습니다. 다음 키의 컴포저블을 전달합니다.
매개변수:
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", ) } IconButton(onClick = { /* do something */ }) { Icon( Icons.Filled.Mic, contentDescription = "Localized description", ) } IconButton(onClick = { /* do something */ }) { Icon( Icons.Filled.Image, 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." ) } }
이 구현은 다음과 같이 표시됩니다.
![왼쪽에는 작업 아이콘이 있고 오른쪽에는 플로팅 작업 버튼이 있는 하단 앱 바가 있는 앱의 화면](https://developer.android.google.cn/static/develop/ui/compose/images/components/appbar-bottom.png?authuser=19&hl=ko)