แถบแอป

แถบแอปคือคอนเทนเนอร์ที่ให้ผู้ใช้เข้าถึงฟีเจอร์หลักๆ และ รายการนำทาง แถบแอปมี 2 ประเภท ได้แก่ แถบแอปด้านบนและแอปด้านล่าง บาร์ ลักษณะและจุดประสงค์ที่เกี่ยวข้องมีดังนี้

ประเภท

รูปลักษณ์

วัตถุประสงค์

แถบแอปด้านบน

ที่ด้านบนของหน้าจอ

ให้สิทธิ์เข้าถึงงานและข้อมูลหลัก โดยทั่วไปจะโฮสต์ชื่อ รายการการทำงานหลัก และรายการการนำทางบางอย่าง

แถบด้านล่างของแอป

ทางด้านล่างของหน้าจอ

โดยปกติแล้วจะมีรายการการนำทางหลักรวมอยู่ด้วย อาจให้สิทธิ์เข้าถึงการดำเนินการหลักอื่นๆ ด้วย เช่น ผ่านปุ่มการทำงานแบบลอยที่มี
วันที่ ตัวอย่างแถบแอปด้านบนและด้านล่าง
รูปที่ 1 แถบแอปด้านบน (ซ้าย) และแถบแอปด้านล่าง (ขวา)

หากต้องการใช้แถบแอปด้านบนและแถบด้านล่างของแอป ให้ใช้ 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)
    }
}
AppBar.kt

การติดตั้งใช้งานนี้จะปรากฏดังนี้

วันที่ ตัวอย่างแถบแอปด้านบนขนาดเล็ก
รูปที่ 2 แถบแอปขนาดเล็กด้านบน

จัดกึ่งกลาง

แถบแอปด้านบนที่อยู่ตรงกลางจะเหมือนกับแถบแอปขนาดเล็ก แม้ว่าชื่อจะอยู่ตรงกลางภายในคอมโพเนนต์ก็ตาม ในการใช้งาน ให้ใช้ CenterAlignedTopAppBar สำหรับ Composable โดยเฉพาะ

ตัวอย่างนี้ใช้ enterAlwaysScrollBehavior() เพื่อรับค่าที่ผ่าน สำหรับ scrollBehavior ดังนั้น แถบจะยุบเมื่อผู้ใช้เลื่อน ที่ภายในโครงข่ายประสาทได้

@Composable
fun CenterAlignedTopAppBarExample() {
    val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(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",
                        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)
    }
}
AppBar.kt

การติดตั้งใช้งานนี้จะปรากฏดังนี้

วันที่ เขียนข้อความแสดงแทนที่นี่
รูปที่ 3 แถบแอปด้านบนที่อยู่ตรงกลาง

กลาง

แถบแอปด้านบนขนาดกลางจะวางชื่อไว้ใต้ไอคอนเพิ่มเติม วิธีสร้าง 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)
    }
}
AppBar.kt

การติดตั้งใช้งานนี้มีลักษณะดังต่อไปนี้ โดยมีการสาธิตวิธีเลื่อนหน้าจอ พฤติกรรมจาก enterAlwaysScrollBehavior() ปรากฏขึ้น:

รูปที่ 4 แถบแอปด้านบนที่อยู่ตรงกลาง

ใหญ่

แถบแอปด้านบนขนาดใหญ่คล้ายกับแถบปานกลาง แต่ระยะห่างจากขอบระหว่างแอป และไอคอนจะมากกว่าและใช้พื้นที่บนหน้าจอโดยรวมมากกว่า ถึง สร้างขึ้นมา 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)
    }
}
AppBar.kt

การติดตั้งใช้งานนี้จะปรากฏดังนี้

วันที่ หน้าจอในแอปที่มีแถบแอปด้านล่างสำหรับไอคอนการดำเนินการทางด้านซ้าย และปุ่มการทำงานแบบลอยทางด้านขวา
รูปที่ 5 ตัวอย่างการใช้งานแถบแอปด้านบนขนาดใหญ่

แถบด้านล่างของแอป

หากต้องการสร้างแถบแอปด้านล่าง ให้ใช้ 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."
        )
    }
}
AppBar.kt

การติดตั้งใช้งานนี้จะปรากฏดังนี้

วันที่ หน้าจอในแอปที่มีแถบแอปด้านล่างสำหรับไอคอนการดำเนินการทางด้านซ้าย และปุ่มการทำงานแบบลอยทางด้านขวา
รูปที่ 6 ตัวอย่างการใช้งานแถบแอปด้านล่าง

แหล่งข้อมูลเพิ่มเติม