#Material3 Top app bar
=>https://m3.material.io/components/top-app-bar/overview
Google이 말하는 Top app bar
-현재 화면과 관련되 제목과 작업등을 사용자에게 보여주고 싶을 때 사용한다. 이때 상단앱에 해당 내용들이 포함되어야 한다.
-4가지의 유형으로 나뉘는데 , [1.중앙정렬] , [2.소형] , [3.중형] , [4.대형] 이렇게 4가지의 유형으로 나뉜다.
-화면을 스크롤 할 때 컨테이터 채우기 색상을 적용하여 앱 바와 본문 콘텐츠를 분리해야 한다. 또한 하단으로 스크롤시 앱바의 색상이 점진적으로 진해져야 하거나 앱바가 사라졌다가 올릴 때 다시 올라가게 하는등 앱바와 본문 콘텐츠는 분리되어야 한다.
-상단 앱 바의 넓이 는 기기의 넓이와 동일하다.
-탐색바를 통해서 앱간 이동이 가능하게 설정해도 괜찮다.
[1.중앙정렬]
- 앱의 메인 페이지에서 사용한다. 앱의 이름 또는 페이지 제목을 표시하고자 할 때 사용된다. 해당 바를 통해서 여러 화면으로 이동 할 수 도 있다.
[2.소형]
-백 네비게이션 기능이 있으며 여러 작업이 필요한 축소된 레이아웃이나 스크롤된 뷰의 하위 페이지에 사용된다.
[3.중형]
-스크롤하기 전의 작은 상단 앱 바의 초기 상태에 사용된다. 더 큰 제목을 표시하는데 사용된다.
[4.대형]
-더 큰 상단 앱바에 사용되고 페이지의 제목을 강조하는 데 사용된다.
구글이 사진으로 보여주는 Top app bar
- 상단 앱 바의 컨테이너는 탐색아이콘 , 헤드라인 등 여러 아이콘을 가지고 있고 해당 아이콘들에 기능을 부여할 수 있다.
- 상단 앱 바의 넓이는 기기의 넓이와 같고 , 컨테이너는 직사각형으로 되야된다. 무슨 뜻이냐면은 곡선모양으로 탑 앱 바가 구성되면 안된다는 것이다.
- 상단 앱 바는 가독성을 보장하고 UI의 일관성을 유지하기 위한 기본 높이가 설정되어 있으므로 이를 유지하라고 권장하며 , 상단 앱 바의 높이를 기본 높이 보다 더 짧게 만드려고 하지 말라고 권장하고 있다.
- 상단 앱 바는 네비게이션 기능을 탑재할 수 있는 탐색 아이콘을 포함하고 있다. 이 때 이 탐색아이콘은 상단 앱 바의 맨 왼쪽에 위치해야 한다. 또한 탐색아이콘은 네비게이션 기능을 열 수 도 있고 , 뒤로 가기 화살표를 통해서 이전 화면으로 이동 할 수 있다.
- 중앙정렬 / 소형 / 중형 의 상단 앱 바에서는 텍스트의 줄 바꿈을 실행하면 안된다. 만약 너무 길다면 대형 상단 앱 바를 사용하라고 말하고 있다.
- 소형 / 중형 /대형 상단 앱 바의 헤드라인은 컨테이너의 시작 자리에 정렬되어야 하며, 중앙 정렬 상단 앱 바의 경우 헤드라인은 중아에 정렬된다.
-
사용자와 상호작용이 가능한 아이콘들은 헤드라인의 뒤 + 컨테이너의 끝 부분에 배치해야 하며 가장 자주 사용될 가능성이 높은 아이콘을 헤드라인 쪽에 가까운 순서로 배치하여야 한다.
-
세개 이상의 상호작용이 가능한 아이콘이 있다면 상대적으로 덜 중요한 아이콘들은 overflow menu안에 넣어서 활용하면 딘다. 이때 overflow menu의 아이콘은 컨테이너의 우측 끝에 존재해야 한다.
코드로 구현하기
1 Scafflod
-Material3에서는 Scaffold()라는 메서드를 제공한다. 이는 Material3에서 실험적으로 제공하는 API이기 때문에 언제든지 변경 될 수 있는 가능성이 존재한다.
-Scaffod를 사용해서 [topBar / bottomBar / snackbarHost / floatingActionButton] 등등을 구성하는데 도움을 준다.
@ExperimentalMaterial3Api
@Composable
fun CenterAlignedTopAppBar(
title: @Composable () -> Unit,
modifier: Modifier = Modifier,
navigationIcon: @Composable () -> Unit = {},
actions: @Composable RowScope.() -> Unit = {},
windowInsets: WindowInsets = TopAppBarDefaults.windowInsets,
colors: TopAppBarColors = TopAppBarDefaults.centerAlignedTopAppBarColors(),
scrollBehavior: TopAppBarScrollBehavior? = null
) {
SingleRowTopAppBar(
modifier = modifier,
title = title,
titleTextStyle =
MaterialTheme.typography.fromToken(TopAppBarSmallTokens.HeadlineFont),
centeredTitle = true,
navigationIcon = navigationIcon,
actions = actions,
colors = colors,
windowInsets = windowInsets,
scrollBehavior = scrollBehavior
)
}@ExperimentalMaterial3Api
@Composable
fun SmallTopAppBar(
title: @Composable () -> Unit,
modifier: Modifier = Modifier,
navigationIcon: @Composable () -> Unit = {},
actions: @Composable RowScope.() -> Unit = {},
windowInsets: WindowInsets = TopAppBarDefaults.windowInsets,
colors: TopAppBarColors = TopAppBarDefaults.smallTopAppBarColors(),
scrollBehavior: TopAppBarScrollBehavior? = null
) = TopAppBar(title, modifier, navigationIcon, actions, windowInsets, colors, scrollBehavior)
2 [중앙 정렬 상단 앱 바]
-CenterAlignedTopAppBar()를 통해서 구현된다.
@ExperimentalMaterial3Api
@Composable
fun CenterAlignedTopAppBar(
title: @Composable () -> Unit,
modifier: Modifier = Modifier,
navigationIcon: @Composable () -> Unit = {},
actions: @Composable RowScope.() -> Unit = {},
windowInsets: WindowInsets = TopAppBarDefaults.windowInsets,
colors: TopAppBarColors = TopAppBarDefaults.centerAlignedTopAppBarColors(),
scrollBehavior: TopAppBarScrollBehavior? = null
) {
SingleRowTopAppBar(
modifier = modifier,
title = title,
titleTextStyle =
MaterialTheme.typography.fromToken(TopAppBarSmallTokens.HeadlineFont),
centeredTitle = true,
navigationIcon = navigationIcon,
actions = actions,
colors = colors,
windowInsets = windowInsets,
scrollBehavior = scrollBehavior
)
}3 [소형 상단 앱 바]
-기존에는 "SmallTopAppBar()"를 통해서 소형 상단 앱 바를 구현했지만 , 이제 Deprecated되어서 "TopAppBar()"를 통해서 구현된다.
@ExperimentalMaterial3Api
@Composable
fun TopAppBar(
title: @Composable () -> Unit,
modifier: Modifier = Modifier,
navigationIcon: @Composable () -> Unit = {},
actions: @Composable RowScope.() -> Unit = {},
windowInsets: WindowInsets = TopAppBarDefaults.windowInsets,
colors: TopAppBarColors = TopAppBarDefaults.smallTopAppBarColors(),
scrollBehavior: TopAppBarScrollBehavior? = null
) {
SingleRowTopAppBar(
modifier = modifier,
title = title,
titleTextStyle = MaterialTheme.typography.fromToken(TopAppBarSmallTokens.HeadlineFont),
centeredTitle = false,
navigationIcon = navigationIcon,
actions = actions,
windowInsets = windowInsets,
colors = colors,
scrollBehavior = scrollBehavior
)
}4 [중형 상단 앱 바]
-MediumTopAppBar()를 통해서 구현된다.
@ExperimentalMaterial3Api
@Composable
fun MediumTopAppBar(
title: @Composable () -> Unit,
modifier: Modifier = Modifier,
navigationIcon: @Composable () -> Unit = {},
actions: @Composable RowScope.() -> Unit = {},
windowInsets: WindowInsets = TopAppBarDefaults.windowInsets,
colors: TopAppBarColors = TopAppBarDefaults.mediumTopAppBarColors(),
scrollBehavior: TopAppBarScrollBehavior? = null
) {
TwoRowsTopAppBar(
modifier = modifier,
title = title,
titleTextStyle = MaterialTheme.typography.fromToken(TopAppBarMediumTokens.HeadlineFont),
smallTitleTextStyle = MaterialTheme.typography.fromToken(TopAppBarSmallTokens.HeadlineFont),
titleBottomPadding = MediumTitleBottomPadding,
smallTitle = title,
navigationIcon = navigationIcon,
actions = actions,
colors = colors,
windowInsets = windowInsets,
maxHeight = TopAppBarMediumTokens.ContainerHeight,
pinnedHeight = TopAppBarSmallTokens.ContainerHeight,
scrollBehavior = scrollBehavior
)
}5 [대형 상단 앱 바]
-LargeTopAppBar()를 통해서 구현된다.
@ExperimentalMaterial3Api
@Composable
fun LargeTopAppBar(
title: @Composable () -> Unit,
modifier: Modifier = Modifier,
navigationIcon: @Composable () -> Unit = {},
actions: @Composable RowScope.() -> Unit = {},
windowInsets: WindowInsets = TopAppBarDefaults.windowInsets,
colors: TopAppBarColors = TopAppBarDefaults.largeTopAppBarColors(),
scrollBehavior: TopAppBarScrollBehavior? = null
) {
TwoRowsTopAppBar(
title = title,
titleTextStyle = MaterialTheme.typography.fromToken(TopAppBarLargeTokens.HeadlineFont),
smallTitleTextStyle = MaterialTheme.typography.fromToken(TopAppBarSmallTokens.HeadlineFont),
titleBottomPadding = LargeTitleBottomPadding,
smallTitle = title,
modifier = modifier,
navigationIcon = navigationIcon,
actions = actions,
colors = colors,
windowInsets = windowInsets,
maxHeight = TopAppBarLargeTokens.ContainerHeight,
pinnedHeight = TopAppBarSmallTokens.ContainerHeight,
scrollBehavior = scrollBehavior
)
}6 예시코드를 통한 parameter 설명 및 사용법
-
아래 코드를 보면 LargeTopAppBar라는 함수가 사용되었다. 이는 단지 parameter에 대한 설명을 작성하기 위한 임의의 코드이다. 저 LargeTopAppBar가 들어갈 자리에 위에서 2~5에 작성된 메서드 중 하나를 원하는 대로 넣어주면 된다.
-
아무거나 넣어도 호환이 된다는 것은 서로 같은 파라미터를 공유한다는 것이고 각각의 parameter는 같은 기능을 한다는 것이기에 각각의 parameter가 어떠한 역할을 하는지 설명하도록 하겠다.
val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()
topBar = {
CenterAlignedTopAppBar(
title = {
Text(text = "상단 앱 바")
},
navigationIcon = {
IconButton(onClick = { /*TODO*/ }) {
Icon(
imageVector = Icons.Default.Menu,
contentDescription = null
)
}
},
actions = {
IconButton(onClick = { /*TODO*/ }) {
Icon(
imageVector = Icons.Default.FavoriteBorder,
contentDescription = null
)
}
IconButton(onClick = { /*TODO*/ }) {
Icon(
imageVector = Icons.Default.Edit,
contentDescription = null
)
}
},
scrollBehavior = scrollBehavior,
)
}-
아래는 4가지의 종류를 갖는 상단 앱 바들이 공통적으로 갖는 parameter에 대한 설명이다.
-
우선 중앙정렬 / 소형 , 중형 , 대형 이렇게 구분하여 각각의 Spec을 보겠다.
-중앙 정렬 상단 앱 바 (메인 화면에서 사용)
- title : Headline에 들어갈 내용을 정리한다.
- navigationIcon : Leading icon에 들어갈 이미지를 정의하고 아이콘 클릭 이벤트를 설정한다. 여기서 네비게이션 기능을 추가하고 싶으면 Compose-Navigation을 Scaffold의 후행 람다에 정의해주면 된다.
- actions : Trailing icon에 들어갈 이미지를 정의하고 아이콘 클릭 이벤트 설정
-소형 중형 대형 상단 앱 바 (메인 이외의 화면에서 사용)
- title : Headline에 들어갈 내용을 정리한다.
- navigationIcon : Leading navigation icon에 들어갈 이미지를 정의하고 아이콘 클릭 이벤트를 설정한다.
- actions : Trailing icons에 들어갈 이미지를 정의하고 아이콘 클릭 이벤트 설정
-scrollBehavior : 스크롤 할 때 어떤 형태로 스크롤 할 것인지를 정하는 것이다.
- pinnedScrollBehavior : (상단 하단 둘다)스크롤 시 상단 앱 바 고정
- enterAlwaysScrollBehavior : 하단 스크롤 시 상단 앱 바 사라짐 / 상단 스크롤 시 상단 앱 바 생김
- exitUntilCollapsedScrollBehavior : 앱이 시작되고 첫 화면이 사라진 순간 부터 상단 앱 바가 사라진 후 다시 맨 처음 화면으로 돌아오면 앱 바가 보인다.
-
