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

ลองใช้วิธีเขียน
Jetpack Compose เป็นชุดเครื่องมือ UI ที่แนะนำสำหรับ Android ดูวิธีเพิ่มคอมโพเนนต์ใน Compose

ปุ่มการทำงานแบบลอย (FAB) คือปุ่มวงกลมที่เรียกการดำเนินการหลักใน UI ของแอป เอกสารนี้แสดงวิธีเพิ่ม FAB ลงในเลย์เอาต์ ปรับแต่งลักษณะบางอย่าง และตอบสนองต่อการแตะปุ่ม

ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีออกแบบ FAB สําหรับแอปตามหลักเกณฑ์ของ Material Design ได้ที่ FAB ของ Material Design

รูปภาพที่แสดงหน้าจอแอปที่มี FloatingActionButton สีแดง
รูปที่ 1 ปุ่มการทำงานแบบลอย (FAB)

เพิ่มปุ่มการทำงานแบบลอยลงในเลย์เอาต์

โค้ดต่อไปนี้แสดงลักษณะที่ FloatingActionButton ปรากฏในไฟล์เลย์เอาต์

<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:src="@drawable/ic_my_icon"
        android:contentDescription="@string/submit"
        android:layout_margin="16dp" />

โดยค่าเริ่มต้น FAB จะมีสีตามแอตทริบิวต์ colorAccent ซึ่งคุณสามารถปรับแต่งด้วยชุดสีของธีมได้

คุณสามารถกําหนดค่าพร็อพเพอร์ตี้ FAB อื่นๆ โดยใช้แอตทริบิวต์ XML หรือเมธอดที่เกี่ยวข้อง เช่น ต่อไปนี้

  • ขนาดของ FAB โดยใช้แอตทริบิวต์ app:fabSize หรือเมธอด setSize()
  • สีของภาพกระเพื่อมของ FAB โดยใช้แอตทริบิวต์ app:rippleColor หรือเมธอด setRippleColor()
  • ไอคอน FAB โดยใช้แอตทริบิวต์ android:src หรือเมธอด setImageDrawable()

ตอบสนองต่อการแตะปุ่ม

จากนั้นจึงใช้ View.OnClickListener เพื่อจัดการการแตะ FAB ตัวอย่างเช่น โค้ดต่อไปนี้จะแสดง Snackbar เมื่อผู้ใช้แตะ FAB

Kotlin

val fab: View = findViewById(R.id.fab)
fab.setOnClickListener { view ->
    Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG)
            .setAction("Action", null)
            .show()
}

Java

FloatingActionButton fab = findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG)
                .setAction("Action", null).show();
    }
});

ดูข้อมูลเพิ่มเติมเกี่ยวกับความสามารถของ FAB ได้ที่การอ้างอิง API สำหรับ FloatingActionButton