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

สร้างแถบแอปด้านล่างเพื่อช่วยผู้ใช้ไปยังส่วนต่างๆ และเข้าถึงฟังก์ชันในแอป ทําตามคําแนะนํานี้เพื่อเพิ่มแถบแอปด้านล่างลงในแอปโดยใช้คอมโพสิเบิล BottomAppBar

ความเข้ากันได้ของเวอร์ชัน

การใช้งานนี้กำหนดให้โปรเจ็กต์ต้องตั้งค่า minSDK เป็น API ระดับ 21 ขึ้นไป

ทรัพยากร Dependency

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

ใช้โค้ดต่อไปนี้เพื่อสร้างแถบด้านล่างของแอปที่มีปุ่มไอคอน 4 ปุ่ม และปุ่มการทำงานแบบลอย

@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."
        )
    }
}

ประเด็นสำคัญเกี่ยวกับรหัส

  • Scaffold ด้านนอกที่มี bottomBar อยู่
  • การใช้งาน bottomBar ที่มีรายการการดำเนินการ
  • การดำเนินการที่ใช้ IconButton ซึ่งมี Icon สำหรับข้อความคำอธิบายรูปภาพและเนื้อหา โดยแต่ละรายการมี onClick แลมบดาเพื่อดําเนินการเหล่านี้

คุณสามารถส่งคอมโพสิเบิลสสำหรับพารามิเตอร์หลักต่อไปนี้ได้

  • actions: ชุดไอคอนที่ปรากฏขึ้นทางด้านซ้ายของแถบ โดยปกติแล้ว รายการเหล่านี้จะเป็นการดำเนินการหลักสำหรับหน้าจอหนึ่งๆ หรือรายการการนำทาง
  • floatingActionButton: ปุ่มการทำงานแบบลอยที่ปรากฏขึ้นทางด้านขวาของแถบ

ผลลัพธ์

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

คอลเล็กชันที่มีคู่มือนี้

คู่มือนี้เป็นส่วนหนึ่งของคอลเล็กชันคู่มือฉบับย่อที่มีการดูแลจัดการ ซึ่งครอบคลุมเป้าหมายการพัฒนา Android ที่กว้างขึ้น ดังนี้

ดูวิธีใช้แพลตฟอร์มมาตรฐานเพื่อสร้างอินเทอร์เฟซผู้ใช้ที่ซับซ้อน โครงสร้างพื้นฐานจะยึดส่วนต่างๆ ของ UI ไว้ด้วยกัน ทำให้แอปมีรูปลักษณ์และความรู้สึกที่สอดคล้องกัน
ดูวิธีที่ฟังก์ชันคอมโพสิเบิลช่วยให้คุณสร้างคอมโพเนนต์ UI ที่สวยสะดุดตาตามระบบการออกแบบ Material Design ได้อย่างง่ายดาย

หากมีคำถามหรือความคิดเห็น

ไปที่หน้าคำถามที่พบบ่อยเพื่อดูคู่มือฉบับย่อหรือติดต่อเราเพื่อบอกความคิดเห็นของคุณ