แถบแอป

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

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

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

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

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

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

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

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

แพลตฟอร์ม API

คอมโพสิเบิลต่างๆ ที่ช่วยให้คุณใช้แถบแอปด้านบน 4 แบบที่แตกต่างกันนั้นค่อนข้างคล้ายกัน โดยแชร์พารามิเตอร์หลักหลายรายการดังนี้

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

ลักษณะการเลื่อน

คุณสามารถควบคุมวิธีที่แถบแอปตอบสนองเมื่อผู้ใช้เลื่อนเนื้อหาภายในของเทมเพลตที่ระบุ โดยสร้างอินสแตนซ์ของ TopAppBarScrollBehavior แล้วส่งไปยังแถบแอปด้านบนสําหรับพารามิเตอร์ scrollBehavior

TopAppBarScrollBehavior มี 3 ประเภท ดังนี้

• enterAlwaysScrollBehavior: เมื่อผู้ใช้ดึงเนื้อหาด้านในของโครงสร้างขึ้น แถบแอปด้านบนจะยุบลง แถบแอปจะขยายขึ้นเมื่อผู้ใช้ดึงเนื้อหาด้านในลง
• exitUntilCollapsedScrollBehavior: คล้ายกับ enterAlwaysScrollBehavior แต่แถบแอปจะขยายเพิ่มเติมเมื่อผู้ใช้ไปถึงเนื้อหาด้านในของโครงร่าง
• pinnedScrollBehavior: แถบแอปยังคงอยู่ในตำแหน่งเดิมและไม่ตอบสนองต่อการเลื่อน

ตัวอย่างต่อไปนี้ใช้ตัวเลือกเหล่านี้หลายรายการ

ตัวอย่าง

ส่วนต่อไปนี้แสดงการใช้งานแถบแอปด้านบน 4 ประเภท รวมถึงตัวอย่างวิธีต่างๆ ในการควบคุมลักษณะการเลื่อน

เล็ก

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

ตัวอย่างนี้ใช้ 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

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

รูปที่ 6 ตัวอย่างการใช้งานแถบแอปด้านล่าง

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

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

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