[Android] View Binding과 예제

2023.06.07

 

1. View

 

View

: 모든 뷰 클래스의 최상위 클래스로 화면에 보이는 모든 것을 View라고 칭한다.

 

안드로이드 공식 문서에 따르면 View 클래스는 UI 구성 요소를 만드는 데 기본이 되는 Widget과, 다른 뷰 객체들을 담고 제어하는 Layout으로 나뉜다.

 

 

Component Tree에서 LinearLayout 하위에 textView, button, button2가 차례로 위치해있는 것을 볼 수 있는데, 여기서 LinearLayout은 Layout 요소이고, TextView와 Button은 Widget 요소이다.

 

<?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"
    tools:context=".MainActivity" >

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="TextView"/>

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="버튼 1" />

    <Button
        android:id="@+id/button2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="버튼 2" />
</LinearLayout>

 

위 사진의 UI를 구성하는 activity_main.xml 코드이다. 이 코드에 id, layout_width, layout_height 등의 View 주요 속성들이 작성되었다. 

 

 

< View의 주요 속성 >

id	view 를 식별하는 id 값
layout_width	view 의 가로 길이
layout_height	view 의 세로 길이
text	view 에 출력할 문자열
background	view 의 배경
layout_margin	view 의 외부 여백
padding	view 의 내부 여백

 

layout_width에 적용된 match_parent 값은 부모 요소에 길이를 맞춰주고, layout_height에 적용된 wrap_content 값은 해당 뷰에 필요한 최소 크기로 지정해준다.

 

 

 

 

 

2. View Binding

 

Android studio 3.5 버전 까지는 클래스 파일에서 레이아웃 파일의 뷰 객체를 사용하려면 findViewByID()라는 함수를 이용해야 했다. 이 방식은 생성된 모든 뷰에 대해 일일이 객체 참조 변수를 만들어 객체를 받아와야 하는 번거로움이 있었다. 

 

이후 Android studio 3.6 버전에서 부터 View Binding이라는 기능이 지원됐는데, View Binding을 사용하면 findViewByID() 함수를 통해 일일이 객체를 생성하지 않아도 되고 지정한 xml 파일에 있는 모든 뷰들을 자동으로 객체화해주기 때문에 개발자 입장에서 더 간결한 코드로 객체들에 접근할 수 있게 된다.

 

 

View Binding을 사용하기 위해서는 우선 앱 수준의 그래들 파일에 아래 코드를 추가해줘야 한다.

 

   

      android{
          viewBinding{
                enabled = true
          }
      }

 

 

viewBinding{ ... } 에 해당하는 내용만을 android { ... } 부분 내에 작성해주면 된다.

 

 

작성 후 반드시 Sync Now를 클릭해 싱크를 맞춰준다.

 

class MainActivity : AppCompatActivity() {

    lateinit var activityMainBinding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        activityMainBinding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(activityMainBinding.root)
        
        //버튼을 눌렀을 때 동작할 메서드를 가지고 있는 객체를 생성해 설정한다.
        activityMainBinding.button.setOnClickListener {
            activityMainBinding.textView.text = "버튼 1을 클릭했습니다."
        }
        activityMainBinding.button2.setOnClickListener {
            activityMainBinding.textView.text = "버튼 2를 클릭했습니다."
        }
    }
}

 

위와 같이 작성하면 뷰 객체를 일일이 생성하지 않아도 뷰 바인딩을 통해 뷰 객체에 접근할 수 있다.

뷰 바인딩 클래스 이름에는 규칙이 정해져 있기 때문에 맞춰서 사용해야 한다.

 

현재 바인딩할 파일의 이름이 activity_main.xml이기 때문에 바인딩 클래스 이름은 ActivityMainBinding이 된다.

다른 예로 activity_second.xml인 파일을 바인딩 한다고 하면 바인딩 클래스 이름은 ActivitySecondBinding이 된다.

 

이렇게 바인딩 클래스의 객체를 참조한 activityMainBinding 변수를 통해 모든 뷰에 접근할 수 있다.

 

 

비교를 위해 findViewByID 함수를 이용한 코드를 작성해보았다.

class MainActivity : AppCompatActivity() {

    lateinit var button:Button
    lateinit var button2:Button
    lateinit var textView: TextView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        //setContentView에 설정된 화면에서
        //id가 button, textView인 요소들의 객체 ID 값을 가져온다.
        button = findViewById(R.id.button)
        button2 = findViewById(R.id.button2)
        textView = findViewById(R.id.textView)

        //버튼을 눌렀을 때 동작할 메서드를 가지고 있는 객체를 생성해 설정한다.
        button.setOnClickListener {
            textView.text = "버튼 1을 클릭했습니다."
        }
        button2.setOnClickListener {
            textView.text = "버튼 2를 클릭했습니다."
        }
    }
}

 

뷰 바인딩을 적용한 코드보다 조금 길다. 만약 레이아웃 리소스에 만들어진 뷰의 개수가 훨씬 많았다면 코드 길이도 훨씬 길었을 것이다.

 

View Binding은 현재 코틀린 코드와 자바 코드에서 모두 사용 가능하다.