【APP/Android】onClick事件的5種實現方式

tags: APP Android

Common

1. 推薦的實現方式：方法1、方法3
2. 並不是只有 <Button> 才會有 onClick 的屬性及需要，
   其他元件也有這個屬性，例如：<TextView>, <EditText>, <ImageView>…

方法1：預設的 onClick 事件

Info 簡介

• 在 Layout.xml (View) 的 Button 的屬性設定 android:onClick="example"
• 這邊的 example 也就是主程式在 java class (Activity)的方法名稱

Code 程式碼

1. View：activity_main.xml

<Button
    android:layout_width="150dp"
    android:layout_height="wrap_content"
    android:onClick="example"
    android:text="範例" />

2. MainActivity.java

public void example(View view) {
    // 寫要做的事...
}

方法2：Interface

Info 簡介

• Interface：View.OnClickListener
• 必須實作的方法：onClick(View v)

Code 程式碼

1. View：activity_main.xml

<Button
    android:id="@+id/btn"
    android:layout_width="150dp"
    android:layout_height="wrap_content"
    android:text="範例" />

2. 在 MainActivity.java 呼叫寫在 activity_main.xml 的 Button

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    
    // Button 初始化
    Button button = findViewById(R.id.btn);
    button.setOnClickListener(example);
}
private View.OnClickListener example = new View.OnClickListener() {  
    @Override  
    public void onClick(View v) {  
        // 寫要做的事...
   }  
};

方法3：Anonymous inner class 匿名內部類別

Info 簡介

• 方法2的簡化版，省略Interface的物件，故稱匿名
• 必須實作的方法：onClick(View v)

Code 程式碼

1. View：activity_main.xml

<Button
    android:id="@+id/btn"
    android:layout_width="150dp"
    android:layout_height="wrap_content"
    android:text="範例" />

2. 在 MainActivity.java 呼叫寫在 activity_main.xml 的 Button

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    // Button 初始化
    Button button = findViewById(R.id.btn);
    button.setOnClickListener(new Button.OnClickListener() {  
        @Override  
        public void onClick(View v) {  
            // 寫要做的事...  
        }  
    });
}

方法4：Activity implements View.OnClickListener

Info 簡介

• Interface：View.OnClickListener
• 必須實作的方法：onClick(View v)

Code 程式碼

1. View：activity_main.xml

<Button
    android:id="@+id/btn"
    android:layout_width="150dp"
    android:layout_height="wrap_content"
    android:text="範例" />

2. 在 MainActivity.java 呼叫寫在 activity_main.xml 的 Button
3. button.setOnClickListener(this);：這邊的this = MainActivity的物件 = AppCompatActivity 的物件 = View.OnClickListener 的物件

public class MainActivity extends AppCompatActivity implements View.OnClickListener{
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Button 初始化
        Button button = findViewById(R.id.btn);
        button.setOnClickListener(this);
    }
    @Override  
    public void onClick(View v) {  
        // 寫要做的事...
    }
}

方法5：Inner Class implements View.OnClickListener

Info 簡介

• 幾乎與方法4相同，只是這次是用在 Inner Class

Code 程式碼

1. View：activity_main.xml

<Button
    android:id="@+id/btn"
    android:layout_width="150dp"
    android:layout_height="wrap_content"
    android:text="範例" />

2. 在 MainActivity.java 呼叫寫在 activity_main.xml 的 Button
3. 記得要初始化 Example 這個私有的class

public class MainActivity extends AppCompatActivity {
    Example example = new Example();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Button 初始化
        Button button = findViewById(R.id.btn);
        button.setOnClickListener(example);
    }
    private class Example implements View.OnClickListener{ 
        @Override  
        public void onClick(View v) {  
            // 寫要做的事...
        }  
    }
}

Reference 參考資料

1. onClick 範例圖片：https://stackoverflow.com/questions/27565906/how-to-add-ripple-effect-on-android-action-bar-button-click-event
2. Android: onClick事件的5種實現方式：http://www.hkprogram.com/index1/section21.html
3. View.OnClickListener 官方文件:
   https://developer.android.com/reference/android/view/View.OnClickListener.html
4. Android Tutorial 第二堂（3）應用程式與使用者的互動：http://www.codedata.com.tw/mobile/android-tutorial-the-2nd-class-3-interaction/