ปุ่มประกอบด้วยข้อความหรือไอคอน หรือทั้งสองอย่างเพื่อสื่อสารสิ่งที่จะเกิดขึ้นเมื่อผู้ใช้ ก็แตะเลย
คุณสามารถสร้างปุ่มในเลย์เอาต์ได้ 3 วิธี ขึ้นอยู่กับ ไม่ว่าคุณจะต้องการปุ่มที่มีข้อความ ไอคอน หรือทั้งคู่:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="16dp" android:paddingRight="16dp" android:orientation="vertical" > <Button android:id="@+id/supabutton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="I'm a button" /> <ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:contentDescription="A tiny Android icon" android:src="@drawable/baseline_android_24" app:tint="#ff0000" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:drawableStart="@drawable/baseline_android_24" android:drawablePadding="4dp" android:drawableTint="#ff0000" android:text="I'm a button with an icon" /> </LinearLayout>
โค้ดก่อนหน้านี้จะสร้างในลักษณะนี้
![รูปภาพแสดงปุ่ม 3 ประเภท](https://developer.android.google.cn/static/images/ui/buttons.png?hl=th)
ตอบสนองต่อกิจกรรมการคลิก
เมื่อผู้ใช้แตะปุ่ม
ออบเจ็กต์ Button
รายการได้รับแอตทริบิวต์
เมื่อคลิก
หากต้องการประกาศเครื่องจัดการเหตุการณ์แบบเป็นโปรแกรม ให้สร้าง
View.OnClickListener
และกำหนดให้กับปุ่มโดยการเรียกใช้
setOnClickListener(View.OnClickListener)
,
ดังตัวอย่างต่อไปนี้
Kotlin
findViewById<Button>(R.id.supabutton) .setOnClickListener { Log.d("BUTTONS", "User tapped the Supabutton") }
Java
Button button = (Button) findViewById(R.id.supabutton); button.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { Log.d("BUTTONS", "User tapped the Supabutton"); } });
จัดรูปแบบปุ่ม
ลักษณะของปุ่ม ซึ่งได้แก่ ภาพพื้นหลังและแบบอักษร จะแตกต่างกันไปในแต่ละอุปกรณ์ เนื่องจากอุปกรณ์ของผู้ผลิตแต่ละรายมักจะมีรูปแบบเริ่มต้นสำหรับการป้อนข้อมูลที่แตกต่างกัน
หากต้องการกำหนดค่าปุ่มแต่ละปุ่มโดยใช้พื้นหลังต่างกัน ให้ระบุ
แอตทริบิวต์ android:background
ด้วยทรัพยากรที่ถอนออกได้หรือสี หรือคุณจะใช้รูปแบบสำหรับปุ่มก็ได้
ซึ่งทำงานคล้ายกับสไตล์ HTML เพื่อกำหนดคุณสมบัติที่หลากหลาย เช่น พื้นหลัง
แบบอักษร และขนาด ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้รูปแบบได้ที่
รูปแบบและธีม
ปุ่มไม่มีขอบ
ดีไซน์แบบหนึ่งที่มีประโยชน์คือการออกแบบแบบ "ไร้ขอบ" ปุ่มที่ไม่มีขอบคล้ายปุ่มพื้นฐาน เว้นแต่ว่าจะไม่มีเส้นขอบหรือพื้นหลัง แต่ยังคงเปลี่ยนลักษณะที่ปรากฏในระหว่างรัฐต่างๆ เช่น เมื่อแตะ
หากต้องการสร้างปุ่มที่ไม่มีขอบ ให้ใช้
borderlessButtonStyle
จัดรูปแบบให้กับปุ่ม ดังตัวอย่างต่อไปนี้
<Button android:id="@+id/supabutton" style="?android:attr/borderlessButtonStyle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="I'm a button" />
พื้นหลังที่กำหนดเอง
หากต้องการกำหนดรูปลักษณ์ของปุ่มใหม่อย่างแท้จริง คุณสามารถระบุพื้นหลังที่กำหนดเองได้ แทนที่จะให้บิตแมปหรือสีง่ายๆ พื้นหลังของคุณจะต้องเป็นรายการสถานะ ทรัพยากรที่เปลี่ยนรูปแบบตามสถานะปัจจุบันของปุ่ม
คุณสามารถกำหนดรายการรัฐในไฟล์ XML ที่กำหนดรูปภาพหรือสี 3 สีเพื่อใช้สำหรับ สถานะต่างๆ ของปุ่ม
หากต้องการสร้างรายการสถานะที่ถอนออกได้สำหรับพื้นหลังของปุ่ม ให้ทำดังนี้
- สร้างบิตแมป 3 รายการสำหรับพื้นหลังปุ่มที่แสดงถึงค่าเริ่มต้น การแตะ และโฟกัส สถานะปุ่ม เพื่อให้มั่นใจว่าภาพของคุณพอดีกับปุ่มขนาดต่างๆ ให้สร้างบิตแมปเป็น 9 แพตช์บิตแมป
- วางบิตแมปลงในไดเรกทอรี
res/drawable/
ของโปรเจ็กต์ ตั้งชื่อบิตแมปแต่ละรายการ เพื่อแสดงสถานะของปุ่มที่แสดง เช่นbutton_default.9.png
button_pressed.9.png
และbutton_focused.9.png
- สร้างไฟล์ XML ใหม่ในไดเรกทอรี
res/drawable/
ตั้งชื่ออะไรก็ได้ เช่นbutton_custom.xml
แทรก XML ดังนี้<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/button_pressed" android:state_pressed="true" /> <item android:drawable="@drawable/button_focused" android:state_focused="true" /> <item android:drawable="@drawable/button_default" /> </selector>
สิ่งนี้กำหนดทรัพยากรที่ถอนออกได้รายการเดียวซึ่งจะเปลี่ยนรูปภาพตามสถานะปัจจุบันของ ปุ่ม
<item>
แรกจะกำหนดบิตแมปที่จะใช้เมื่อแตะปุ่ม (เปิดใช้งานแล้ว)<item>
รายการที่ 2 จะกำหนดบิตแมปที่จะใช้เมื่อปุ่มโฟกัส เช่นเดียวกับเมื่อมีการไฮไลต์ปุ่มโดยใช้แทร็กบอลหรือแป้นบังคับทิศทาง<item>
ที่สามจะกำหนดบิตแมปที่จะใช้เมื่อปุ่มเป็นค่าเริ่มต้น สถานะ ทั้งไม่มีการแตะหรือโฟกัส
ไฟล์ XML นี้แสดงทรัพยากรที่ถอนออกได้รายการเดียว เมื่ออ้างอิงโดย
Button
สำหรับ พื้นหลังของปุ่ม ภาพที่แสดงจะเปลี่ยนแปลงตามสถานะของปุ่ม - ใช้ไฟล์ XML ที่ถอนออกได้เป็นพื้นหลังของปุ่มดังนี้
<Button android:id="@+id/button_send" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button_send" android:onClick="sendMessage" android:background="@drawable/button_custom" />
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับไวยากรณ์ XML นี้ รวมถึงวิธีการกำหนดปุ่มที่ถูกปิดใช้งาน
หรืออยู่ในสถานะอื่น อ่านเกี่ยวกับ
StateListDrawable