Devahoy Logo
PublishedAt

Android

Android Button และการรับ Event ด้วย OnClick

Android Button และการรับ Event ด้วย OnClick

วันนี้พอดีมีน้องคนหนึ่งสอบถามมาเกี่ยวกับ Button ก็เลยทำเป็นบทความมาให้ซะเลย วันนี้จะมาพูดถึงเรื่อง Button ใน Android ครับ เป็นการใช้งาน Button และการ implements OnClickListener เพื่อให้ Button รับค่าต่างๆจากผู้ใช้งาน

จริงๆเรื่องนี้ไม่ได้เป็นเรื่องที่ใหม่ หรือยุ่งยากอะไรเลย เพียงแต่ถ้าเป็นมือใหม่ หรือเพิ่งหัดเขียน Android ก็อาจจะงงอยู่บ้างเล็กน้อย

Button คืออะไร?

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

Android Button รูปจาก developer.android.com

วิธีการสร้างปุ่ม Button ด้วย XML

การสร้างปุ่ม Button โดยใช้ไฟล์ xml มีโครงสร้างดังนี้

การสร้าง Button เฉพาะตัวอักษร ด้วยคลาส Button

1
<Button
2
android:layout_width="wrap_content"
3
android:layout_height="wrap_content"
4
android:text="This is Button" />

การสร้าง Button ด้วยรูปภาพ โดยใช้คลาส ImageButton

1
<ImageButton
2
android:layout_width="wrap_content"
3
android:layout_height="wrap_content"
4
android:src="@drawable/ic_launcher" />

การสร้าง Button โดยใช้ทั้งตัวอักษรและรูปภาพ โดยเพิ่มแท็ก android:drawableLeft ในคลาส Button

1
<Button
2
android:layout_width="wrap_content"
3
android:layout_height="wrap_content"
4
android:text="@string/I'm Button"
5
android:drawableLeft="@drawable/ic_launcher" />

วิธีการสร้างปุ่ม Button ด้วย Java

หากเราต้องการสร้าง Button ในไฟล์ Java ก็สามารถทำได้เช่นกัน แต่ว่าแบบนี้ เป็นสร้างคลาสขึ้นมาเฉยๆนะครับ โดยปกติจำเป็นต้องมี Root Layout เช่น LinearLayout หรือ RelativeLayout แล้วถึงทำการ addView() Button ที่เราสร้างถึงจะแสดงครับ ฉะนั้นก็จำเป็นจะต้องมีไฟล์ xml ที่ข้างในมี LinearLayout หรือ RelativeLayout

ส่วนวิธีการสร้างก็ตามนี้

1
// Button เฉพาะอักษร
2
Button button = new Button(this);
3
button.setLayoutParams(new ActionBar.LayoutParams(
4
ViewGroup.LayoutParams.WRAP_CONTENT,
5
ViewGroup.LayoutParams.WRAP_CONTENT));
6
button.setText("This is Button");
7
8
// Button ด้วยรูปภาพ
9
ImageButton imageButton = new ImageButton(this);
10
imageButton.setLayoutParams(new ActionBar.LayoutParams(
11
ViewGroup.LayoutParams.WRAP_CONTENT,
12
ViewGroup.LayoutParams.WRAP_CONTENT));
13
imageButton.setImageResource(R.drawable.ic_launcher);
14
15
// Button ทั้งรูปและตัวอักษร
16
Button button2 = new Button(this);
17
button2.setLayoutParams(new ActionBar.LayoutParams(
18
ViewGroup.LayoutParams.WRAP_CONTENT,
19
ViewGroup.LayoutParams.WRAP_CONTENT));
20
button2.setText("I'm Button");
21
button2.setCompoundDrawables(getResources().
22
getDrawable(R.drawable.ic_launcher), null, null, null);

Button และการ onClick

สำหรับวิธีการรับค่าจากผู้ใช้ เราจะใช้การรับ event แบบ onClick ซึ่งวิธีการรับ event นั้นทำได้หลายแบบครับ แบบหลักๆเลย คือ

  1. การรับ event ด้วยการใช้ attribute ของ Botton ชื่อว่า android:onClick
  2. ใช้ OnClickListener (การใช้แบบนี้ก็แบ่งเป็นย่อยๆได้อีก แล้วแต่ความสะดวกหรือจุดประสงค์ของงานนั้นๆ)

ตัวอย่างการใช้ Button

มาลองดูตัวอย่างการใช้งาน Button กันครับ ทดลองสร้างโปรเจ็คใหม่เลย เมื่อได้โปรเจ็คใหม่แล้ว ในที่นี้ผมจะอ้างอิง 2 ไฟล์คือ

  • MainActivity.java สำหรับเขียนโค๊ดต่างๆ
  • activity_main.xml สำหรับแสดง Layout

จุดประสงค์หลักของตัวอย่างนี้คือ ต้องการโชว์ตัวอย่างการรับ Event จาก Button วิธีมี 4 วิธี ดังนั้น ผมจะสร้างปุ่ม Button ทั้งหมด 4 ปุ่ม และตั้งชื่อเป็น button1 ถึง button4 (จริงๆ อันนี้เป็นตัวอย่างการตั้งชื่อที่ไม่ดีนะครับ ชื่อควรตั้งให้สื่อความหมายนะครับ) เลเอาท์จะได้ดังนี้

Button Layout

โค๊ด activity_main.xml

1
<RelativeLayout
2
xmlns:android="http://schemas.android.com/apk/res/android"
3
android:layout_width="match_parent"
4
android:layout_height="match_parent"
5
android:padding="16dp">
6
7
<Button
8
android:id="@+id/button1"
9
android:layout_width="match_parent"
10
android:layout_height="wrap_content"
11
android:layout_alignParentLeft="true"
12
android:text="Button1"/>
13
14
<Button
15
android:id="@+id/button2"
16
android:layout_width="match_parent"
17
android:layout_height="wrap_content"
18
android:text="Button2"
19
android:layout_below="@+id/button1"
20
android:layout_marginTop="32dp"/>
21
22
<Button
23
android:id="@+id/button3"
24
android:layout_width="match_parent"
25
android:layout_height="wrap_content"
26
android:text="Button3"
27
android:layout_below="@+id/button2"
28
android:layout_marginTop="32dp"/>
29
30
<Button
31
android:id="@+id/button4"
32
android:layout_width="match_parent"
33
android:layout_height="wrap_content"
34
android:text="Button4"
35
android:layout_below="@+id/button3"
36
android:layout_marginTop="32dp"/>
37
38
</RelativeLayout>

วิธีที่ 1: android:onClick

วิธีแรก ใช้การกำหนด attribute ฉะนั้น button1 ให้ทำการเพิ่ม android:onClick เข้าไปด้วย จะได้เป็นแบบนี้

1
<Button
2
android:id="@+id/button1"
3
android:layout_width="match_parent"
4
android:layout_height="wrap_content"
5
android:layout_alignParentLeft="true"
6
android:onClick="showMessage"
7
android:text="Button1"/>

showMessage นั้นคือชื่อเมธอด ที่เราจะต้องไปกำหนดในคลาส ฉะนั้นเปิดคลาส MainActivity แล้วก็ประกาศเมธอดขึ้นมาใหม่ โดยให้ชื่อเดียวกัน จะได้ดังนี้

1
public void showMessage(View view) {
2
Toast.makeText(this, "Button1 Clicked!", Toast.LENGTH_SHORT).show();
3
}

โดยเงื่อนไขการสร้างเมธอดแบบนี้คือ ต้องเป็น public ต้อง return void และสุดท้ายต้องรับ parameter เป็น View (มันก็คือ View นั้นๆที่ถูกคลิ๊ก ซึ่ง Button มันก็คือ View ตัวหนึ่งใน Android นั่นเอง)

เมื่อสั่งรันโปรแกรม หากกดที่ปุ่ม Button1 ก็จะโชว์ข้อความว่า “Button1 Clicked!”

วิธีที่ 2: Implements View.OnClickListener

ตัวอย่างวิธีที่สอง จะใช้ Button2 วิธีนี้จะใช้การ implements View.OnClickListener ฉะนั้นตรงส่วน xml ก็ไม่มีการเปลี่ยนแปลง จะแก้ไขเฉพาะในไฟล์ MainActivity

ที่คลาส MainActivity ทำการ implements View.OnClickListener จากนั้นก็ทำการ override เมธอด onClick ดังนี้ (ViewOnClickListener อยู่ใน android.view.View)

1
public class MainActivity extends ActionBarActivity implements View.OnClickListener {
2
3
@Override
4
protected void onCreate(Bundle savedInstanceState) {
5
super.onCreate(savedInstanceState);
6
setContentView(R.layout.activity_main);
7
8
}
9
10
public void showMessage(View view) {
11
Toast.makeText(this, "Button1 Clicked!", Toast.LENGTH_SHORT).show();
12
}
13
14
@Override
15
public void onClick(View v) {
16
Toast.makeText(this, "Button2 Clicked!", Toast.LENGTH_SHORT).show();
17
}
18
}

จากนั้นเราจำเป็นที่จะต้องทำการสร้าง Button โดยเชื่อมกับ button2 ใน xml จากนั้นก็เรียกเมธอด setOnClickListener ดังนี้

1
Button button2 = (Button) findViewById(R.id.button2);
2
button2.setOnClickListener(this);

setOnClickListener(this) : this นั้นหมายถึง View.OnClickListener ที่ได้ implements มา ไม่ใช่ Activity หรือ Context นะครับ ฉะนั้นอย่าสับสน

วิธีที่ 3: Annonymous Inner Class

ตัวอย่างวิธีที่สาม จะใช้ Button3 จริงๆ มันก็คือการ setOnClickListener แบบตัวอย่างที่ 2 แต่ต่างกันแค่ ไม่ได้ implements View.OnClickListener แต่เป็นการส่งสร้าง inner class ส่งไปแทนที่ this ดังตัวอย่างนี้

1
Button button3 = (Button) findViewById(R.id.button3);
2
button3.setOnClickListener(new View.OnClickListener() {
3
@Override
4
public void onClick(View v) {
5
Toast.makeText(getApplicationContext(),
6
"Button3 Clicked!", Toast.LENGTH_SHORT).show();
7
}
8
});

จุดสังเกต จากที่เราต้อง implements ตรงคลาสเลย เราก็มาทำการสร้าง new Interface แทน เป็นแบบ Anonymous คือไม่มีชื่อ

วิธีที่ 4 : ตั้งชื่อ View.OnClickListener

ตัวอย่างวิธีที่สี่ จะใช้ Button4 ส่วนการทำงาน ก็เหมือนกับวิธีที่ 2 และ 3 เลย ต่างกันแค่วิธีส่งเจ้า View.OnClickListener นั้นเอง สำหรับวิธีนี้ คือการตั้งชื่อให้มันเลย ฉะนั้น ก็ทำการสร้าง interface ชื่อว่า Button4OnClick แบบนี้

1
View.OnClickListener Button4OnClick = new View.OnClickListener() {
2
@Override
3
public void onClick(View v) {
4
Toast.makeText(getApplicationContext(),
5
"Button4 Clicked!", Toast.LENGTH_SHORT).show();
6
}
7
};

ส่วนปุ่ม Button4 ก็ setOnClickListener โดยใช้ Button4OnClick แบบนี้

1
Button button4 = (Button) findViewById(R.id.button4);
2
button4.setOnClickListener(Button4OnClick);

ลองรันโปรแกรม ทดสอบดูแต่ละปุ่มครับ สำหรับโค๊ดทั้งหมด ดูได้ที่ gist นี้ครับ

Authors
avatar

Chai Phonbopit

เป็น Web Dev ในบริษัทแห่งหนึ่ง ทำงานมา 10 ปีกว่าๆ ด้วยภาษาและเทคโนโลยี เช่น JavaScript, Node.js, React, Vue และปัจจุบันกำลังสนใจในเรื่องของ Blockchain และ Crypto กำลังหัดเรียนภาษา Rust

Related Posts