Jetpack Compose의 Android View에서 WebView 활용

개시하다

Jetpack Compose에서 WebView를 사용하려면 Android View를 사용하여 WebView를 생성해야 합니다.안드로이드 뷰를 이용한 웹뷰 생성 방법을 조금 조사해 봤기 때문에 정리해봤습니다.

설정

본 글은 다음과 같은 환경에서 동작 확인을 진행하였다.

Kotlin v1.5.21

Jetpack Compose v1.0.1

Android Studio Bublebee | 2021.1.1 Canary 7

Android View

Jetpack Compose에는 Android View와 같은 조합이 준비되어 있습니다.Android View를 사용하면 Jetpack Compose의 UI 레이어에 TextView, EditView 등의 View 요소를 포함할 수 있습니다.이 Android View 구성 요소를 사용하면 Jetpack Compose에서도 WebView를 사용할 수 있습니다.

<T : View> AndroidView(
    factory: (Context) -> T,
    modifier: Modifier,
    update: (T) -> Unit
)

Android View 조합으로 WebView 생성

Android View 조합을 사용하여 WebView를 생성하는 것은 간단합니다.아래와 같이 Android View를 호출하여factory와 업데이트 방법을 정의하면 WebView를 생성하고 제어할 수 있습니다.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent { MyWebClient(url = "https://kaleidot.net") }
    }
}

// MEMO
// factory は View を生成するときに一度だけ呼ばれるメソッド
// 　今回は WebView を生成したいので factory には WebView のコンストラクターを参照して渡す
// 
// update は UI 階層の再構成時に複数回呼ばれるメソッド
// 　factory で生成した View に対して update で表示更新するような仕組みになっている
// 　今回は生成された WebView に対して特定の URL の Web ページを表示するようにしてみる
@Composable
fun MyWebClient(url: String) {
    AndroidView(
        factory = ::WebView,
        update = { webView ->
            webView.webViewClient = WebViewClient()
            webView.loadUrl(url)
        }
    )
}

끝말

위에서 설명한 바와 같이 Jetpack Compose에서는 Android View를 사용할 경우 WebView, MapView, AdView 등 기존 SDK에서 구현된 View를 사용할 수 있습니다.Jetpack Compose의 UI 요소 중 지원되지 않는 부분이 있으면 Android View를 통해 전환할 수 있어 매우 편리합니다.