สร้างปุ่มการทำงานแบบลอย (FAB)

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

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

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

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

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

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

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

การขึ้นต่อกัน

Kotlin

  implementation(platform("androidx.compose:compose-bom:2025.05.00"))

Groovy

  implementation platform('androidx.compose:compose-bom:2025.05.00')

สร้างปุ่มการทำงานแบบลอยพื้นฐาน

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

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

ผลลัพธ์

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

สร้างปุ่มการทำงานแบบลอยขนาดเล็ก

หากต้องการสร้างปุ่มลอยขนาดเล็ก ให้ใช้ Composable 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 ที่มีไอคอน "เพิ่ม"
รูปที่ 2 ปุ่มการทำงานแบบลอยขนาดเล็ก

สร้างปุ่มการทำงานแบบลอยขนาดใหญ่

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

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

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

ผลลัพธ์

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

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

คุณสร้างปุ่มลอยที่มีความซับซ้อนมากขึ้นได้ด้วย Composable ของ 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 ที่แสดงข้อความว่า "ปุ่มขยาย" และไอคอนแก้ไข
รูปที่ 4 ปุ่มการทำงานแบบลอยที่มีทั้งข้อความและไอคอน

ข้อมูลสำคัญ

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

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

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

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

ดูว่าฟังก์ชันที่ใช้ร่วมกันได้ช่วยให้คุณสร้างคอมโพเนนต์ UI ที่สวยงามตามระบบการออกแบบ Material Design ได้อย่างง่ายดาย ได้อย่างไร
คอลเล็กชันคู่มือฉบับย่อ

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

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