ปุ่มการทำงานแบบลอย (FAB) เป็นปุ่มที่เน้นระดับสูง ซึ่งช่วยให้ผู้ใช้ ดำเนินการหลักในแอปพลิเคชัน โปรโมตการกระทำเดียวที่เจาะจง ซึ่งเป็นเส้นทางที่ลูกค้าพบมากที่สุดและมักพบ ซึ่งจะตรึงอยู่ที่ด้านขวาล่างของหน้าจอ
พิจารณากรณีการใช้งาน 3 กรณีต่อไปนี้ที่คุณอาจใช้ FAB
- สร้างรายการใหม่: ในแอปจดโน้ต อาจมีการใช้ FAB เพื่อ สร้างโน้ตใหม่
- เพิ่มผู้ติดต่อใหม่: ในแอปแชท FAB สามารถเปิดอินเทอร์เฟซที่ช่วยให้ ผู้ใช้เพิ่มคนในการสนทนา
- ตำแหน่งกึ่งกลาง: ในอินเทอร์เฟซแผนที่ FAB สามารถจัดแผนที่ไว้ตรงกลาง ตำแหน่งปัจจุบันของผู้ใช้
ในดีไซน์ Material มี FAB อยู่ 4 ประเภท ดังนี้
- FAB: ปุ่มการทำงานแบบลอยขนาดปกติ
- FAB ขนาดเล็ก: ปุ่มการทำงานแบบลอยขนาดเล็ก
- FAB ขนาดใหญ่: ปุ่มการทำงานแบบลอยขนาดใหญ่
- FAB แบบขยาย: ปุ่มการทำงานแบบลอยที่มีมากกว่าแค่ ไอคอน
แพลตฟอร์ม API
แม้ว่าจะมี Composable หลายรายการที่คุณสามารถใช้เพื่อสร้างการดำเนินการแบบลอยได้ ที่สอดคล้องกับดีไซน์ Material พารามิเตอร์ไม่ได้แตกต่างกันมากนัก ตัวอย่างพารามิเตอร์หลักๆ ที่คุณควรทราบมีดังต่อไปนี้
onClick
: ฟังก์ชันที่เรียกใช้เมื่อผู้ใช้กดปุ่มcontainerColor
: สีของปุ่มcontentColor
: สีของไอคอน
ปุ่มการทำงานแบบลอย
หากต้องการสร้างปุ่มการทำงานแบบลอยทั่วไป ให้ใช้
FloatingActionButton
Composable ตัวอย่างต่อไปนี้แสดง
การใช้งาน FAB เบื้องต้น
@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?authuser=6&hl=th)
ปุ่มขนาดเล็ก
ในการสร้างปุ่มการทำงานแบบลอยขนาดเล็ก ให้ใช้
SmallFloatingActionButton
Composable ตัวอย่างต่อไปนี้แสดง
วิธีการทำสิ่งต่างๆ ด้วยการเพิ่มสีที่กำหนดเอง
@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 ที่มีปุ่ม "add" ไอคอน](https://developer.android.google.cn/static/develop/ui/compose/images/components/fab-small.png?authuser=6&hl=th)
ปุ่มขนาดใหญ่
หากต้องการสร้างปุ่มการทำงานแบบลอยขนาดใหญ่ ให้ใช้
LargeFloatingActionButton
Composable Composable นี้ไม่ใช่
แตกต่างจากตัวอย่างอื่นๆ อย่างมาก
นอกเหนือจากข้อเท็จจริงที่ว่า
ทำให้ปุ่มใหญ่ขึ้น
ต่อไปนี้เป็นการใช้งาน FAB ขนาดใหญ่ที่ไม่ซับซ้อน
@Composable fun LargeExample(onClick: () -> Unit) { LargeFloatingActionButton( onClick = { onClick() }, shape = CircleShape, ) { Icon(Icons.Filled.Add, "Large floating action button") } }
การติดตั้งใช้งานนี้จะปรากฏดังนี้
![การใช้งาน LargeFloatingActionButton ที่มี "add" ไอคอน](https://developer.android.google.cn/static/develop/ui/compose/images/components/fab-large.png?authuser=6&hl=th)
ปุ่มขยาย
คุณสามารถสร้างปุ่มการทำงานแบบลอยที่ซับซ้อนขึ้นได้ด้วย
ExtendedFloatingActionButton
Composable ความแตกต่างหลักระหว่าง
และ 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?authuser=6&hl=th)