android Compose 顶部、底部应用栏
顶部应用栏:
1、小(TopAppBar)：适用于不需要大量导航或操作的界面。
2、居中对齐(CenterAlignedTopAppBar)：适用于具有单个主要操作的界面。
3、中等(MediumTopAppBar)：适用于需要适量导航和操作的界面。
4、大(LargeTopAppBar)：适用于需要大量导航和操作的界面。
底部应用栏:BottomAppBar
上下滑动看到顶部状态栏的变化
package com.wn.androidcomposedemo1.basegoogle
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.Surface
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material.icons.filled.Check
import androidx.compose.material.icons.filled.Edit
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Menu
import androidx.compose.material.icons.filled.Person
import androidx.compose.material3.BottomAppBar
import androidx.compose.material3.BottomAppBarDefaults
import androidx.compose.material3.CenterAlignedTopAppBar
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.FloatingActionButtonDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.LargeTopAppBar
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.MediumTopAppBar
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.rememberTopAppBarState
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.input.nestedscroll.nestedScroll
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.wn.androidcomposedemo1.ui.theme.AndroidComposeDemo1Theme
/**
* Author : wn
* Email : maoning20080808@163.com
* Date : 2026/6/19 16:48
* Description : 顶部应用栏
* 小：适用于不需要大量导航或操作的界面。
* 居中对齐：适用于具有单个主要操作的界面。
* 中等：适用于需要适量导航和操作的界面。
* 大：适用于需要大量导航和操作的界面。
*/
class TopAppBarActivity : ComponentActivity(){
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
AndroidComposeDemo1Theme() {
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
//可以看看4种不同的显示效果
//SmallTopAppBarExample()
//CenterAlignedTopAppBarExample()
//MediumTopAppBarExample()
LargeTopAppBarExample()
}
}
}
}
/**
* 第1种，小：适用于不需要大量导航或操作的界面。
*/
@OptIn(ExperimentalMaterial3Api::class)
@Composable
@Preview
fun SmallTopAppBarExample(){
Scaffold(
topBar = {
TopAppBar(
colors = TopAppBarDefaults.topAppBarColors(
containerColor = MaterialTheme.colorScheme.primaryContainer,
titleContentColor = MaterialTheme.colorScheme.primary
),
title = {
Text("Small Top Bar")
}
)
},
) {innerPadding ->
ScrollContent(modifier = Modifier.padding(innerPadding))
}
}
/**
* 第2种，中等顶部应用栏将标题放置在所有其他图标下方，scrollBehavior关联滚动
*/
@OptIn(ExperimentalMaterial3Api::class)
@Composable
@Preview
fun CenterAlignedTopAppBarExample(){
val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior(rememberTopAppBarState())
Scaffold(
modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
topBar = {
CenterAlignedTopAppBar(
colors = TopAppBarDefaults.topAppBarColors(
containerColor = MaterialTheme.colorScheme.primaryContainer,
titleContentColor = MaterialTheme.colorScheme.primary,
),
title = {
Text(
"Centered Top App Bar",
overflow = TextOverflow.Ellipsis,
)
},
navigationIcon = {
IconButton(onClick = {
}) {
Icon(
imageVector = Icons.Default.ArrowBack,
contentDescription = "Localized description"
)
}
},
actions = {
IconButton(onClick = {}) {
Icon(
imageVector = Icons.Filled.Menu,
contentDescription = "Localized description"
)
}
},
scrollBehavior = scrollBehavior
)
}
) { innerPadding ->
ScrollContent(modifier = Modifier.padding(innerPadding).fillMaxSize())
}
}
/**
* 向上滑动时，Medium Top App Bar标题会往上移动，最终卡在标题栏显示，往下滑动，又出现在下面
*/
@OptIn(ExperimentalMaterial3Api::class)
@Preview
@Composable
fun MediumTopAppBarExample(){
//enterAlwaysScrollBehavior当用户向上拉动 scaffold 的内部内容时，顶部应用栏会折叠。当用户开始向下拉动内部内容时，应用栏立即会展开。
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 = {}) {
Icon(
imageVector = Icons.Default.ArrowBack,
contentDescription = "Localized description")
}
},
actions = {
IconButton(onClick = {}) {
Icon(
imageVector = Icons.Default.Menu,
contentDescription = "Localized description"
)
}
},
scrollBehavior = scrollBehavior
)
}
) { innerPadding ->
ScrollContent(modifier = Modifier.padding(innerPadding).fillMaxSize())
}
}
/**
* 大型顶部应用栏与中型顶部应用栏类似，但标题与图标之间的内边距更大，并且总体上占据了更多屏幕空间。如需创建此类列表，请使用 LargeTopAppBar 可组合项。
*/
@OptIn(ExperimentalMaterial3Api::class)
@Preview
@Composable
fun LargeTopAppBarExample(){
//exitUntilCollapsedScrollBehavior 当用户将内容完全下拉时，应用栏才会展开
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 = {}) {
Icon(
imageVector = Icons.Default.ArrowBack,
contentDescription = "Localized description")
}
},
actions = {
IconButton(onClick = {}) {
Icon(
imageVector = Icons.Default.Menu,
contentDescription = "Localized description"
)
}
},
scrollBehavior = scrollBehavior
)
},
bottomBar = {
BottomAppBar(
actions = {
IconButton(onClick = {}) {
Icon(Icons.Default.Check, contentDescription = "Localized description")
}
IconButton(onClick = {}) {
Icon(
Icons.Default.Edit,
contentDescription = "Localized description"
)
}
IconButton(onClick = {}) {
Icon(
Icons.Default.Home,
contentDescription = "Localized description"
)
}
IconButton(onClick = {}) {
Icon(
Icons.Default.Person,
contentDescription = "Localized description"
)
}
},
floatingActionButton = {
FloatingActionButton(onClick = {},
containerColor = BottomAppBarDefaults.bottomAppBarFabColor,
elevation = FloatingActionButtonDefaults.bottomAppBarFabElevation()) {
Icon(Icons.Default.Add, "Localized description")
}
}
)
}
) { innerPadding ->
ScrollContent(modifier = Modifier.padding(innerPadding ).fillMaxSize())
}
}
@Composable
fun ScrollContent(modifier: Modifier){
//必须要设置modifier才能显示
LazyColumn(modifier = modifier) {
items(50){i ->
Text(text = "Compose item ${i}", modifier = Modifier.fillMaxSize().padding(top = 10.dp, bottom = 10.dp), lineHeight = 68.sp)
}
}
}
}