แถบแอปคือคอนเทนเนอร์ที่ให้ผู้ใช้เข้าถึงฟีเจอร์หลักๆ และ รายการนำทาง แถบแอปมี 2 ประเภท ได้แก่ แถบแอปด้านบนและแอปด้านล่าง บาร์ ลักษณะและจุดประสงค์ที่เกี่ยวข้องมีดังนี้
ประเภท |
รูปลักษณ์ |
วัตถุประสงค์ |
---|---|---|
แถบแอปด้านบน |
ที่ด้านบนของหน้าจอ |
ให้สิทธิ์เข้าถึงงานและข้อมูลหลัก โดยทั่วไปจะโฮสต์ชื่อ รายการการทำงานหลัก และรายการการนำทางบางอย่าง |
แถบด้านล่างของแอป |
ทางด้านล่างของหน้าจอ |
โดยปกติแล้วจะมีรายการการนำทางหลักรวมอยู่ด้วย อาจให้สิทธิ์เข้าถึงการดำเนินการหลักอื่นๆ ด้วย เช่น ผ่านปุ่มการทำงานแบบลอยที่มี |
หากต้องการใช้แถบแอปด้านบนและแถบด้านล่างของแอป ให้ใช้ TopAppBar
และ
BottomAppBar
Composable ตามลำดับ ซึ่งช่วยให้คุณสร้างวิดีโอที่สม่ำเสมอ
ที่ครอบคลุมทั้งการควบคุมการนำทางและการดำเนินการ
ซึ่งสอดคล้องกับหลักการของดีไซน์ Material
แถบแอปยอดนิยม
ตารางต่อไปนี้แสดงแถบแอปยอดนิยม 4 ประเภท
ประเภท |
ตัวอย่าง |
---|---|
เล็ก: สำหรับหน้าจอที่ไม่ต้องนำทางหรือดำเนินการอะไรมาก |
|
จัดกึ่งกลาง: สำหรับหน้าจอที่มีการกระทำหลักรายการเดียว |
|
ปานกลาง: สำหรับหน้าจอที่ต้องไปยังส่วนต่างๆ และการดำเนินการในระดับปานกลาง |
|
ใหญ่: สำหรับหน้าจอที่ต้องมีการนำทางและการดำเนินการจำนวนมาก |
|
แพลตฟอร์ม API
Composable ต่างๆ ที่ให้คุณใช้งานแอปยอดนิยม 4 อันดับแรก ค่อนข้างคล้ายกัน โดยมีพารามิเตอร์ที่สำคัญหลายอย่าง ดังนี้
title
: ข้อความที่ปรากฏในแถบแอปnavigationIcon
: ไอคอนหลักสำหรับการนำทาง ปรากฏใน ทางด้านซ้ายของแถบแอปactions
: ไอคอนที่ให้ผู้ใช้เข้าถึงการดำเนินการที่สำคัญ ข้อความจะปรากฏ ที่ด้านขวาของแถบแอปscrollBehavior
: กำหนดวิธีที่แถบแอปด้านบนตอบสนองต่อการเลื่อนของ ที่ข้างในของนั่งร้านcolors
: กำหนดลักษณะที่แถบแอปจะปรากฏ
ลักษณะการทำงานของการเลื่อน
คุณสามารถควบคุมการตอบสนองของแถบแอปเมื่อผู้ใช้เลื่อนหน้าจอ
ที่ภายในโครงข่ายประสาทได้ โดยสร้างอินสแตนซ์ของ
TopAppBarScrollBehavior
และส่งไปยังแถบแอปด้านบนสำหรับ
พารามิเตอร์ scrollBehavior
TopAppBarScrollBehavior
มี 3 ประเภท ดังนี้
enterAlwaysScrollBehavior
: เมื่อผู้ใช้ดึงด้านในของนั่งร้านขึ้น เนื้อหา แถบแอปด้านบนยุบไป แถบแอปจะขยายเมื่อผู้ใช้ ช่วยดึงเนื้อหาด้านในexitUntilCollapsedScrollBehavior
: คล้ายกับenterAlwaysScrollBehavior
แม้ว่าแถบแอปจะขยายออกเพิ่มเติมเมื่อผู้ใช้ดูจนถึงตอนท้ายของ ที่ภายในโครงข่ายประสาทได้pinnedScrollBehavior
: แถบแอปจะยังคงเดิมและไม่ตอบสนองต่อ ขณะเลื่อน
ตัวอย่างต่อไปนี้ใช้ตัวเลือกเหล่านี้หลายรายการ
ตัวอย่าง
ส่วนต่อไปนี้จะอธิบายการใช้งานสำหรับ 4 ประเภท แถบด้านบนของแอป รวมถึงตัวอย่างต่างๆ สำหรับวิธีควบคุมลักษณะการเลื่อน
เล็ก
หากต้องการสร้างแถบแอปด้านบนขนาดเล็ก ให้ใช้ Composable 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=8&hl=th)
จัดกึ่งกลาง
แถบแอปด้านบนที่อยู่ตรงกลางจะเหมือนกับแถบแอปขนาดเล็ก
แม้ว่าชื่อจะอยู่ตรงกลางภายในคอมโพเนนต์ก็ตาม ในการใช้งาน ให้ใช้
CenterAlignedTopAppBar
สำหรับ Composable โดยเฉพาะ
ตัวอย่างนี้ใช้ 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=8&hl=th)
กลาง
แถบแอปด้านบนขนาดกลางจะวางชื่อไว้ใต้ไอคอนเพิ่มเติม วิธีสร้าง
1. ให้ใช้ Composable 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()
ปรากฏขึ้น:
ใหญ่
แถบแอปด้านบนขนาดใหญ่คล้ายกับแถบปานกลาง แต่ระยะห่างจากขอบระหว่างแอป
และไอคอนจะมากกว่าและใช้พื้นที่บนหน้าจอโดยรวมมากกว่า ถึง
สร้างขึ้นมา 1 รายการโดยใช้ Composable 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=8&hl=th)
แถบด้านล่างของแอป
หากต้องการสร้างแถบแอปด้านล่าง ให้ใช้ Composable BottomAppBar
การใช้
Composable จะค่อนข้างคล้ายกับ Composable ในแถบแอปด้านบนที่อธิบายไว้ใน
ส่วนก่อนหน้าของหน้านี้ คุณส่งผ่าน Composable สำหรับคีย์ต่อไปนี้
ได้แก่
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=8&hl=th)