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

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

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

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

ใน Material Design FAB มี 4 ประเภท ได้แก่

FAB: ปุ่มการทำงานแบบลอยขนาดปกติ
FAB ขนาดเล็ก: ปุ่มการทำงานแบบลอยขนาดเล็ก
FAB ขนาดใหญ่: ปุ่มการทำงานแบบลอยขนาดใหญ่
FAB แบบขยาย: ปุ่มการทำงานแบบลอยที่มีมากกว่าแค่ ไอคอน

ตัวอย่างคอมโพเนนต์ปุ่มการทำงานแบบลอยทั้ง 4 รายการ — **รูปที่ 1** ปุ่มการทำงานแบบลอย 4 ประเภท

แพลตฟอร์ม API

แม้ว่าจะมี Composable หลายรายการที่คุณใช้สร้างปุ่มการทำงานแบบลอยให้สอดคล้องกับ Material Design ได้ แต่พารามิเตอร์ของ Composable เหล่านั้นก็ไม่ได้แตกต่างกันมากนัก พารามิเตอร์หลักที่คุณควรทราบมีดังนี้

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

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

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

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

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

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

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

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

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

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

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

หากต้องการสร้างปุ่มการทำงานแบบลอยขนาดใหญ่ ให้ใช้ LargeFloatingActionButton Composable 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 Composable ความแตกต่างที่สำคัญระหว่าง Composable นี้ กับ FloatingActionButton คือ Composable นี้มีพารามิเตอร์ 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** ปุ่มการทำงานแบบลอยที่มีทั้งข้อความและไอคอน

แพลตฟอร์ม API

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

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

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

ปุ่มแบบขยาย

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