[Android 기초] 9. View Binding (뷰 바인딩)

 

 

 

 

kotlin synthetics는 현재 deprecated 됨

 

 

 

 

1. 뷰 바인딩 (View Binding) = 뷰 결합

• 뷰와 상호작용하는 코드를 더 쉽게 작성할 수 있게 해주는 기능
• 뷰 바인딩을 사용할 때, 안드로이드 스튜디오는 XML 레이아웃 파일의 이름을 기반으로 바인딩 클래스를 자동 생성
• 바인딩 클래스는 레이아웃에 ID가 있는 모든 뷰에 대한 직접 참조를 포함, 이를 통해 코드에서 직접 뷰에 접근
• 바인딩 객체의 이름은 레이아웃 파일 이름 뒤에 'Binding'을 붙여 만들어짐
  (예) 레이아웃 파일 이름이 `activity_main.xml`인 경우, 생성되는 바인딩 클래스의 이름은 `ActivityMainBinding`
  (예) 레이아웃 파일 이름이 `fragment_home.xml`인 경우, 생성되는 바인딩 클래스의 이름은 `FragmentHomeBinding`
• 대부분의 경우 뷰 바인딩이 findViewById를 대체

 

 

 

 

2. findViewById와의 차이점

 

1) Null 안전성 (Null Safety)

• 뷰 바인딩 기능을 사용하면, 앱이 레이아웃의 각 뷰를 직접 참조할 수 있게 해주는 안전한 코드를 자동으로 생성
• 이는 뷰를 사용할 때 'null' 값으로 인한 오류,
  즉 뷰가 아직 화면에 나타나지 않았는데 그 뷰를 사용하려고 할 때 생길 수 있는 문제들을 예방
• (예) 레이아웃에 버튼이 있어야 하는데 아직 버튼이 생성되지 않은 경우
  -> 뷰 바인딩은 이를 안전하게 처리하여 앱이 충돌하지 않도록 함
• (예) 레이아웃의 일부만 뷰가 있는 경우
  -> 뷰 바인딩은 해당 뷰가 '가능성 있는 null'(Nullable)임을 알려주어, 개발자에게 주의를 줌

 

2) 타입 안전성 (Type Safety)

• XML 레이아웃 파일에서 정의된 뷰의 타입과 자동 생성된 바인딩 클래스의 필드 타입이 항상 일치함
  따라서 타입이 서로 맞지 않아 발생할 수 있는 오류를 방지
• (예) 이미지 뷰(ImageView)에 텍스트를 설정하려고 하면 오류가 발생할텐데, 뷰 바인딩을 사용하면 이런 실수를 할 가능성이 없어짐. 즉, 이미지 뷰는 이미지 뷰로, 텍스트 뷰는 텍스트 뷰로만 사용되게 하여, 잘못된 타입 사용으로 인한 오류가 발생하지 않도록 보장

 

 

 

 

3. 코틀린으로 뷰 바인딩 설정 및 사용법

 

1) gradle설정

(필수) 모듈 수준 build.gradle 파일

android{
...
    buildFeatures{
     viewBinding = true
    }
}
```

(선택) 바인딩 클래스를 생성하는 동안 레이아웃 파일을 무시 -> 레이아웃 파일에 추가

<LinearLayout
        ...
        tools:viewBindingIgnore="true" >
    ...
</LinearLayout>

• 뷰 바인딩은 모듈별로 사용 설정됨
• 모듈에서 뷰 바인딩을 사용 설정하려면 모듈 수준 build.gradle 파일에서 viewBinding 빌드 옵션을 true로 설정
• 만약 바인딩 클래스를 생성하는 동안 레이아웃 파일을 무시하려면
  tools:viewBindingIgnore="true" 속성을 레이아웃 파일의 루트 뷰에 추가

 

 

2) Activity에서 설정

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

class MainActivity : AppCompatActivity() {

	private lateinit var binding: ActivityMainBinding
    
    override fun onCreate(savedInstanceState: Bundle?) {
    	super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)  
        val view = binding.root    // 아니면 이거 없이 바로 setContentView(binding.root)
        setContentView(view)

}

혹은 val by lazy로 구현

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

class MainActivity : AppCompatActivity() {

	private val binding: ActivityMainBinding by lazy {
            binding = ActivityMainBinding.inflate(layoutInflater)  
    }
    
    override fun onCreate(savedInstanceState: Bundle?) {
    	super.onCreate(savedInstanceState)
        setContentView(binding.root)

}

• 클래스를 위와 같이 만듦 (두 개의 성능 차이는 없음)
• inflate는 xml에 있는 뷰를 객체화
• 원래는 R.layout.activity_main을 넘겨주지만 이번에는 여기서 생성한 루트 뷰를 넘겨줌
• binding된 객체 안에 있는 id에 접근하여 사용
  (예) binding.button1.text = "안녕"
  (예) binding.button2.setBackgroundColor(Color.BLACK)

 

 

 

4. 뷰 바인딩 예제

 

1) 빌드 설정 추가

build.gradule (Module :app)

buildFeatures{
     viewBinding = true
    }
}

 

2) Layout XML 작성

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/myTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/myButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/myTextView" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

3) MainActivity.kt 작성

MainActivity.kt

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

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

        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        binding.myButton.setOnClickListener{
            binding.myTextView.text = "바인딩 출력"   // 보고 있는 텍스트가 바로 수정 됨. 직접 참조, 수정 가능
        }
    }
}

 

 

 

🔨 참고하기 좋은 사이트

• https://todaycode.tistory.com/29 
• 안드로이드 개발자 문서 링크

 

뷰 결합  |  Android 개발자  |  Android Developers