ปุ่มการทำงานแบบลอย (FAB) เป็นปุ่มที่เน้นสูงซึ่งช่วยให้ผู้ใช้ดำเนินการหลักในแอปพลิเคชันได้ โดยจะส่งเสริมการดำเนินการที่มุ่งเน้นเพียงอย่างเดียว ซึ่งเป็นเส้นทางที่ผู้ใช้อาจใช้บ่อยที่สุด และมักจะพบที่ด้านล่างขวาของหน้าจอ
ลองพิจารณากรณีการใช้งาน 3 กรณีต่อไปนี้ที่คุณอาจใช้ FAB
- สร้างรายการใหม่: ในแอปจดบันทึก ระบบอาจใช้ FAB เพื่อสร้างโน้ตใหม่อย่างรวดเร็ว
- เพิ่มรายชื่อติดต่อใหม่: ในแอปแชท FAB อาจเปิดอินเทอร์เฟซที่ช่วยให้ผู้ใช้เพิ่มบุคคลในการสนทนาได้
- ตั้งศูนย์กลางตำแหน่ง: ในอินเทอร์เฟซแผนที่ FAB อาจตั้งศูนย์กลางแผนที่ที่ตำแหน่งปัจจุบันของผู้ใช้
FAB ใน Material Design มี 4 ประเภท ได้แก่
- FAB: ปุ่มการทำงานแบบลอยขนาดปกติ
- FAB ขนาดเล็ก: ปุ่มการทำงานแบบลอยขนาดเล็ก
- FAB ขนาดใหญ่: ปุ่มการทำงานแบบลอยขนาดใหญ่
- FAB แบบขยาย: ปุ่มการทำงานแบบลอยที่มีมากกว่าแค่ไอคอน
ความเข้ากันได้ของเวอร์ชัน
การใช้งานนี้กำหนดให้โปรเจ็กต์ของคุณตั้งค่า minSDK เป็น API ระดับ 21 ขึ้นไป
ทรัพยากร Dependency
Kotlin
implementation(platform("androidx.compose:compose-bom:2025.01.01"))
Groovy
implementation platform('androidx.compose:compose-bom:2025.01.01')
สร้างปุ่มการทำงานแบบลอยพื้นฐาน
หากต้องการสร้างปุ่มการทำงานแบบลอยทั่วไป ให้ใช้คอมโพสิเบิลพื้นฐาน FloatingActionButton
ดังนี้
@Composable fun Example(onClick: () -> Unit) { FloatingActionButton( onClick = { onClick() }, ) { Icon(Icons.Filled.Add, "Floating action button.") } }
ผลลัพธ์
![ปุ่มการทำงานแบบลอยมาตรฐานที่มีมุมมน เงา และไอคอน "เพิ่ม"](https://developer.android.google.cn/static/develop/ui/compose/images/components/fab.png?hl=th)
สร้างปุ่มการทำงานแบบลอยขนาดเล็ก
หากต้องการสร้างปุ่มการดำเนินการแบบลอยขนาดเล็ก ให้ใช้คอมโพสิเบิล SmallFloatingActionButton
ตัวอย่างต่อไปนี้แสดงวิธีดำเนินการพร้อมทั้งการเพิ่มสีที่กำหนดเอง
@Composable fun SmallExample(onClick: () -> Unit) { SmallFloatingActionButton( onClick = { onClick() }, containerColor = MaterialTheme.colorScheme.secondaryContainer, contentColor = MaterialTheme.colorScheme.secondary ) { Icon(Icons.Filled.Add, "Small floating action button.") } }
ผลลัพธ์
![การใช้งาน SmallFloatingActionButton ที่มีไอคอน "เพิ่ม"](https://developer.android.google.cn/static/develop/ui/compose/images/components/fab-small.png?hl=th)
สร้างปุ่มการทำงานแบบลอยขนาดใหญ่
หากต้องการสร้างปุ่มการดำเนินการแบบลอยตัวขนาดใหญ่ ให้ใช้คอมโพสิเบิล LargeFloatingActionButton
คอมโพสิเบิลนี้ไม่ได้แตกต่างไปจากตัวอย่างอื่นๆ มากนัก ยกเว้นว่าปุ่มจะใหญ่ขึ้น
ต่อไปนี้เป็นการใช้งาน FAB ขนาดใหญ่ที่ตรงไปตรงมา
@Composable fun LargeExample(onClick: () -> Unit) { LargeFloatingActionButton( onClick = { onClick() }, shape = CircleShape, ) { Icon(Icons.Filled.Add, "Large floating action button") } }
ผลลัพธ์
![การใช้ LargeFloatingActionButton ที่มีไอคอน "เพิ่ม"](https://developer.android.google.cn/static/develop/ui/compose/images/components/fab-large.png?hl=th)
สร้างปุ่มการทำงานแบบลอยแบบขยาย
คุณสร้างปุ่มการดำเนินการแบบลอยตัวที่ซับซ้อนมากขึ้นได้โดยใช้คอมโพสิเบิล ExtendedFloatingActionButton
ความแตกต่างสําคัญระหว่าง FloatingActionButton
กับ FloatingActionButton
คือ FloatingActionButton
มีพารามิเตอร์ icon
และ text
โดยเฉพาะ ซึ่งช่วยให้คุณสร้างปุ่มที่มีเนื้อหาที่ซับซ้อนมากขึ้นซึ่งปรับขนาดให้พอดีกับเนื้อหาได้อย่างเหมาะสม
ตัวอย่างข้อมูลต่อไปนี้แสดงวิธีใช้ ExtendedFloatingActionButton
พร้อมค่าตัวอย่างที่ส่งสำหรับ icon
และ text
@Composable fun ExtendedExample(onClick: () -> Unit) { ExtendedFloatingActionButton( onClick = { onClick() }, icon = { Icon(Icons.Filled.Edit, "Extended floating action button.") }, text = { Text(text = "Extended FAB") }, ) }
ผลลัพธ์
![การใช้ ExtendedFloatingActionButton ที่แสดงข้อความว่า "ปุ่มแบบขยาย" และไอคอนแก้ไข](https://developer.android.google.cn/static/develop/ui/compose/images/components/fab-extended.png?hl=th)
ข้อมูลสำคัญ
แม้ว่าจะมีคอมโพสิชันหลายรายการที่คุณสามารถใช้เพื่อสร้างปุ่มการดำเนินการแบบลอยตัวที่สอดคล้องกับ Material Design แต่พารามิเตอร์ของคอมโพสิชันเหล่านี้ก็ไม่ได้แตกต่างกันมากนัก พารามิเตอร์หลักที่ควรคำนึงถึงมีดังนี้
onClick
: ฟังก์ชันที่เรียกใช้เมื่อผู้ใช้กดปุ่มcontainerColor
: สีของปุ่มcontentColor
: สีของไอคอน
z## คอลเล็กชันที่มีคู่มือนี้
คู่มือนี้เป็นส่วนหนึ่งของคอลเล็กชันคู่มือฉบับย่อที่มีการดูแลจัดการซึ่งครอบคลุมเป้าหมายการพัฒนา Android ที่กว้างขึ้น ดังนี้
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=th)