[안드로이드 기초] 버튼 클릭 이벤트 처리하는 onClickListner 사용방법

0.  목적

JAVA 언어를 사용한 안드로이드 스튜디오 프로젝트에서, 화면에 위치한 Button 을 사용자가 누르는 이벤트를 발생했을 경우 해당 이벤트를 처리하는 방법에 대해 알아본다. 아래의 예제를 통해 알아보도록 하자.

---

1. 화면 Layout 구성 (XML)

버튼 입력 이벤트를 직관적으로 확인할 수 있도록, 아주 간단하게 LinearLayout을 통해 View들을 배치해 두었다. 버튼 1번을 누르면 TextView에서 "버튼 1을 눌렀습니다!!!" 라는 문구가, 버튼 2번을 누르면 TextView에서 "버튼 2번을 눌렀습니다!!!" 라는 문구가 출력되도록 만들어 볼 것이다. 동시에, Toast 메시지도 구현해 보도록 하자.

 

사용된 View의 종류는 아래와 같다.

 

구분	명칭
View Group	LinearLayout
View	Button
View	Button
View	TextView

 

작성한 Layout의 xml 코드는 아래와 같으니 참고하도록 하자.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:baselineAligned="false">

    <Button
        android:id="@+id/btn1"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_gravity="center"
        android:layout_margin="10dp"
        android:text="버튼 1"/>

    <Button
        android:id="@+id/btn2"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_gravity="center"
        android:layout_margin="10dp"
        android:text="버튼 2"/>

    <!-- 앱 첫 구동 시, TextView 는 기본적으로 가려진 상태 -->
    <!-- visiblity="invisible"을 통해 구현 -->
    <TextView
        android:id="@+id/txt1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text=""
        android:visiblity="invisible"
        android:textSize="70px"/>

</LinearLayout>

각 View 마다 리소스 아이디는 아래와 같이 정의했으니 참고 바란다. 화면 Layout을 구성한 XML 파일에서 지정한 리소스 아이디를 MainActivity.java 자바 클래스에서 불러와야 하니 잘 지정해 두는 것이 좋다.

 

구분	리소스 아이디
Button	btn1
Button	btn2
TextView	txt1

 

---

2. 버튼 클릭 이벤트 처리

<버튼 클릭> 이라는 이벤트가 발생했을 때, 이벤트를 처리하는 방법은 크게 2가지 방법이 존재한다. 보통 MainActivity.java 자바 클래스에서 onClickListner 메서드를 참조해 사용하는 방식인데, 지금부터 하나씩 그 방법에 대해 알아보도록 하자.

 

※ Layout XML 파일에서도 메서드를 참조해 사용하는 방법은 있지만, 권장되지 않는 방법이기 때문에 본 포스팅에서는 언급하지 않겠다.

 

 

2-1. MainActivity 자바 클래스에 View를 호출 후, onClickListner 메서드를 상속해 참조

가장 정석적인 방법으로 많이 사용하는 방법이다. onClickListner 메서드를 참조하고, 변수를 하나 생성 후 이를 상속받아 이벤트를 지정해 주는 방법이다.

 

지정해야 할 이벤트들이 많고, 이벤트들을 재사용해야 할 경우가 많을 경우 사용한다. 지정해야 할 이벤트들이 적고, 이벤트들을 재사용해야 할 경우가 아니라면 2-2. 단락의 방법을 사용하는 것도 좋은 방법이다.

 

지금부터는 MainActivity.java 자바 클래스 파일을 수정해 보도록 한다. 아래의 코드를 통해 알아보도록 하자.

 

Button btn1, btn2;
TextView txt1;

btn1 = findViewById(R.id.btn1);
btn2 = findViewById(R.id.btn2);

txt1 = findViewById(R.id.txt1);

Button 관련 변수를 선언한다. Layout XML 파일 에서 지정한 리소스 아이디와 혼동되지 않도록 동일하게 변수를 선언했으니 참고하자.

 

findViewById 메서드를 이용해, 각 변수마다 Layout 에 있는 View 객체들을 불러와 저장한다.

 

▶ findViewById 메서드?

    - Layout 에 있는 View 객체들을 리소스 아이디를 통해 가져올 수 있는 메서드이다.

 

View.OnClickListener listner = new View.OnClickListener()
{
// OnClickListner 객체를 listner 변수로 참조
    @Override
    // 메서드 오버라이딩
    public void onClick(View v)
    // onClick 메서드 실행 중, View (v)를 함수의 인자로 전달
    {
        switch (v.getId())
        // View (v) 의 리소스 id를 가져와서 switch
        
        {
            case R.id.btn1:
            // btn1 버튼을 눌렀을 경우
                txt1.setVisibility(View.VISIBLE);
                txt1.setText("버튼 1번을 눌렀습니다.");
                Toast.makeText(getApplicationContext(),"버튼 1번을 눌렀습니다.", Toast.LENGTH_SHORT).show();
                break;
            case R.id.btn2:
            // btn2 버튼을 눌렀을 경우
                txt1.setVisibility(View.VISIBLE);
                txt1.setText("버튼 2번을 눌렀습니다.");
                Toast.makeText(getApplicationContext(), "버튼 2번을 눌렀습니다", Toast.LENGTH_SHORT).show();
                break;
            default:
                txt1.setVisibility(View.INVISIBLE);
                break;
        }
    }
};

 

▣ View.OnClickListner listner = new View.OnClickListner()

View 객체에 할당되어 있는 OnClickListner 메서드를, listner 변수에 저장 후 상속받아 사용한다.

▶ 변수를 지정하지 않고, 버튼 하나하나마다 OnClickListner 객체를 참조해 버튼 이벤트를 처리하는 방법도 있다.
    - 2-2. 단락을 참고하자.

▶ OnClickListner 객체는 Button 뿐만 아니라, 모든 종류의 View에서 사용할 수 있다.
    - 단, Button이 아닌 View는 android:clickable="true" 로 뒀다는 전제를 둔다.

▣ @Override

listner 변수에 저장되어 있는 OnClickListner 메서드를 아래의 코드와 같이 재정의 (메서드 오버라이딩) 한다.

▣ public void onClick (View v)

어떤 View 버튼에서 이벤트가 생성되었는지 구분하기 위해서, View 값을 onClick 함수의 인자값으로 넘긴다.

v는 단순히 View의 변수값이다.

▣ switch (v.getId())

v는 View의 변수값이라고 직전에 살펴 봤었다.

View의 리소스 아이디를 통해 어떤 View에서 이벤트가 발생되었는지 알아볼 수 있다.

▣ case R.id.btn1

리소스 아이디가 btn1인 View 에서 이벤트가 발생했을 경우를 뜻한다.

R은 리소스 아이디가 저정되는 Java Class 로, Java 파일에서 XML 파일의 값을 사용하기 위해 호출하는 Java Class 다.

▣ txt1.setVisibility(View.VISIBLE);

해당 리소스 아이디 값을 가진 View의 표시 방식을 setVisibility를 통해 지정할 수 있다.

구분	동작
리소스ID.setVisibility(View.VISIBLE);	View 표시
리소스ID.setVisibility(VIEW.INVISIBLE);	View 미표시 (숨김)

▣ txt1.setText("텍스트View 텍스트");

앞서 TextView 리소스 아이디를 txt1로 지정해 두었었다.

해당 리소스 아이디 값을 가진 TextView의 텍스트 값을 setText 용어를 통해서 지정할 수 있다.

▣ Toast.makeText(getApplicationContext(). "토스트 텍스트", Toast.LENGTH_SHORT).show();

토스트 텍스트를 띄운다.

Toast 클래스의 makeText 멤버함수를 통해, 인자값을 넘겨준다.

구분	인자값	역할
첫번째	getApplicationContext()	사용할 앱 활동 개체를 의미. 대부분의 경우에 getApplicationContext() 를 사용한다.
두번째	"토스트 텍스트"	사용자에게 보여질 토스트 메시지의 내용이다.
세번째	Toast.LENGTH_SHORT	짧게 토스트 메시지를 띄운다.

 

btn1.setOnClickListener(listner);
btn2.setOnClickListener(listner);

그 후, 각 버튼 클릭 시 listner에 정의해 둔 내용이 동작하도록 각 버튼마다 setOnClickListner 메서드를 참조하고 listner 변수를 불러오면 되겠다.

 

 

2-1-1. 전체 코드 살펴보기

전체 코드가 필요한 사람들을 위해 화면 Layout을 지정한 XML 코드와, MainActivity.java 자바 클래스 코드를 첨부한다.

 

▣ Layout XML 코드

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/btn1"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_gravity="center"
        android:layout_margin="10dp"
        android:text="버튼 1"/>

    <Button
        android:id="@+id/btn2"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_gravity="center"
        android:layout_margin="10dp"
        android:text="버튼 2"/>

    <TextView
        android:id="@+id/txt1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text=""
        android:visibility="invisible"
        android:textSize="70px"/>

</LinearLayout>

▣ 자바 클래스 MainActivity 코드

package com.example.wrap_contentmatch_parentblog;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main01);
        setTitle("아크레의 개발로그");

        Button btn1, btn2;
        TextView txt1;
        btn1 = findViewById(R.id.btn1);
        btn2 = findViewById(R.id.btn2);
        txt1 = findViewById(R.id.txt1);

        View.OnClickListener listner = new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                switch (v.getId()) {
                    case R.id.btn1:
                        txt1.setVisibility(View.VISIBLE);
                        txt1.setText("버튼 1번을 눌렀습니다.");
                        Toast.makeText(getApplicationContext(),"버튼 1번을 눌렀습니다.", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.btn2:
                        txt1.setVisibility(View.VISIBLE);
                        txt1.setText("버튼 2번을 눌렀습니다.");
                        Toast.makeText(getApplicationContext(), "버튼 2번을 눌렀습니다", Toast.LENGTH_SHORT).show();
                        break;
                    default:
                        txt1.setVisibility(View.INVISIBLE);
                        break;
                }
            }
        };

        btn1.setOnClickListener(listner);
        btn2.setOnClickListener(listner);
    }
}

 

 

2-2. MainActivity 자바 클래스에 View를 호출 후, onClickListner 각 View에 바로 참조해 사용

2-1. 단락에서 살펴본 방법은 onClickListner 메서드를 listner 변수에 상속받아 동작을 지정하고 사용했었다. 2-1. 단락의 방법은 listner 변수를 재사용할 수 있기 때문에 onClick 이벤트 발생 시 구현해야 할 동작들이 많을 경우 사용하는 정석 방법이다.

 

이번 2-2. 단락에서 살펴볼 내용은 onClick 이벤트 발생 시, 구현해야 할 동작들이 많지 않을 경우에는 각 View마다 onClickListner을 바로 참조해 간단하게 사용하는 방법도 존재한다. 지금부터 알아보자.

 

Button btn1, btn2;
TextView txt1;

btn1 = findViewById(R.id.btn1);
btn2 = findViewById(R.id.btn2);
txt1 = findViewById(R.id.txt1);

사용할 VIew 들을 Layout 에서 지정한 리소스 아이디를 불러와 각 변수에 저장한다. 마찬가지로 Layout XML 파일에서 지정한 View 들의 리소스 아이디와 혼동되지 않도록 변수명을 동일하게 설정했다. findViewById 메서드를 이용해 View들을 각 변수에 저장한다.

 

btn1.setOnClickListner(new View.OnClickListner()
{
    @Override
    public void onClick(View v)
    {
        txt1.setVisibility(view.VISIBLE);
        txt1.setText("버튼 1번을 눌렀습니다.");
        Toast.makeText(getApplicationContext(), "버튼 1번을 눌렀습니다.", Toast.LENGTH_SHORT).show();
    }
});

btn2.setOnClickListner(new View.OnClickListner()
{
    @Override
    public void onClick(View v)
    {
        txt1.setVisibility(View.VISIBLE);
        txt1.setText("버튼 2번을 눌렀습니다.");
        Toast.makeText(getApplicationContext(), "버튼 2번을 눌렀습니다.", Toast_LENGTH_SHORT).show();
    }
});

상세한 코드 설명은 2-1. 단락에서 진행했으므로 상기 단락을 참고하면 좋을 것 같다. 2-1. 단락에서의 구현 방법은, MainActivity.java 자바 클래스에 setOnClickListner 메서드를 참조해 특정 변수에 값을 저장하고 사용했었다.

 

이번 2-2. 단락에서의 구현 방법은 각 버튼마다 setOnClickListner 메서드를 참조해 이벤트 발생 시 구현 요소들을 지정한 것이다.

 

상황에 맞게 이벤트 구현 요소가 많고, 재사용해야 할 이유가 있다면 2-1. 단락의 내용을 사용하면 되고, 이벤트 구현 요소가 많지 않고 간단하다면 2-2. 단락의 내용을 사용하는 것이 더 편리할 수도 있겠다.

 

상황에 맞게 조치해 사용하면 된다.

 

2-2-1. 전체 코드 살펴보기

전체 코드가 필요한 사람들을 위해 화면 Layout을 지정한 XML 코드와, MainActivity.java 자바 클래스 코드를 첨부한다.

 

▣ Layout XML 코드

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/btn1"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_gravity="center"
        android:layout_margin="10dp"
        android:text="버튼 1"/>

    <Button
        android:id="@+id/btn2"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_gravity="center"
        android:layout_margin="10dp"
        android:text="버튼 2"/>

    <TextView
        android:id="@+id/txt1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text=""
        android:visibility="invisible"
        android:textSize="70px"/>

</LinearLayout>

▣ 자바 클래스 MainActivity 코드

package com.example.wrap_contentmatch_parentblog;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main01);
        setTitle("아크레의 개발로그");

        Button btn1, btn2;
        TextView txt1;

        btn1 = findViewById(R.id.btn1);
        btn2 = findViewById(R.id.btn2);
        txt1 = findViewById(R.id.txt1);

        btn1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                txt1.setVisibility(View.VISIBLE);
                txt1.setText("버튼 1번을 눌렀습니다.");
                Toast.makeText(getApplicationContext(),"버튼 1번을 눌렀습니다.", Toast.LENGTH_SHORT).show();
            }
        });

        btn2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                txt1.setVisibility(View.VISIBLE);
                txt1.setText("버튼 2번을 눌렀습니다.");
                Toast.makeText(getApplicationContext(),"버튼 2번을 눌렀습니다.", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

 

 

---

3. 실행 결과

코드는 달라도 실행되는 결과는 결국 같다. 의도한 바와 동일하게 잘 작동되는 모습을 확인할 수 있다.

 

 

 

---

<참고>

동식이 블로그 : [Android] Android:OnClick을 구현하는 방법 (링크)

급식어플 블로그 : [안드로이드 강좌] [17] : 버튼 클릭 이벤트 처리하기 (링크)

새아의 테크노트 : [android/안드로이드] Button Click Event 버튼 클릭 이벤트 예제 (링크)

개발자를 위한 레시피 : 버튼 클릭 이벤트를 처리하는 몇가지 방법. (Android Button Click Event) (링크)