ปุ่มการทำงานแบบลอย

ปุ่มการทำงานแบบลอย (FAB) เป็นปุ่มที่เน้นระดับสูง ซึ่งช่วยให้ผู้ใช้ ดำเนินการหลักในแอปพลิเคชัน โดยจะส่งเสริมการดำเนินการที่มุ่งเน้นเพียงอย่างเดียว ซึ่งเป็นเส้นทางที่ผู้ใช้อาจใช้บ่อยที่สุด และมักจะพบที่ด้านล่างขวาของหน้าจอ

ลองพิจารณากรณีการใช้งาน 3 กรณีต่อไปนี้ที่คุณอาจใช้ FAB

  • สร้างรายการใหม่: ในแอปจดบันทึก ระบบอาจใช้ FAB เพื่อสร้างโน้ตใหม่อย่างรวดเร็ว
  • เพิ่มรายชื่อติดต่อใหม่: ในแอปแชท FAB อาจเปิดอินเทอร์เฟซที่ช่วยให้ผู้ใช้เพิ่มบุคคลในการสนทนาได้
  • ตำแหน่งศูนย์กลาง: ในอินเทอร์เฟซแผนที่ FAB สามารถตั้งศูนย์กลางของแผนที่ ตำแหน่งปัจจุบันของผู้ใช้

ในดีไซน์ Material มี FAB อยู่ 4 ประเภท ดังนี้

  • FAB: ปุ่มการทำงานแบบลอยขนาดปกติ
  • FAB ขนาดเล็ก: ปุ่มการทำงานแบบลอยขนาดเล็ก
  • FAB ขนาดใหญ่: ปุ่มการทำงานแบบลอยขนาดใหญ่
  • FAB แบบขยาย: ปุ่มการทำงานแบบลอยที่มีมากกว่าแค่ ไอคอน
ตัวอย่างคอมโพเนนต์ปุ่มการทำงานแบบลอยทั้ง 4 รายการ
รูปที่ 1 ปุ่มการทำงานแบบลอย 4 ประเภท

แพลตฟอร์ม API

แม้ว่าจะมีคอมโพสิเบิลหลายรายการที่คุณสามารถใช้เพื่อสร้างปุ่มการดำเนินการแบบลอยตัว (Floating Action Button) ที่สอดคล้องตาม Material Design แต่พารามิเตอร์ของคอมโพสิเบิลเหล่านี้ก็ไม่ได้แตกต่างกันมากนัก ตัวอย่างพารามิเตอร์หลักๆ ที่คุณควรทราบมีดังต่อไปนี้

  • onClick: ฟังก์ชันที่เรียกใช้เมื่อผู้ใช้กดปุ่ม
  • containerColor: สีของปุ่ม
  • contentColor: สีของไอคอน

ปุ่มการทำงานแบบลอย

หากต้องการสร้างปุ่มการดำเนินการแบบลอยตัวทั่วไป ให้ใช้คอมโพสิเบิลพื้นฐาน FloatingActionButton ตัวอย่างต่อไปนี้แสดงการใช้งาน FAB พื้นฐาน

@Composable
fun Example(onClick: () -> Unit) {
    FloatingActionButton(
        onClick = { onClick() },
    ) {
        Icon(Icons.Filled.Add, "Floating action button.")
    }
}
FloatingActionButton.kt

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

ปุ่มการทำงานแบบลอยแบบมาตรฐานที่มีมุมโค้งมน เงา และปุ่ม "เพิ่ม" ไอคอน
รูปที่ 2 ปุ่มการทำงานแบบลอย

ปุ่มขนาดเล็ก

หากต้องการสร้างปุ่มการดำเนินการแบบลอยขนาดเล็ก ให้ใช้คอมโพสิเบิล 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.")
    }
}
FloatingActionButton.kt

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

การใช้งาน SmallFloatingActionButton ที่มีไอคอน "เพิ่ม"
รูปที่ 3 ปุ่มการทำงานแบบลอยขนาดเล็ก

ปุ่มขนาดใหญ่

หากต้องการสร้างปุ่มการทำงานแบบลอยขนาดใหญ่ ให้ใช้ LargeFloatingActionButton Composable คอมโพสิเบิลนี้ไม่ได้แตกต่างไปจากตัวอย่างอื่นๆ มากนัก ยกเว้นว่าปุ่มจะใหญ่ขึ้น

ต่อไปนี้เป็นการใช้งาน FAB ขนาดใหญ่ที่ไม่ซับซ้อน

@Composable
fun LargeExample(onClick: () -> Unit) {
    LargeFloatingActionButton(
        onClick = { onClick() },
        shape = CircleShape,
    ) {
        Icon(Icons.Filled.Add, "Large floating action button")
    }
}
FloatingActionButton.kt

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

การใช้ LargeFloatingActionButton ที่มีไอคอน "เพิ่ม"
รูปที่ 4 ปุ่มการทำงานแบบลอยขนาดใหญ่

ปุ่มขยาย

คุณสามารถสร้างปุ่มการดำเนินการแบบลอยตัวที่ซับซ้อนมากขึ้นด้วยคอมโพสิเบิล ExtendedFloatingActionButton ความแตกต่างหลักระหว่าง และ 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") },
    )
}
FloatingActionButton.kt

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

การใช้ ExtendedFloatingActionButton ที่แสดงข้อความว่า "ปุ่มแบบขยาย" และไอคอนแก้ไข
รูปที่ 5 ปุ่มการทำงานแบบลอยที่มีทั้งข้อความและไอคอน

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