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

ลองใช้วิธีแบบ Compose

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

ปุ่ม →

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

คุณสร้างปุ่มในเลย์เอาต์ได้ 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>

โค้ดก่อนหน้าจะสร้างผลลัพธ์คล้ายกับตัวอย่างต่อไปนี้

ตอบสนองต่อเหตุการณ์การคลิก

เมื่อผู้ใช้แตะปุ่ม ออบเจ็กต์ Button จะได้รับเหตุการณ์ on-click

หากต้องการประกาศเครื่องจัดการเหตุการณ์โดยใช้โปรแกรม ให้สร้างออบเจ็กต์ View.OnClickListener แล้วกำหนดให้กับปุ่มโดยการเรียกใช้ setOnClickListener(View.OnClickListener) ดังตัวอย่างต่อไปนี้

findViewById<Button>(R.id.supabutton)
  .setOnClickListener {
      Log.d("BUTTONS", "User tapped the Supabutton")
  }

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> แรกกำหนดบิตแมปที่จะใช้เมื่อแตะปุ่ม (เปิดใช้งาน)
   • ส่วนที่ 2 <item> จะกำหนดบิตแมปที่จะใช้เมื่อปุ่มโฟกัส เช่น เมื่อปุ่มไฮไลต์โดยใช้แทร็กบอลหรือแป้นบังคับทิศทาง
   • ส่วน <item> ที่ 3 จะกำหนดบิตแมปที่จะใช้เมื่อปุ่มอยู่ในสถานะเริ่มต้น โดยที่ไม่ได้แตะหรือโฟกัส

   ไฟล์ XML นี้แสดงถึงทรัพยากร Drawable รายการเดียว เมื่อ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