หน้านี้ได้รับการแปลโดย Cloud Translation API

แถบแอป

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

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

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

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

ตารางต่อไปนี้แสดงภาพรวมของแถบแอปด้านบน 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** แถบแอปด้านบนขนาดเล็ก

จัดกึ่งกลาง

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

ตัวอย่างนี้ใช้ 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** แถบแอปด้านบนที่กึ่งกลาง

กลาง

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

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

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

แถบแอป

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

แพลตฟอร์ม API

ลักษณะการทำงานของการเลื่อน

ตัวอย่าง

เล็ก

จัดกึ่งกลาง

กลาง

ใหญ่

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

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