Jetpack Compose ViewModel에서 State객체를 통한 Compose UI 업데이트

Compose에서는 State객체를 이용하여 Observable하게 동작하도록 구현하는 것을 권장한다.

Compose UI는 State객체를 관찰하다가 State객체의 값이 변하면 Compose UI는 Re-Composition을 발생시켜 UI를 업데이트 한다.

developer 사이트의 Jetpack Compose를 소개하는 소스를 참고하여 예제를 만들어 보자.

본 예제에서는 별모양의 이미지를 클릭하면 On/Off 하는 기능을 만들어 볼 것이다.

먼저 ViewModel을 사용하기 위해 build.gradle 파일에 아래 항목을 추가한다.

(참고: https://developer.android.com/jetpack/compose/libraries#viewmodel)

dependencies {
	implementation "androidx.lifecycle:lifecycle-viewmodel-compose:2.5.1"
}

 

 

1. ViewModel Class 생성

class MyViewModel : ViewModel() {
    private val _callChange = mutableStateOf(false)
    val callChange: State<Boolean> = _callChange

    fun callChange() {
        _callChange.value = !_callChange.value
    }
}

 

2. MainView 생성

@Composable
fun MainView(viewModel: MyViewModel) {
    Column(
        Modifier
            .fillMaxSize()
    ) {
        Image(
            painter = if (viewModel.callChange.value) painterResource(id = android.R.drawable.star_big_on) else painterResource(
                id = android.R.drawable.star_big_off
            ),
            contentDescription = null,
            modifier = Modifier
                .size(100.dp, 100.dp)
                .align(Alignment.CenterHorizontally)
                .clickable { viewModel.callChange() }
        )
        AnimatedVisibility(
            visible = viewModel.callChange.value,
            modifier = Modifier.align(Alignment.CenterHorizontally)
        ) {
            Text(text = "Hello~ Star")
        }
    }
}

 

3. 결과

Image Compose UI는 State객체인 callChange가 변할 때마다 업데이트 된다.

private 변수는 _callChange는 외부에서 조작할 수 없고, public 변수 callChange는 외부에서 읽기용으로 사용한다. 이 간단한 방법으로 Reactive한 Compose UI를 개발할 수 있다.