[안드로이드 Android] 뷰 바인딩 View Binding #2 - 버튼클릭 이벤트 처리하기

이전 포스트에 이어서 뷰 바인딩에 대한 2번째 예제를 소개하겠습니다.

이번에는 버튼과 텍스트뷰를 1개씩 추가하고 버튼을 클릭하였을때 텍스트뷰의 글씨를 변경하는 코드를 작성해 보겠습니다.

 

2) 버튼 클릭 이벤트 처리 

버튼클릭 이벤트 처리를 어노테이션으로 연결하던 ButterKnife와 다르게 뷰 바인딩은 이름그대로 뷰만 연결하기에 클릭이벤트 처리는 버튼에 리스너를 설정하거나 onClick속성으로 처리해야만 합니다.

바인딩클래스 객체 안에 id와 같은 이름의 뷰 참조변수가 이미 연결되어 있기에 findViewById()는 필요하지 않겠지요. 앞 포스트의 코드에 이어서 작성하는 것이니 주석으로 표기한 실습번호 2)에 관련된 부분을 구별하여 보시기 바랍니다. 주석을 통해 각 코드에 대해 설명하였으니 주석을 주의깊게 보시면 이해하기 편하실 겁니다.

 

먼저 액티비티 레이아웃 파일에 버튼 1개를 추가하겠습니다. id를 지정하고 뷰바인딩으로 연결하여 리스너를 설정하고자 합니다.

# activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp"
    tools:context=".MainActivity">

    <!-- 1) 기본 TextView  -->
    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="8dp"
        android:textColor="#FF333333"
        android:text="Hello"/>

    <!-- 2) 버튼 클릭이벤트 처리하기 -->
    <Button
        android:id="@+id/btn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="button"/>

</LinearLayout>

 

Button에 id가 지정되었기에 이 activity_main.xml 레이아웃 파일과 연결되도록 자동으로 만들어지는 바인딩 클래스인 ActivityMainBinding 클래스 객체의 필드(멤버변수)에 btn 이리는 이름의 참조변수가 자동으로 Button과 연결되어 만들어집니다.

그렇기에 별도의 Button 참조변수를 만들거나 findViewById(R.id.btn) 메소드를 호출할 필요가 없습니다. 그냥 바인딩클래스의 멤버에 곧바로 리스너 처리하시면 됩니다.

 

MainActivity 자바코드를 작성해보겠습니다. 주석을 참고하세요

# MainActivity.java

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Toast;

import com.mrhi2021.ex98viewbinding.databinding.ActivityMainBinding;

public class MainActivity extends AppCompatActivity {

    // findViewById() 메소드를 이용한 View 참조 방법이 가진 문제를 해결하기 위한 기법들 [ 코드의 번거로움과 메소드의 동작속도 문제 ]
    // 1. ButterKnife 외부 라이브러리 사용하기
    // 2. ViewBinding 안드로이드 아키텍처 구성요소
    // 3. DataBinding (view binding + data binding) : 뷰결합 + 데이터 결합 기능까지 가진 아키텍처 구성요소

    // 이번 실습에서는 뷰 참조만 관점으로 볼때 가장 성능이 좋은 ViewBinding 안드로이드 아키텍처 구성요소 라이브러리 예제 소개
    // ButterKnife의 어노테이션을 이용한 BindView 역시 코드가 간결하다고 볼수없음. 이를 개선하였다고 보면 됨.

    // ViewBinding은 외부 라이브러리가 아니고 안드로이의 아키텍처 구성요소이기에 사용설정을 (모듈단위) build.gradle 에서 해주면 됨.

    // 뷰바인딩 기능의 주요특징은 xml 레이아웃파일(activity_main.xml)의 뷰들을 이미 연결(Bind)하고 있는 클래스가 자동으로 만들어져서
    // 개발자가 직접 뷰 참조변수를 만들어서 findViewBy()로 찾아서 연결하는 일련의 모든 작업을 할 필요가 없게 만들어 놓은 기능임.

    // 이때, 자동으로 xml 레이아웃 파일의 뷰들의 id와 같은 이름을 가진 멤버변수를 가진 클래스는 그 이름이 규칙적으로 명명되어 만들어짐.
    // 레이아웃파일의 이름에 맞게 클래스이름이 만들어짐.

    // ex.1) 액티비티 레이아웃 파일명과 자동으로 만들어지는 바인딩 클래스명
    // activity_main.xml      -->   ActivityMainBinding
    // activity_second.xml    -->   ActivitySecondBinding
    // activity_xxx.xml       -->   ActivityXxxBinding

    // ex.2) 프레그먼트 레이아웃 파일명과 자동으로 만들어지는 바인딩 클래스명
    // fragment_my.xml        -->   FragmentMyBinding
    // fragment_login.xml     -->   FragmentLoginBinding
    // fragment_xxx.xml       -->   FragmentXxxBinding

    // ex.3) 리사이클러뷰(아답터뷰)의 아이템 1개 레이아웃 파일명과 자동으로 만들어지는 바인딩 클래스명
    // recycler_item.xml      -->   RecyclerItemBinding
    // recycler_xxx.xml       -->   RecyclerXxxBinding


    // 실습방법은 이전에 실습했던 ButterKnife와 완전히 동일하게 진행해 봄으로서 차이점을 극명하게 확인.

    //1) 먼저 간단하게 TextView 1개를 만들고 이를 뷰 바인딩으로 참조하여 글씨 변경해 보기
    // - ViewBinding 초기화 -
    // 액티비티의 onCreate()에서 액티비티가 직접 setContentView()를 하지 말고 뷰바인딩 클래스가 레이아웃파일을 inflate해서 만들고 참조하여 멤버변수로 가지는 객체를 생성

    // activity_main.xml 파일과 연결되어 있는 바인딩 클래스 참조변수
    ActivityMainBinding mainBinding;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //액티비티가 직접 setContentView()로 뷰들을 생성하지 않도록... 주석처리
        //setContentView(R.layout.activity_main);

        // xml 레이아웃파일명과 관련되어 뷰바이딩 기능에 의해 자동으로 설계되어진 클래스을 이용하여 뷰들의 id와 같은 이름을 가진 참조변수를 멤버로 가지는 객체 생성
        //activity_main.xml과 연결되는 바인딩클래스인 ActivityMainBinding 클래스의 inflate() static 메소드를 통해 뷰를 바인딩클래스가 직접 생성(inflate)
        // 바인딩 클래스의 멤버로 여러 뷰들의 참조변수들이 있으므로 가급적 바인딩클래스의 참조변수는 이 액티비티클래스의 멤버변수 위치를 만들것을 권장함.
        mainBinding= ActivityMainBinding.inflate(getLayoutInflater()); //파라미터로 LayoutInflater객체 전달

        //이 액티비티가 보여줄 내용물 뷰를 바인딩 클래스 객체의 최상위 뷰(rootView : activity_main.xml의 첫번째 레이아웃 뷰 - 이 예제에서는 LinearLayout)로 설정
        setContentView(mainBinding.getRoot());

        //1) TextView 글씨 변경하기
        //이미 activity_main.xml의 뷰들을 참조하여 연결하고 있는 바인딩 클래스인 ActivityMainBinding의 객체인 mainBinding의 멤버변수로
        //각 뷰들의 id 값과 이름이 완전 똑같은 해당뷰의 참조변수들이 찾아져서 연결되어 있는 상태임.
        mainBinding.tv.setText("Nice to meet you. ViewBinding");

        //2) 버튼클릭 이벤트 처리를 어노테이션으로 연결하던 ButterKnife와 다르게 뷰 바인딩을 이름그대로 뷰만 연결하기에 클릭이벤트 처리는 버튼에 리스너를 설정하거나 onClick속성으로 처리
        //바인딩클래스 객체 안에 id와 같은 이름의 뷰 참조변수가 이미 연결되어 있음.
        mainBinding.btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "clicked button", Toast.LENGTH_SHORT).show();
            }
        });

        //2-1)람다식 -> [익명클래스의 콜백메소드 코드를 좀더 간결하게 표현하기 : JDK 1.8버전 이상에서 사용가능 ]
        mainBinding.btn.setOnClickListener(v -> Toast.makeText(this, "clicked button", Toast.LENGTH_SHORT).show());

        //롱~클릭 람다식 표기법 - 리턴있음.
        mainBinding.btn.setOnLongClickListener( v-> {
            Toast.makeText(this, "long~ clicked button", Toast.LENGTH_SHORT).show();
            return true;
        });
    }
    
}

버튼 참조변수를 별도로 만들지 않고 findViewById()를 사용하지 않았다는 것을 말고는 기본적인 버튼 클릭리스너 처리의 코드와 차이가 없습니다. 즉, 뷰 바인딩은 이름에 걸맞게 뷰와 연결하여 상호작용하는 것에만 집중된 기능으로 보셔도 됩니다. 안드로이드 공식 문서에도 단순히 뷰를 참조하는 기능만으로는 유사목적으로 가진 버터나이프나, 데이터바인딩 보다 더 우수하여 뷰와 상호작용만이 필요한 상황에서는 뷰바인딩 사용을 권장하고 있습니다.

 

이번 포스트는 워낙 간단하니 다음 포스트에서는 EditText, Button, TextView 를 각각 추가하여 사용자가 글씨를 입력하고 버튼을 클릭하면 입력된 글씨를 텍스트뷰에 보여주는 가장 기본적으면서도 중요한 예제를 소개하겠습니다.