หน้านี้ได้รับการแปลโดย Cloud Translation API

เพิ่มปุ่มลงในแอปของคุณ

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

คุณสามารถสร้างปุ่มในเลย์เอาต์ได้ 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 ประเภท — **รูปที่ 1** ปุ่ม 3 รูปแบบ

ตอบสนองต่อกิจกรรมการคลิก

เมื่อผู้ใช้แตะปุ่ม ออบเจ็กต์ 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> ที่สามจะกำหนดบิตแมปที่จะใช้เมื่อปุ่มเป็นค่าเริ่มต้น สถานะ ทั้งไม่มีการแตะหรือโฟกัส
หมายเหตุ: ลำดับขององค์ประกอบ <item> เป็นสิ่งสำคัญ เมื่อเนื้อหาที่ถอนออกได้นี้คือ มีการอ้างอิงองค์ประกอบ <item> จะได้รับการข้ามผ่านเพื่อระบุว่าเป็นองค์ประกอบใด เหมาะสมกับสถานะปัจจุบันของปุ่ม เนื่องจากบิตแมปเริ่มต้นไว้ท้ายสุด จะมีการใช้เฉพาะ เมื่อเงื่อนไข android:state_pressed และ android:state_focused ประเมินแล้วว่าเป็น "เท็จ"

ไฟล์ 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