Jetpack Compose 에서 기존 View 를 사용하고자 한다면!

Compose 는 분명 개발에 있어 편리한건 사실이지만 아직 Composable 로써 넘어오지 않은 UI 요소들도 분명 존재합니다.

이런 부분들은 Compose 에서는 AndroidView 를 활용하여 사용할 수 있습니다.(기존의 XML View 와도 혼용해서 사용할 수 있는 이유입니다.)

기본적인 틀은 다음과 같습니다.

@Composable
@UiComposable
fun <T : View> AndroidView(
    factory: (Context) -> T,
    modifier: Modifier = Modifier,
    update: (T) -> Unit = NoOpUpdate
) {
    AndroidView(
        factory = factory,
        modifier = modifier,
        update = update,
        onRelease = NoOpUpdate
    )
}

 

context 를 후행람다로 넘겨주는데 기존 안드로이드의 View 는 일반적으로 Context 를 parameter 로 가졌었죠.

 public View(Context context) {
        mContext = context;
        mResources = context != null ? context.getResources() : null;
        mViewFlags = SOUND_EFFECTS_ENABLED | HAPTIC_FEEDBACK_ENABLED | FOCUSABLE_AUTO;
        // Set some flags defaults
....

 

Factory 라고 하여 다소 복잡하게 보일 수 있지만 기본적으로 원하는 View 를 선언한 후 apply 로 부가적인 기능을 사용하는 형태로 쉽게 구현할 수가 있습니다.

 

아래와 같이 말이죠

val selectedColor = Color.White
AndroidView(
    modifier = modifier,
    factory = {context ->
    CustomView(context).apply {
        color = selectedColor
    }
})

 

생명주기의 관리 역시 LaunchedEffect 와 DisposableEffect 를 이용하여 어렵지 않게 관리 가능합니다.