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

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

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

คุณสามารถสร้างปุ่มในเลย์เอาต์ได้ 3 วิธี โดยขึ้นอยู่กับว่าคุณต้องการปุ่มที่มีข้อความ ไอคอน หรือทั้ง 2 อย่าง ดังนี้

  
  <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 รายการที่จะใช้สำหรับสถานะปุ่มต่างๆ

หากต้องการสร้าง drawable รายการสถานะสำหรับพื้นหลังของปุ่ม ให้ทำดังนี้

  1. สร้างบิตแมป 3 รายการสำหรับพื้นหลังของปุ่ม ซึ่งแสดงสถานะปุ่มเริ่มต้น ปุ่มที่แตะ และปุ่มที่มีโฟกัส สร้างบิตแมปเป็นบิตแมป9 ส่วนเพื่อให้รูปภาพพอดีกับปุ่มขนาดต่างๆ
  2. วางบิตแมปในไดเรกทอรี res/drawable/ ของโปรเจ็กต์ ตั้งชื่อบิตแมปแต่ละรายการให้สอดคล้องกับสถานะของปุ่มที่แสดง เช่น button_default.9.png, button_pressed.9.png และ button_focused.9.png
  3. สร้างไฟล์ 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> ลำดับที่ 3 จะกำหนดบิตแมปที่จะใช้เมื่อปุ่มอยู่ในสถานะเริ่มต้น ไม่มีการแตะหรือโฟกัส

    ไฟล์ XML นี้แสดงทรัพยากรที่ถอนออกได้รายการเดียว เมื่อมีการอ้างอิงโดย Button สำหรับพื้นหลัง รูปภาพที่แสดงจะเปลี่ยนไปตามสถานะของปุ่ม

  4. ใช้ไฟล์ 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