[Android] ว่าด้วยเรื่องของ OnClickListener

วันนี้เราจะมาลองสร้าง Listener onclick ของ Button ใน android กัน โดยจะมีตัวอย่างการใช้งานอยู่ 4 แบบ โดยเราจะสร้างตัวอย่างง่ายๆโดยสร้าง Button ขึนมา 3 อันแล้วแต่ละอันก็จะกำหนดการทำงานคนละวิธีกัน ลองดูหน้าตาผลลัพธ์ก่อนแล้วกันนะครับ

การทำงานก็ง่ายๆ คือเมื่อกดแต่ละปุ่มก็จะแสดงข้อความว่า "This is message from button?" หน้าตาโปรแกรมดูธรรมดานะครับเราลองดูโค้ดกัน ก่อนอื่นคือ layout

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Listener Test" />
    <Button 
        android:id="@+id/btn1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="button1OnClickListener"
        android:text="Button1"        
        />
    <Button 
        android:id="@+id/btn2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button2"
        />
    <Button 
        android:id="@+id/btn3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button3"
        />

</LinearLayout>

ต่อไปเป็นโค้ดโปรแกรมทั้งหมดนะครับ

package com.simplelistener;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends Activity {

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  
  Button btn2 = (Button) findViewById(R.id.btn2);
  btn2.setOnClickListener(btn2OnClickListener);
  
  Button btn3 = (Button) findViewById(R.id.btn3);
  btn3.setOnClickListener(new OnClickListener(){
   public void onClick(View v){
    Toast.makeText(MainActivity.this, "This is message from button3", Toast.LENGTH_SHORT).show();
   }
  });
 }


 View.OnClickListener btn2OnClickListener = new View.OnClickListener() {
  @Override
  public void onClick(View v) {
   Toast.makeText(MainActivity.this, "This is message from button2", Toast.LENGTH_SHORT).show();
  }
 };
 
 public void button1OnClickListener(View v){
  Toast.makeText(this, "This is message from button1", Toast.LENGTH_SHORT).show();
 }

}

มาดูกันที่ button1 หนึ่งก่อนเลยครับใน button1 กำหนด listenner จากใน xml เลยใน android:onclick="button1OnClickListener" แล้วใน activity ของเราก็ สร้าง method ชื่อ button1OnClickListener ขึ้นมาโดยรับ parameter เป็น view ตามนี้เลยครับ

    <Button 
        android:id="@+id/btn1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="button1OnClickListener"
        android:text="Button1"        
        />

method ใน activity

 public void button1OnClickListener(View v){
  Toast.makeText(this, "This is message from button1", Toast.LENGTH_SHORT).show();
 }

ต่อไป button2 เราจะทำการสร้าง object ของ View.OnClickListenner ขึ้นมาแล้ว setOnClickListener ของปุ่มมาที่ object ตัวนี้

 View.OnClickListener btn2OnClickListener = new View.OnClickListener() {
  @Override
  public void onClick(View v) {
   Toast.makeText(MainActivity.this, "This is message from button2", Toast.LENGTH_SHORT).show();
  }
 };

สร้าง object จากนั้น setOnClickListener

  Button btn2 = (Button) findViewById(R.id.btn2);
  btn2.setOnClickListener(btn2OnClickListener);

ส่วนของ layout ครับ

    <Button 
        android:id="@+id/btn2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button2"
        />

ต่อไป button3 เราจะทำการสร้าง object ของ View.OnClickListener เหมือนเดิมแต่เราจะสร้างแบบไม่มีชื่อใน setOnClickListener เลย

  Button btn3 = (Button) findViewById(R.id.btn3);
  btn3.setOnClickListener(new OnClickListener(){
   public void onClick(View v){
    Toast.makeText(MainActivity.this, "This is message from button3", Toast.LENGTH_SHORT).show();
   }
  });

แต่วิธีนี้เราต้องระวังการใช้ this นะครับ ส่วน layout ก็ตามนี้เลยครับ

    <Button 
        android:id="@+id/btn3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button3"
        />

ตัวอย่างสุดท้ายเราจะ implements OnClickListener แล้วไป if ใน method onClick

package com.simplelistener;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends Activity implements OnClickListener{

 
 @Override
 protected void onCreate(Bundle savedInstanceState){
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  ((Button) findViewById(R.id.btn1)).setOnClickListener(this);
  ((Button) findViewById(R.id.btn2)).setOnClickListener(this);
  ((Button) findViewById(R.id.btn3)).setOnClickListener(this);
 }
 
 @Override
 public void onClick(View v){
  int sender = v.getId();
  if(R.id.btn1 == sender){
   Toast.makeText(this, "This is message from button1", Toast.LENGTH_SHORT).show();
  }else if(R.id.btn2 == sender){
   Toast.makeText(this, "This is message from button2", Toast.LENGTH_SHORT).show();
  }else if(R.id.btn3 == sender){
   Toast.makeText(this, "This is message from button3", Toast.LENGTH_SHORT).show();
  }
 }

}

จากตัวอย่างข้างบนเราสามารถเลือกวิธีการใช้ได้ตามแต่สถานการณ์เลยครับ