6-4 뷰를 이용한 화면 구성 - 뷰 바인딩

1. 뷰 바인딩이란?

뷰 바인딩은 Android에서 XML 레이아웃 파일의 UI 요소에 쉽게 접근할 수 있도록 도와주는 기능이다. 뷰 바인딩을 사용하면 findViewById를 사용하지 않고도 XML 레이아웃의 뷰에 타입 안전하게 접근할 수 있다.

만약 뷰 바인딩을 사용하지 않고, 100개의 뷰를 참조하려면 일일히 100개를 참조해야 할 것이다.

2. 뷰 바인딩의 장점

• 타입 안전: XML에 정의된 뷰에 직접 접근하기 때문에 잘못된 타입으로 캐스팅하는 실수를 방지할 수 있다.
• NullPointerException 방지: 뷰가 확실히 레이아웃에 존재하기 때문에 NullPointerException을 예방할 수 있다.
• 간결한 코드: findViewById를 대체하면서 코드가 더 간결해지고, 정말 편하다.

3. 코드 분석

3.1. XML 레이아웃 파일 (activity_main.xml)

이 파일은 간단한 레이아웃으로, 두 개의 버튼과 하나의 텍스트 뷰를 포함한다:

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

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

    <TextView
        android:id="@+id/targetView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="hello world"
        android:background="#FF0000"
        android:textColor="#FFFFFF" />

    <Button
        android:id="@+id/invisibleBtn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="invisible" />
</LinearLayout>

• visibleBtn: 이 버튼을 클릭하면 텍스트 뷰가 보이도록 설정된다.
• targetView: "Hello World"라는 텍스트를 가진 텍스트 뷰다.
• invisibleBtn: 이 버튼을 클릭하면 텍스트 뷰가 숨겨진다.

3.2. build.gradle 설정

뷰 바인딩을 활성화하기 위해 다음 설정을 추가했다:

viewBinding.isEnabled = true

이 설정으로 인해 프로젝트 내의 XML 레이아웃 파일에 대해 바인딩 클래스가 자동으로 생성된다. 예를 들어, activity_main.xml 파일에 대해 ActivityMainBinding 클래스가 자동으로 생성된다.

자동으로 만들어지는 클래스의 이름은 레이아웃 XML 파일명을 따른다.
첫글자를 대문자로하고 밑줄은 빼고 뒤에 오는 단어를 대문자로 만든 후 Binding을 추가한다.

ex)
activitity_main.xml -> ActivityMainBinding

3.3. Kotlin 코드 (MainActivity.kt)

package com.example.androidlab

import android.os.Bundle
import android.view.View
import androidx.appcompat.app.AppCompatActivity
import com.example.androidlab.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // 바인딩 객체 획득
        val binding = ActivityMainBinding.inflate(layoutInflater)

        // 액티비티 화면 출력
        setContentView(binding.root)

        // 뷰 객체 이용
        binding.visibleBtn.setOnClickListener {
            binding.targetView.visibility = View.VISIBLE
        }
        binding.invisibleBtn.setOnClickListener {
            binding.targetView.visibility = View.INVISIBLE
        }
    }
}

1. 바인딩 객체 생성:

   val binding = ActivityMainBinding.inflate(layoutInflater)

ActivityMainBinding 클래스는 activity_main.xml 파일에 대해 자동으로 생성된 클래스다.
자동으로 만들어진 클래스의 inflate() 함수를 호출하면 바인딩 객체를 얻을 수 있으며, 이때 인자로 layoutInflator를 전달한다.

2. 레이아웃 설정:

   setContentView(binding.root)

안드로이드 앱을 만들 때, 화면의 모양새는 주로 XML 파일로 만든다. 이 XML 파일은 앱의 얼굴이라고 할 수 있다. 뷰 바인딩이라는 기술을 사용하면, 이 XML 파일과 연결된 특별한 객체가 자동으로 만들어진다. 이 객체를 통해 XML에 있는 여러 요소들을 쉽게 다룰 수 있다.

이 바인딩 객체에는 'root'라는 특별한 속성이 있다. 이 root는 XML 파일의 가장 바깥쪽 틀을 가리킨다. 여기에선 LinearLayout이 root다. 예를 들어, XML이 큰 상자로 시작한다면, root는 이 큰 상자를 의미하는 것이다.

앱에서 화면을 보여줄 때는 setContentView()라는 함수를 씁니다. 이 함수에 binding.root를 넣어주면, XML에서 정의한 전체 화면 구조를 그대로 앱에 표시할 수 있다. 이렇게 하면 복잡한 과정 없이 원하는 화면을 쉽게 만들 수 있다.

이 방식의 장점은 코드를 간단하게 쓸 수 있고, 실수할 가능성도 줄어든다.
XML 파일의 구조를 일일이 코드로 짜지 않아도 되기 때문이다.
또, 컴퓨터가 코드의 오류를 미리 잡아줄 수 있어 더 안전하게 앱을 만들 수 있다.

결론적으로, binding.root와 setContentView()를 함께 쓰면 XML로 디자인한 화면을 앱에 쉽고 안전하게 표시할 수 있다. 이는 현대적인 안드로이드 앱 개발 방식의 좋은 예시라고 할 수 있겠다.

3. 뷰 요소에 접근 및 이벤트 처리:

   binding.visibleBtn.setOnClickListener {
       binding.targetView.visibility = View.VISIBLE
   }
   binding.invisibleBtn.setOnClickListener {
       binding.targetView.visibility = View.INVISIBLE
   }

setOnClickListener()는 Android에서 뷰(View)의 클릭 이벤트를 처리하기 위해 사용되는 메서드다. 이 메서드를 사용하면 버튼이나 이미지와 같은 UI 요소를 클릭했을 때 어떤 동작을 할지 지정할 수 있다.

visibleBtn 버튼을 클릭하면 targetView의 가시성이 VISIBLE로 변경되어 보이게 된다. 반대로 invisibleBtn 버튼을 클릭하면 targetView의 가시성이 INVISIBLE로 변경되어 화면에서 사라진다.

결과물

visible을 누르면 hello world가 보이고, invisible을 누르면 사라진다.

정리

1. 뷰 바인딩이란: XML 레이아웃 파일과 연결된 객체를 자동으로 생성해, findViewById 없이 뷰에 타입 안전하게 접근할 수 있는 기능이다.

2. 뷰 바인딩의 장점: 타입 안전성, NullPointerException 방지, 간결한 코드로 인해 효율적인 개발이 가능하다.

3. 바인딩 객체 생성: ActivityMainBinding.inflate(layoutInflater)를 통해 XML 레이아웃에 해당하는 바인딩 객체를 얻을 수 있다.

4. 레이아웃 설정: setContentView(binding.root)를 통해 XML의 루트 뷰를 액티비티에 표시한다.

5. 뷰 접근 및 이벤트 처리: binding.visibleBtn.setOnClickListener를 통해 XML에 정의된 버튼과 텍스트 뷰의 클릭 이벤트를 처리할 수 있다.