• Home
  • About
    • Yerim Oh photo

      Yerim Oh

      Happy and worthwhile day by day :)

    • Learn More
    • Email
    • LinkedIn
    • Instagram
    • Github
    • Youtube
  • Posts
    • All Posts
    • All Tags
  • Projects

[05] App: 안드로이드 앱 view binding

07 Dec 2021

Reading time ~2 minutes

Table of Contents
  • 목차
  • 뷰 바인딩
    • 기존 방법
    • 뷰 바인딩 기법 설정
    • 바인딩 객체 얻기
    • binding 생략 속성

목차

  • 뷰 바인딩
    • 기존 방법
    • 뷰 바인딩 기법 설정
    • 바인딩 객체 얻기
    • binding 생략 속성

뷰 바인딩

뷰 바인딩 view binding: 레이아웃 XML 파일에 선언한 뷰 객체를 코드에서 쉽게 이용하는 방법

[기존 방법의 문제점]
안드로이드는 UI를 구성할 때 대부분 레이아웃 XML 파일을 이용함
레이아웃 XML 파일에 등록한 뷰는 findViewById() 함수로 얻어서 사용해야 함
그런데 이 작업은 꽤 귀찮음
➡ 한 화면을 구성하는 데만도 많은 뷰가 필요하고, 또 뷰는 대부분 코드에서 이용함.
➡ 따라서 코드에서 뷰 객체를 선언하고 모두 findViewById() 함수로 하나하나 가져와야 함

[해결책]
액티비티에서 findViewById() 함수를 이용하지 않고 레이아웃 XML 파일에 등록된 뷰 객체를 쉽게 사용할 방법
➡ 이러한 기능을 지원하는 butterknife라는 라이브러리도 등장
➡ 이제 butterknife 같은 라이브러리의 도움을 받지 않고서도 코드에서 레이아웃 XML에 선언한 뷰를 쉽게 이용할 수 있음


기존 방법

이처럼 작성한 레이아웃 XML 파일이 있다고 가정해보자.
이곳에 선언한 뷰 3개를 코드 에서 id값으로 얻어서 사용할 수도 있다

<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>

</div> </details>


뷰 바인딩 기법 설정

뷰 바인딩 기법을 이용하면 코드에서 훨씬 더 간편하게 뷰 객체를 이용 가능
우선 뷰 바인딩을 사용하려면 그래들 파일에 다음처럼 선언해야 함
➡ build.gradle 파일을 열고 android 영역에 buildFeatures를 선언
➡ 그리고 그 안에 뷰바인딩을 적용하라는 의미로 viewBinding = true를 설정

android { 
    (... 생략 ...) 
         viewBinding { 
               enabled = true 
               }
}

이렇게 하면 레이아웃 XML 파일에 등록된 뷰 객체를 포함하는 클래스가 자동으로 만들어짐
➡ 즉, 우리가 직접 코드에서 뷰를 선언하고 findViewById() 함수를 호출하지 않아도 이를 구현한 클래스가 자동으로 만들어지므로 이 클래스를 이용해 뷰를 사용하기만 하면 됨

[자동으로 만들어지는 클래스 이름] 자동으로 만들어지는 클래스의 이름은 레이아웃 XML 파일명을 따름

  • 첫 글자를 대문자
  • 밑줄(_)은 빼고 뒤에 오는 단어를 대문자로 만듦
  • ‘Binding’을 추가
  • ex)
    image

바인딩 객체 얻기

자동으로 만들어진 클래스의 inflate() 함수를 호출하면 바인딩 객체를 얻을 수 있음
이때 인자로 layoutInflater를 전달
그리고 바인딩 객체의 root 프로퍼티에는 XML 의 루트 태그 객체가 자동으로 등록되므로 액티비티 화면 출력은 setContentView() 함수에 binding.root를 전달하면 됨

class MainActivity : AppCompatActivity() { 
     override fun onCreate(savedInstanceState: Bundle?) { 
          super.onCreate(savedInstanceState)
          
          // 바인딩 객체 획득 
          val binding = ActivityMainBinding.inflate(layoutInflater) 
          // 액티비티 화면 출력 
          setContentView(binding.root)


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

바인딩 객체에 등록된 뷰 객체명은 XML 파일에 등록한 뷰의 id값을 따름.
➡ 즉, XML에 뷰를 <Button android:id=”@+id/visibleBtn” />처럼 등록했다면,
➡ 바인딩 객체에 visibleBtn 이라는 프로퍼티명으로 등록됨
➡ 따라서 코드에서는 binding.vibileBtn으로 이용하면 됨


binding 생략 속성

그런데 build.gradle 파일에 뷰 바인딩을 이용하겠다고 선언하면 레이아웃 XML 하나당 바인딩 클래스가 자동으로 만들어지는데,
이때 어떤 레이아웃 XML 파일은 바인딩 클래스로 만들 필요가 없을 수도 있음.
이때는 XML 파일의 루트 태그에 tools:viewBindingIgnore=" true"라는 속성을 추가
➡ 이 속성을 추가하면 해당 XML 파일을 위한 바인딩 클래스를 만들지 않음

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:tools="http://schemas.android.com/tools" 
              (... 생략 ...) 
              tools:viewBindingIgnore="true">


KotlinApp Share Tweet +1