[Android] DataBinding

데이터 바인딩(Data Binding)은 안드로이드 앱 개발에서 UI 컴포넌트와 데이터를 더 쉽게 연결하고 관리할 수 있는 라이브러리입니다. 이 글에서는 데이터 바인딩의 기본 개념부터 활용 방법까지 알아보겠습니다.

데이터 바인딩이란?

안드로이드 앱을 개발할 때, UI 컴포넌트(예: TextView, EditText, ImageView 등)를 코드에서 직접 참조하고 데이터를 설정하는 작업은 반복적이고 복잡할 수 있습니다. 데이터 바인딩은 이런 문제를 해결하기 위해 개발된 라이브러리로, XML 레이아웃 파일과 데이터 모델을 연결하여 UI를 자동으로 업데이트하고 관리할 수 있게 해줍니다.

데이터 바인딩 설정

데이터 바인딩을 사용하려면 다음 단계를 따라야 합니다.

1. 안드로이드 스튜디오 설정: build.gradle 파일에서 데이터 바인딩을 활성화합니다.

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

    2. plugin 에 “kotlin-kapt” 를 추가해 줍니다.

plugins {
    ...
    id("kotlin-kapt")
}

   3. XML 레이아웃 파일 수정: 데이터 바인딩을 사용하려는 XML 레이아웃 파일에 <layout> 태그를 추가합니다.

 

데이터 바인딩 사용하기

데이터 바인딩을 활성화하고 설정한 후, XML 레이아웃 파일과 데이터 모델을 연결하고 데이터를 바인딩하는 작업을 할 수 있습니다.

 

1. 레이아웃에서 데이터 바인딩

XML 레이아웃 파일에서 데이터 바인딩을 사용하려면 다음과 같이 레이아웃에 데이터 모델을 연결하고 데이터를 바인딩합니다.

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <data>
        <variable
            name="viewModel"
            type="com.swjsw.app.cleanflashlight.presentation.FlashlightViewModel" />

    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".presentation.FlashlightActivity">

        <androidx.appcompat.widget.AppCompatImageView
            android:id="@+id/flashlightButton"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:src="@{viewModel.isFlashlightOn ? @drawable/on_button : @drawable/off_button}"
            android:onClick="@{() -> viewModel.toggleFlashlight()}"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <androidx.appcompat.widget.AppCompatTextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{viewModel.isFlashlightOn ? @string/flashlight_off : @string/flashlight_on}"
            android:textColor="@color/white"
            android:textSize="20sp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

위의 XML 레이아웃에서 사용된 데이터 바인딩과 관련된 핵심 내용은 다음과 같습니다:

1. <data> 태그: 데이터 바인딩을 활성화하고, **viewModel**이라는 이름의 변수를 선언합니다. 이 변수는 com.swjsw.app.cleanflashlight.presentation.FlashlightViewModel 클래스를 참조합니다. 이 ViewModel 클래스는 UI와 데이터를 관리하는 데 사용됩니다.
2. android:src 속성: 플래시 버튼 이미지의 소스(@drawable/on_button 또는 @drawable/off_button)를 **viewModel.isFlashlightOn**의 값에 따라 동적으로 변경합니다. 즉, 플래시 기능이 켜진 경우 on_button 이미지가, 꺼진 경우 off_button 이미지가 표시됩니다.
3. android:onClick 속성: 버튼을 클릭할 때 viewModel.toggleFlashlight() 메서드를 호출하여 플래시 기능을 토글합니다.
4. android:text 속성: **viewModel.flashlightStatusText**의 값을 텍스트로 표시합니다. 이 텍스트는 플래시 기능 상태에 따라 동적으로 변경됩니다.

이러한 데이터 바인딩을 활용한 XML 레이아웃 파일을 사용하면 코드에서 UI 업데이트 및 이벤트 처리를 효율적으로 관리할 수 있으며, 데이터와 UI 간의 동기화를 쉽게 구현할 수 있습니다.

 

참고로 Viewmodel 코드는 아래와 같습니다.

class FlashlightViewModel: ViewModel() {
    val _isFlashlightOn = MutableLiveData<Boolean>(false)
    val isFlashlightOn: LiveData<Boolean> = _isFlashlightOn

    private fun turnOnFlashlight() {
        _isFlashlightOn.value = true
    }

    private fun turnOffFlashlight() {
        _isFlashlightOn.postValue(false)
    }

    fun toggleFlashlight() {
        _isFlashlightOn.value = _isFlashlightOn.value?.not()
    }

    suspend fun turnOnFlashlightWithDelayOneSec() {
        delay(1000)
        _isFlashlightOn.value = true
    }

    fun turnOnFlashlightWithDelayTwoSec() = viewModelScope.launch {
        delay(500)
        _isFlashlightOn.value = true
    }
}

 

2. 액티비티에서 데이터 바인딩 초기화

액티비티에서 initDataBinding() 같이 데이터 바인딩을 초기화하고 데이터를 설정합니다.

class FlashlightActivity : AppCompatActivity() {

    private var _binding: ActivityFlashlightBinding? = null
    private val binding get() = _binding!!

    private val viewModel: FlashlightViewModel by lazy {
        ViewModelProvider(this)[FlashlightViewModel::class.java]
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        _binding = ActivityFlashlightBinding.inflate(layoutInflater)
        val view: View = binding.root
        setContentView(view)

        initViews()
        initDataBinding()
        initObserver()
    }

    override fun onDestroy() {
        super.onDestroy()
        _binding = null
    }

    private fun initViews() {
        binding.flashlightButton.setOnClickListener {
            Log.d("FlashlightActivity", "flashlightButton clicked")
        }
    }

    private fun initDataBinding() {
        binding.viewModel = viewModel
        binding.lifecycleOwner = this
    }

    private fun initObserver() {
        viewModel.isFlashlightOn.observe(this) {
            Log.d("FlashlightActivity", "isFlashlightOn : $it")
        }
    }

}

 

데이터 바인딩의 장점

데이터 바인딩은 다음과 같은 이점을 제공합니다:

1. 코드 가독성 향상: XML 레이아웃 파일과 데이터 모델을 연결하므로 코드가 더 간결하고 가독성이 좋아집니다.
2. 타입 안정성: 데이터 바인딩을 사용하면 컴파일 타임에 오류를 감지할 수 있으므로 안정성이 향상됩니다.
3. 재사용성: 데이터 바인딩을 사용하면 여러 뷰와 액티비티에서 동일한 데이터 모델을 재사용할 수 있습니다.
4. 성능 향상: 데이터 바인딩은 뷰를 한 번만 찾아서 사용하므로 성능이 향상됩니다.
5. 데이터 관리 용이성: 데이터와 UI가 분리되어 있어 데이터의 변경이 UI에 쉽게 반영됩니다.

 

결론

데이터 바인딩은 안드로이드 앱 개발을 더 효율적으로 만들어주는 강력한 도구입니다. UI와 데이터를 더 쉽게 연결하고 관리할 수 있으며, 코드의 가독성과 안정성을 향상시킵니다. 데이터 바인딩을 사용하여 안드로이드 앱을 개발하면 유지 보수가 더 쉽고 생산성이 향상됩니다.