แถบแอป

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

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

รูปที่ 1 แถบแอปด้านบน (ซ้าย) และแถบแอปด้านล่าง (ขวา)

หากต้องการใช้แถบแอปด้านบนและแถบด้านล่างของแอป ให้ใช้ TopAppBar และ BottomAppBar Composable ตามลำดับ ซึ่งช่วยให้คุณสร้างวิดีโอที่สม่ำเสมอ ที่ครอบคลุมทั้งการควบคุมการนำทางและการดำเนินการ ซึ่งสอดคล้องกับหลักการของดีไซน์ Material

สำคัญ: โดยทั่วไปแล้ว ระบบจะส่งแถบแอปไปยังคอมโพสิชัน Scaffold ซึ่งมีพารามิเตอร์เฉพาะสำหรับการรับแถบแอป สำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีที่ Scaffold มอบวิธีในการจัดโครงสร้างแอปที่สะดวก ให้ไปที่ Scaffold หน้า

แถบแอปยอดนิยม

ตารางต่อไปนี้แสดงภาพรวมของแถบแอปด้านบน 4 ประเภท

ประเภท	ตัวอย่าง
เล็ก: สำหรับหน้าจอที่ไม่จำเป็นต้องมีการไปยังส่วนต่างๆ หรือการดำเนินการมากนัก
จัดกึ่งกลาง: สำหรับหน้าจอที่มีการกระทำหลักรายการเดียว
ปานกลาง: สำหรับหน้าจอที่ต้องไปยังส่วนต่างๆ และการดำเนินการในระดับปานกลาง
ใหญ่: สำหรับหน้าจอที่ต้องมีการนําทางและการดําเนินการจํานวนมาก

แพลตฟอร์ม API

คอมโพสิเบิลต่างๆ ที่ช่วยให้คุณใช้แถบแอปด้านบน 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.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)
    }
}
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 แถบแอปด้านบนที่อยู่ตรงกลาง

ใหญ่

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

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

หากต้องการสร้างแถบแอปด้านล่าง ให้ใช้คอมโพสิชัน 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 ตัวอย่างการใช้งานแถบแอปด้านล่าง

หมายเหตุ: คุณใช้ BottomAppBar โดยไม่ต้องส่งค่าสำหรับ actions และ floatingActionButton ก็ได้ ในกรณีดังกล่าว คุณสร้างแถบแอปด้านล่างที่กำหนดเองได้โดย ใส่เนื้อหาลงใน BottomAppBar เหมือนกับที่คุณทำคอนเทนเนอร์อื่นๆ

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

• เอกสาร Material3 - แถบแอปด้านบน
• เอกสาร Material3 - แถบด้านล่างของแอป
• สแคฟเฟิลด์