[JETPACK개론] DataBinding + ViewModel + LiveData

앞에서 공부했던 DataBinding과 ViewModel과 LiveData를 사용하여 실습을 진행해보자!!

이렇게 과일 이름이 주어지고, 그 밑 두 개는 위의 과일이름이 섞여서 나오는 프로그램을 ViewModel과 LiveData를 사용하여 구현해보자.

 

데이터바인딩 준비

buildFeatures{
    dataBinding true
}

 

ViewModel 준비

class MainViewModel : ViewModel() {

    private var _mutableWord = MutableLiveData("")
    val liveWord : LiveData<String>
    get() = _mutableWord

    private var _randommutableWord = MutableLiveData("")
    val randomliveWord : LiveData<String>
        get() = _randommutableWord

하나는 여러 가지의 과일 이름이 담겨있는 데이터리스트 중에서 올바르게 나오는 과일, 하나는 스펠링이 뒤섞여 나오는 변수를 만든다.

 

간단하게 데이터리스트도 준비하자!

val testDataList : List<String> = listOf(
    "apple",
    "strawberry",
    "pineapple",
    "peach",
    "grape",
    "melon",
    "mango",
)

ViewModel에 변수를 만들어 주었으니, 뒤섞이는 함수 또한 만들어주자!

fun getNextData(){
    val currentWord = testDataList.random()
    val randomWord = currentWord.toCharArray()
    randomWord.shuffle()

    _mutableWord.value = currentWord
    _randommutableWord.value = String(randomWord)
}

currentWord는 과일 중에 하나의 이름이 될 것이고, randomWord는 알파벳이 뒤섞인 변수가 될 것이다!

 

그 다음, 나머지 하나도 똑같이 해주면 되는데, 전 게시물에서 사용했던 SwitchMap을 사용하여 데이터를 변형해보고 싶었다.

val newData = Transformations.switchMap(liveWord){
    getRandomWordSuffeld(it)
}

fun getRandomWordSuffeld(word : String) : MutableLiveData<String>{
    val liveData = MutableLiveData("")
    val randomTestWord = word.toCharArray()
    randomTestWord.shuffle()
    liveData.value = String(randomTestWord)
    return liveData
}

따라서 위와 같이 구현해주었다.

현재 liveWord에 따라 함수가 실행이되고, 그 함수의 내용은 위와 같이 랜덤하게 섞여 리턴하는 방식으로 구현하였다.

 

이제 이를 액티비티에서 binding으로 접근해서 text를 변경하는 것이 아닌,

xml에서 직접 변경을 해보자!

그러기 위해서 다음과 같이 적어주어야한다.

<data>
    <variable
        name="vm"
        type="com.example.a3_viewmodellivedatapractice.MainViewModel" />
</data>

그리고 클래스에서 다음과 같이 적어주어 연결해주면 사용하기위한 준비 끝!!

class MainActivity : AppCompatActivity() {

    private lateinit var binding : ActivityMainBinding
    private lateinit var viewModel : MainViewModel

    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)
        viewModel = ViewModelProvider(this).get(MainViewModel::class.java)
        binding.vm = viewModel
        binding.lifecycleOwner = this

        binding.next.setOnClickListener {
            viewModel.getNextData()
        }

    }
}

<TextView
    android:text="@{vm.liveWord}"
    android:textSize="50sp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

<TextView
    android:text="@{vm.randomliveWord}"
    android:textSize="50sp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

<TextView
    android:text="@{vm.newData}"
    android:textSize="50sp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

데이터바인딩과 LiveData, ViewModel을 함께 사용해보면서 MVVM패턴의 장점을 익힐 수 있는 공부가 되었다!!

더 익숙해지려면 많이 사용해보고 한 내용을 블로그에 포스팅하여 정리해야겠다!!!

 

GitHub - SsongSik/JetPack_Android_Practice: Android practice using the Jetpack library