應用程式列是一種容器,可讓使用者存取主要功能,並 導覽項目。應用程式列分為兩種類型:頂端應用程式列和底部應用程式 格。兩者的外觀和用途如下:
類型 |
外觀 |
目的 |
---|---|---|
頂端應用程式列 |
畫面頂端。 |
可讓你存取重要工作和資訊。通常代管標題、核心操作項目和特定導覽項目, |
底部應用程式列 |
在畫面底部。 |
通常包含核心導覽項目。可能還提供其他按鍵動作的存取權,例如透過內含的懸浮動作按鈕。 |
如要實作頂端應用程式列和底部應用程式列,請使用 TopAppBar
和
BottomAppBar
可組合函式。可讓你
用於封裝導覽和動作控制項的介面,
與 Material Design 原則相輔相成
頂端應用程式列
下表列出頂端應用程式列的四種類型:
類型 |
範例 |
---|---|
小:適用於不需要大量導覽或動作的畫面。 |
|
置中對齊:適用於含有單一主要動作的螢幕。 |
|
中型:適用於需要適度導覽和動作的螢幕。 |
|
大型:適用於需要大量導覽和動作的螢幕。 |
|
API 介面
各種可組合函式,可讓您實作四個不同的頂端應用程式 長條也都很類似這些指南共用幾個重要參數:
title
:顯示在應用程式列上的文字。navigationIcon
:導覽的主要圖示。出現在 圖示。actions
:讓使用者存取重要動作的圖示。會顯示 在應用程式列右側scrollBehavior
:決定頂端應用程式列如何回應捲動畫面 顯示 Scaffold 的內部內容colors
:決定應用程式列的顯示方式。
捲動行為
您可以控制應用程式列在使用者捲動畫面
Sscaffold 的內部內容。方法是建立
TopAppBarScrollBehavior
,並傳遞至
scrollBehavior
參數。
TopAppBarScrollBehavior
分為三種類型。方法如下:
enterAlwaysScrollBehavior
:使用者舉起 Scaffold 內部畫面時 即可收合頂端應用程式列當使用者接著 收合內部內容exitUntilCollapsedScrollBehavior
:和enterAlwaysScrollBehavior
類似, 但應用程式列會在使用者抵達底部時額外展開 Sscaffold 的內部內容。pinnedScrollBehavior
:應用程式列會保持原樣,且不會回應 以及使用文字。
下列範例實作這些選項。
範例
以下各節將介紹四種不同類型的實作 頂端應用程式列,包括各種範例,說明如何控制捲動行為。
小
如要建立小型頂端應用程式列,請使用 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=0000&hl=zh-tw)
置中對齊
置中對齊的頂端應用程式列與小型應用程式列相同
但標題位於元件中央如要實作,請使用
專屬的 CenterAlignedTopAppBar
可組合函式。
這個範例使用 enterAlwaysScrollBehavior()
來取得其傳遞的值
(scrollBehavior
)。因此,當使用者捲動
Sscaffold 的內部內容。
@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=0000&hl=zh-tw)
中
中型頂端應用程式列會將標題放在其他圖示下方。如要建立
第一種是使用 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
。因此,當使用者捲動
並會在使用者捲動至底部時展開
展開內部內容
@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=0000&hl=zh-tw)
底部應用程式列
如要建立底部應用程式列,請使用 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=0000&hl=zh-tw)