Android Button และการรับ Event ด้วย OnClick
![Android Button และการรับ Event ด้วย OnClick](/_vercel/image?url=%2Fimages%2F2014%2F04%2Fandroid-studio-cover.png&w=828&q=80)
วันนี้พอดีมีน้องคนหนึ่งสอบถามมาเกี่ยวกับ Button ก็เลยทำเป็นบทความมาให้ซะเลย วันนี้จะมาพูดถึงเรื่อง Button ใน Android ครับ เป็นการใช้งาน Button
และการ implements OnClickListener
เพื่อให้ Button รับค่าต่างๆจากผู้ใช้งาน
จริงๆเรื่องนี้ไม่ได้เป็นเรื่องที่ใหม่ หรือยุ่งยากอะไรเลย เพียงแต่ถ้าเป็นมือใหม่ หรือเพิ่งหัดเขียน Android ก็อาจจะงงอยู่บ้างเล็กน้อย
Button คืออะไร?
Button นั้นเป็น View ตัวนึง ที่ผู้ใช้สามารถกดหรือคลิกได้ Button นั้นเป็นได้ทั้งตัวอักษร หรือว่าจะเป็นรูปภาพ หรือแม้แต่จะเป็น Button ที่มีทั้งภาพและตัวอักษรในปุ่มเดียวกันก็ได้
รูปจาก developer.android.com
วิธีการสร้างปุ่ม Button ด้วย XML
การสร้างปุ่ม Button โดยใช้ไฟล์ xml มีโครงสร้างดังนี้
การสร้าง Button เฉพาะตัวอักษร ด้วยคลาส Button
1<Button2 android:layout_width="wrap_content"3 android:layout_height="wrap_content"4 android:text="This is Button" />
การสร้าง Button ด้วยรูปภาพ โดยใช้คลาส ImageButton
1<ImageButton2 android:layout_width="wrap_content"3 android:layout_height="wrap_content"4 android:src="@drawable/ic_launcher" />
การสร้าง Button โดยใช้ทั้งตัวอักษรและรูปภาพ โดยเพิ่มแท็ก android:drawableLeft
ในคลาส Button
1<Button2 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 เฉพาะอักษร2Button button = new Button(this);3button.setLayoutParams(new ActionBar.LayoutParams(4 ViewGroup.LayoutParams.WRAP_CONTENT,5 ViewGroup.LayoutParams.WRAP_CONTENT));6button.setText("This is Button");7
8// Button ด้วยรูปภาพ9ImageButton imageButton = new ImageButton(this);10imageButton.setLayoutParams(new ActionBar.LayoutParams(11 ViewGroup.LayoutParams.WRAP_CONTENT,12 ViewGroup.LayoutParams.WRAP_CONTENT));13imageButton.setImageResource(R.drawable.ic_launcher);14
15// Button ทั้งรูปและตัวอักษร16Button button2 = new Button(this);17button2.setLayoutParams(new ActionBar.LayoutParams(18 ViewGroup.LayoutParams.WRAP_CONTENT,19 ViewGroup.LayoutParams.WRAP_CONTENT));20button2.setText("I'm Button");21button2.setCompoundDrawables(getResources().22 getDrawable(R.drawable.ic_launcher), null, null, null);
Button และการ onClick
สำหรับวิธีการรับค่าจากผู้ใช้ เราจะใช้การรับ event แบบ onClick
ซึ่งวิธีการรับ event นั้นทำได้หลายแบบครับ แบบหลักๆเลย คือ
- การรับ event ด้วยการใช้ attribute ของ Botton ชื่อว่า
android:onClick
- ใช้
OnClickListener
(การใช้แบบนี้ก็แบ่งเป็นย่อยๆได้อีก แล้วแต่ความสะดวกหรือจุดประสงค์ของงานนั้นๆ)
ตัวอย่างการใช้ Button
มาลองดูตัวอย่างการใช้งาน Button กันครับ ทดลองสร้างโปรเจ็คใหม่เลย เมื่อได้โปรเจ็คใหม่แล้ว ในที่นี้ผมจะอ้างอิง 2 ไฟล์คือ
- MainActivity.java สำหรับเขียนโค๊ดต่างๆ
- activity_main.xml สำหรับแสดง Layout
จุดประสงค์หลักของตัวอย่างนี้คือ ต้องการโชว์ตัวอย่างการรับ Event จาก Button วิธีมี 4 วิธี ดังนั้น ผมจะสร้างปุ่ม Button ทั้งหมด 4 ปุ่ม และตั้งชื่อเป็น button1
ถึง button4
(จริงๆ อันนี้เป็นตัวอย่างการตั้งชื่อที่ไม่ดีนะครับ ชื่อควรตั้งให้สื่อความหมายนะครับ) เลเอาท์จะได้ดังนี้
โค๊ด activity_main.xml
1<RelativeLayout2 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 <Button8 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 <Button15 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 <Button23 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 <Button31 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<Button2 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
แล้วก็ประกาศเมธอดขึ้นมาใหม่ โดยให้ชื่อเดียวกัน จะได้ดังนี้
1public 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
)
1public class MainActivity extends ActionBarActivity implements View.OnClickListener {2
3 @Override4 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 @Override15 public void onClick(View v) {16 Toast.makeText(this, "Button2 Clicked!", Toast.LENGTH_SHORT).show();17 }18}
จากนั้นเราจำเป็นที่จะต้องทำการสร้าง Button โดยเชื่อมกับ button2 ใน xml จากนั้นก็เรียกเมธอด setOnClickListener
ดังนี้
1Button button2 = (Button) findViewById(R.id.button2);2button2.setOnClickListener(this);
setOnClickListener(this)
: this นั้นหมายถึง View.OnClickListener ที่ได้ implements มา ไม่ใช่ Activity หรือ Context นะครับ ฉะนั้นอย่าสับสน
วิธีที่ 3: Annonymous Inner Class
ตัวอย่างวิธีที่สาม จะใช้ Button3 จริงๆ มันก็คือการ setOnClickListener
แบบตัวอย่างที่ 2 แต่ต่างกันแค่ ไม่ได้ implements View.OnClickListener
แต่เป็นการส่งสร้าง inner class ส่งไปแทนที่ this ดังตัวอย่างนี้
1Button button3 = (Button) findViewById(R.id.button3);2button3.setOnClickListener(new View.OnClickListener() {3 @Override4 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
แบบนี้
1View.OnClickListener Button4OnClick = new View.OnClickListener() {2 @Override3 public void onClick(View v) {4 Toast.makeText(getApplicationContext(),5 "Button4 Clicked!", Toast.LENGTH_SHORT).show();6 }7};
ส่วนปุ่ม Button4 ก็ setOnClickListener
โดยใช้ Button4OnClick
แบบนี้
1Button button4 = (Button) findViewById(R.id.button4);2button4.setOnClickListener(Button4OnClick);
ลองรันโปรแกรม ทดสอบดูแต่ละปุ่มครับ สำหรับโค๊ดทั้งหมด ดูได้ที่ gist นี้ครับ
- Authors
-
Chai Phonbopit
เป็น Web Dev ในบริษัทแห่งหนึ่ง ทำงานมา 10 ปีกว่าๆ ด้วยภาษาและเทคโนโลยี เช่น JavaScript, Node.js, React, Vue และปัจจุบันกำลังสนใจในเรื่องของ Blockchain และ Crypto กำลังหัดเรียนภาษา Rust