[안드로이드 Android] 뷰 바인딩 View Binding #3 - 여러 뷰들 제어하기 simple 예제

 

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

이번에는 EditText와 Button, TextView를 배치하여, 사용자가 EditText에 글씨를 입력하고 완료버튼을 클릭하면 써있는 글씨를 읽어와서 TextView에 보여주는 간단하면서 앱 개발기술을 가장 중요한 예제를 뷰 바인딩으로 처리해 보겠습니다.

 

3) 뷰 참조와 클릭이벤트 처리 종합 simple 예제 실습

- 버튼클릭이벤트의 처리는 버터나이프처럼 @OnClick 어노테이션이 없기에 기존에 해오던 xml 레이아웃 파일의 뷰에 onClick속성을 지정하여 처리하겠습니다.

 

이전 예제에 이어서 코드를 작성하니 주석에 표시한 실습번호 3)에 해당하는 코드영역을 구분하여 보시기 바랍니다.

 

먼저, 레이아웃파일에 뷰들을 추가하겠습니다.

# 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"/>


    <!-- 3) EditText의 글씨을 얻어와서 TextView에 보이는 예제실습 [뷰참조와 클릭이벤트 종합 simple 예제]-->
    <EditText
        android:id="@+id/et"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="enter text"
        android:inputType="text"
        android:layout_marginTop="24dp"/>
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="입력완료"
        android:onClick="clickBtn2"/>
    <TextView
        android:id="@+id/tv2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="8dp"
        android:textColor="#FF333333"
        android:text="RESULT"/>  

</LinearLayout>

 

이제 자바 코드의 버튼 클릭 콜백메소드 ( clickBtn2 )에서 뷰를 제어하는 코스를 작성하겠습니다.

이미 바인딩 클래스(ActivityMainBinding) 객체에 의해 TextView와 EditText의 참조변수들이 연결되어 있기에 별도의 멤버변수(Field) 선언과 findViewById()를 명시적으로 작성할 필요없이 곧바로 클릭이벤트 처리 코드만 작성하면 됩니다. 버터나이프의 어노테이션 작업도 필요없습니다. 정말 빠르고 간결하고 기능이 추가되는 느낌일겁니다.

 

# 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;
        });
    }



    //3) 뷰 참조와 클릭이벤트 처리 종합 simple 예제 실습 - 버튼클릭이벤트 처리는 onClick속성 이용
    //이미 바인딩 클래스객체에 의해 TextView와 EditText의 참조변수들이 연결되어 있기에 곧바로 클릭이벤트 처리 코드만 작성 - 버터나이프의 어노테이션 작업도 필요없음.
    public void clickBtn2(View view) {
        mainBinding.tv2.setText(mainBinding.et.getText().toString());
        mainBinding.et.setText(""); //EditText의 글씨 지우기
    }
    
}

위 자바코드의 마지막 부분의 3) 영역만 추가한 겁니다. 코딩을 거의 안한 느낌이지요. 아주 편하다고 느끼실 겁니다.

 

다음 포스트에서는 액티비티의 UI에서 한 부분을 별도를 만들고 관리하기위한 Fragment에서 뷰 바인딩을 사용하는 방법을 소개하겠습니다. 버터나이프 때처럼 아주 간단한 실습으로 소개할테니 가볍게 살펴보시기를 바랍니다.