[Dev] หลากหลายรูปแบบ กับการเขียนคำสั่ง Listener บน Android

บทความตอนนี้ ขอพูดถึงเรื่องง่าย ๆ บ้าง เพื่อให้มือใหม่ได้เรียนรู้พื้นฐานของการพัฒนา App บน Android

Android Developer logo

เชื่อว่าหลายคนที่เป็นมือใหม่ ได้อ่าน ได้ดู Code จากหลาย ๆ ตำรา แล้วพบว่า การจัดการกับเหตุการณ์ (Event) ต่าง ๆ ที่ User กระทำนั้น เราจะต้องทำการ Implement ส่วนที่เรียกว่า Listener

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

เพื่อให้เข้าใจได้มากขึ้น อยากให้ลองทำตามไปเลยนะครับ

 

List of contents

 

Layout

ก่อนอื่น Design หน้าจอกันก่อน โดยวาง TextView 1 ตัว และ Button 5 ตัว ดังรูปด้านล่าง ซึ่งเราจะใช้ Button ทั้ง 5 ในการเขียนคำสั่งกัน และจะแสดงผลไปที่ TextView

ออกแบบหน้าจอสำหรับทดสอบ Listener
ออกแบบหน้าจอสำหรับทดสอบ Listener

แล้วที่ Class Activity ก็ทำการประกาศตัวแปร ดังนี้

แล้วใน Method onCreate() ทำการ setContentView() และกำหนดค่าให้กับตัวแปรทั้งหมด ดังนี้

หลังจากนั้น เราจะมาเริ่มเขียนคำสั่ง Listener เพื่อรองรับการกดปุ่ม Button ทั้ง 5 กันแล้ว

 

Listener with On Click Property

สำหรับ Button1 ในหน้า Layout สังเกตุที่หน้าต่าง Outline ในส่วนของ Properties ให้กำหนด Properties On Click โดยใส่คำว่า button1Click ดังรูป

Properties Windows ส่วนหนึ่งของหน้าต่าง Outline เมื่อเปิดไฟล์ layout
Properties Windows ส่วนหนึ่งของหน้าต่าง Outline เมื่อเปิดไฟล์ layout

เหล่า Developer ที่มาจาก Visual Studio คงยิ้มแก้มปริ เพราะมันคล้าย ๆ การกำหนด Event เลย แต่… อย่าเพิ่งดีใจไป อ่านให้จบก่อนนะ

หากเปิดแบบ XML ดู จะเห็นว่า Button1 มี attribute android:onClick เพิ่มเติมมา ดังนี้

หลังจากนั้นก็จะเป็นส่วนของคำสั่ง โดยการเขียน function ชื่อ button1Click ดังนี้

จาก Code ด้านบน เราจะต้องเขียนเป็น public function ชื่อ button1Click โดยมี 1 Parameter ชนิด View และไม่มีการ Return ค่า!!

เท่านี้ก็จะสามารถกำหนด OnClickListener ให้กับ Button1 ได้แล้ว

แล้วจะรู้ได้อย่างไรว่าต้องเขียนแบบนี้

เราต้องรู้ก่อนว่า Button นั้น มี OnClickListener สำหรับการดักจับเหตุการณ์เมื่อมีการกดที่ปุ่ม (เรียกว่า Callback หรือ Event) ซึ่ง OnClickListener นั้น เป็น Interface ที่มี 1 Method ที่ต้อง Implement นั่นคือ onClick() ลองดูรายละเอียดที่เว็บ Android Developers – References สำหรับ View.OnClickListener

ซึ่งเราได้กำหนดที่ Layout ไว้แล้วว่า เมื่อ onClick จะทำการเรียกใช้งาน function button1Click ซึ่ง function นี้ล่ะ ที่ต้อง Implement ตาม Method onClick() ของ View.OnClickListener เป๊ะ ๆ ห้ามผิดแปลกไปจากนี้ ไม่งั้นจะเกิด Error เมื่อกดปุ่ม Button1 และที่สำคัญ ห้ามลืมเขียน function button1Click เด็ดขาด เพราะจะ Error เหมือนกัน

สำหรับวิธีนี้ ไม่แนะนำให้ใช้เท่าไหร่

ก็ด้วยเหตุผลว่า…

  1. Implement ยาก ต้องรู้เองว่าต้องใส่ Parameter อะไรบ้าง
  2. ไปยุ่งกับ Layout ทำให้ Code แยกจาก Layout ได้ไม่ขาด
  3. เมื่อดู Code แล้วย้อนหาที่มาที่ไปไม่เจอ เพราะมันโยงไปที่ Layout

 

Implement Listener Interface to Class

สำหรับ Button2 (และ Button อื่น ๆ ที่เหลือ) เราจะกำหนด OnClickListener ผ่าน Method setOnClickListener() ดังนี้

เมื่อเราพิมพ์คำสั่ง setOnClickListener ลองสังเกตุดู จะเห็นว่า Method นี้ ต้องการ 1 Parameter ก็คือ OnClickListener นั่นเอง

Method setOnClickListener ของ Button
Method setOnClickListener() ของ Button

ลองสังเกตุที่ OnClickListener จากรูปด้านล่าง จะเห็นว่าเป็น Interface และมีชื่อเดียวกันอยู่ 2 ตัว คือ ของ android.view.View และของ android.content.DialogInterface สำหรับ Button นั้น ใช้ OnClickListener ของ android.view.View อย่าเลือกผิดตัวล่ะ!

Interface OnClickListener ของ View
Interface OnClickListener ของ View

สำหรับผู้ที่เข้าใจ OOP จะรู้ได้ในทันทีว่า Interface นั้น เป็นแค่โครงสร้าง จำเป็นต้องสร้าง Class ที่ Implement มา ถึงจะใช้งานได้ สำหรับ Method setOnClickListener() ที่ให้เราใส่ Interface OnClickListener เป็น Parameter นั้น ทำให้เราต้อง Implement Interface OnClickListener ซะก่อน ดังนี้

จาก Code ด้านบน เราทำการสร้าง Class ชื่อว่า Button2Click โดย Implement OnClickListener ซึ่งต้อง Implement Method onClick() ด้วย

เมื่อสร้าง Class ที่ implements OnClickListener เรียบร้อยแล้ว ก็ถึงเวลานำ Class Button2Click ไปใช้งาน ดังนี้

หรือแบบนี้ก็ได้…

ก็แค่ สร้าง Instant จาก Class Button2Click ขึ้นมา ด้วยคำสั่ง new Button2Click() แล้วใส่ไว้ในตัวแปรก่อนนำไปใช้ หรือใส่เป็น Parameter ให้กับ Method setOnClickListener() ของ Button2 ก็ได้ นั่นเอง

สำหรับวิธีนี้ ก็ชัดเจนดี ในเมื่อเป็น Interface ก็ต้อง Implement เป็น Class

 

Implement Listener Interface to Variable

สำหรับ Button3 เราจะไม่ Implement Interface ไปยัง Class แต่จะ Implement ไปยังตัวแปรแทน ดังนี้

เนื่องจาก OnClickListener เป็น Interface ในภาษา Java เราสามารถ Implement Interface ด้วยการ new ได้เลย แล้ว Implement Method ภายใน ดัง Code ด้านบน จะได้ตัวแปร button3clickListener เป็นชนิด OnClickListener พร้อมนำไปใช้งาน

จาก Code ด้านบน เป็น 1 Statement เท่านั้น คือการ Assign ค่าให้กับตัวแปร button3clickListener นั่นเอง

ซึ่งมันคือการสร้าง Anonymous Class และทำการสร้าง Instant ในจุดนี้เลย

เมื่อได้ตัวแปรชนิด OnClickListener เรียบร้อย ก็นำไปใช้งานได้เลย ดังนี้

เมื่อ button3clickListener ถูกสร้าง Instant ขึ้นมาจาก Interface ที่ Implement ในจุดนั้นเลย ทำให้ใส่เป็น Parameter ให้กับ Method setOnClickListener() ของ Button3 ได้ทันที

สำหรับวิธีนี้ เมื่อ Parameter ต้องการ OnClickListener เราก็สร้างตัวแปร OnClickListener ให้ไป ก็ตรงไปตรงมาดี

 

Implement Listener Interface to Parameter

สำหรับ Button4 เราจะไม่ Implement ไปที่ Class หรือตัวแปรแล้ว แต่เราจะ Implement ใส่เข้าไปใน Parameter ของ Method setOnClickListener() เลย ดังนี้

ก็จะคล้าย ๆ กับ Button3 เพียงแต่เราไม่ต้องฝากไว้ที่ตัวแปร แต่เป็นการสร้าง Anonymous Class และทำการสร้าง Instant ในจุดนี้เลย พร้อมทั้งใส่ไปเป็น Parameter เลยนั่นเอง

สำหรับวิธีนี้ก็ง่ายดี ต้องการ OnClickListener จะใช้ก็สร้างให้เลยใช้ซะเลย

 

Implement Listener Interface to Activity Class

สำหรับ Button5 จะคล้าย ๆ กับการ Implement ไปยัง Class เพียงแต่ว่า เราจะไม่สร้าง Class ขึ้นมาใหม่ แต่จะ Implement ไปยัง Class Activity เลย ดังนี้

ในเมื่อ Implement ไปให้ Class Activity แล้ว เวลากำหนดให้ Method setOnClickListener() ก็แค่อ้างอิงมายัง Activity ดังนี้

ซึ่ง this ก็คือ Activity นั่นเอง ถ้าจะเขียนให้ชัด ๆ ก็ MainActivity.this ก็ได้

สำหรับวิธีนี้ Code ใน onCreate() เราจะสั้นดี

 

สำหรับ Code เต็ม ๆ ของ MainActivity ก็มีดังนี้

 

จะเห็นว่า เราสามารถ Implement Listener ได้หลากหลายวิธี ที่ผมเอามาให้ดูก็ 5 วิธีแล้ว (ไม่แน่ใจว่ายังมีวิธีอื่นอีกรึเปล่า ใครรู้ช่วยแนะนำด้วยครับ จะได้มาเติมให้) เมื่อเรารู้ว่า Implement แบบไหน มีหลักการยังไง เมื่ออ่าน Code ของคนอื่น หรือแม้แต่จะเขียน Code เอง ก็จะได้เลือกใช้แบบที่เหมาะสม

ส่วนตัวผมเอง ใช้แบบที่ 4 บ่อย ๆ ส่วนแบบที่ 3 นี่ใช้บ้าง แล้วแต่เงื่อนไข แต่ชอบแบบที่ 5 มากที่สุด

 

ขอบคุณ Promlert Lovichit ที่ช่วยแนะนำเพิ่มเติมให้ ขอบคุณครับ

1 Comment


  1. ผมใช้แบบสร้างตัวแปรมาเก็บ new OnClickListener บ่อยสุดครับ
    นานๆครั้งจะใช้ implement ที่ class และพยายามจะไม่ใช้ annonymouse class ที่ setOnClickListener ครับ

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

 

This site uses Akismet to reduce spam. Learn how your comment data is processed.