코드랩을 활용한 LiveData, DataBinding 공부

LiveData는 data의 변화를 실시간으로 관찰(observe)할 수 있습니다. 

 

private val _score = MutableLiveData(0)
val score : LiveData<Int>
    get() = _score

위와 같은 방식으로 LiveData를 ViewModel에 선언합니다. 

이 때 MutableLiveData는 변경 가능한 형태의 LiveData임을 의미합니다. 

LiveData는 get()으로 MutableLiveData을 가져와서 사용합니다.

 

이와 같은 관찰해 줄 데이터에 대해 ViewModel에 코드를 작성해 준 후에 가져옵니다. 이 때 가져오는 방식으로는 여러가지가 존재하는데.

 저는 이 글에서는 dataBinding을 사용하려 합니다. 

 

build.gradle(:app) 에서

buildFeatures {
    dataBinding = true
}

위와 같은 코드를 작성해줌으로써 dataBinding을 선언할 수 있습니다. 

 

이후에 dataBinding을 진행할 XML 파일로 넘어가서 

<layout>
    <data>
        <variable
            name="gameViewModel"
            type="com.example.fragment1223.game.GameViewModel" />
        <variable
            name="maxNoOfWords"
            type="int" />
    </data>
</layout>

private lateinit var binding: FragmentGameBinding
private val viewModel: GameViewModel by viewModels()

override fun onCreateView(
    inflater: LayoutInflater, container: ViewGroup?,
    savedInstanceState: Bundle?
): View? {
    binding = DataBindingUtil.inflate(inflater, R.layout.fragment_game, container, false)
    return binding.root
}

위와 같은 형식의 코드를 작성해줍니다. 

<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="gameViewModel"
            type="com.example.android.unscramble.ui.game.GameViewModel" />
        <variable
            name="maxNoOfWords"
            type="int" />
    </data>

위와 같이 코드를 추가해줍니다. 

            <TextView
                android:id="@+id/score"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@{@string/score(gameViewModel.score)}"
                android:textAllCaps="true"
                android:textAppearance="@style/TextAppearance.MaterialComponents.Headline6"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                tools:text="Score: 20" />

 값이 변화하는 TextView 입니다. 실시간으로 변화를 감지하기 위해 livedata를 사용하였고 XML에서는 data binding을 사용하여 변화된 데이터가 관찰되면 이를 인지하고 값을 수정해주어야 합니다. 

 

                android:text="@{@string/score(gameViewModel.score)}"

이라는 코드를 통해 데이터 변화가 인지되면 변화를 줄 수 있게 되었습니다. 

 

<string name="score">Score: %d</string>

 

++ @{@string/score(gameViewModel.score)} 에서 괄호의 값으로 표현되어 있는 변수는 values - strings.xml 에서 %d 로 표현이 됩니다.

 

 

이러한 방식으로 변화하는 값을 관찰할 수 있는 livedata를 만들고, data binding을 활용하여 변화한 값을 view에 적용해주면 됩니다. 

 

 

 

- 코드랩 주소 

https://developer.android.com/codelabs/basic-android-kotlin-training-livedata#0