📌 AndroidView란? Jetpack Compose에서 기존 Android View 사용하기!

🔥 AndroidView란 무엇인가요?

AndroidView는 Jetpack Compose에서 기존의 Android 뷰(UI 컴포넌트)를 사용할 수 있도록 해주는 기능입니다. 예를 들어, WebView, MapView, VideoView 등 기존의 XML 기반 View를 Jetpack Compose 환경에서 활용할 수 있습니다.

✅ AndroidView 주요 기능

기존 Android View를 Compose 내부에서 활용 가능 🏗️
View의 속성 및 이벤트를 조작할 수 있음 🔄
기존 View 기반 라이브러리와의 호환성을 높여줌 ✅

🎯 AndroidView 기본 사용법

import android.content.Context
import android.widget.TextView
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.viewinterop.AndroidView

@Composable
fun CustomTextView() {
    AndroidView(
        factory = { context -> TextView(context).apply { text = "Hello from AndroidView!" } },
        modifier = Modifier.fillMaxWidth()
    )
}

🔹 설명:

factory를 사용하여 TextView를 생성하고 AndroidView 내부에서 배치합니다.
Modifier를 활용해 Compose 스타일을 적용할 수도 있습니다.

🌍 WebView를 AndroidView로 활용하기

Jetpack Compose에서 WebView를 활용하려면 다음과 같이 AndroidView를 사용합니다.

import android.webkit.WebView
import android.webkit.WebViewClient
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.viewinterop.AndroidView

@Composable
fun WebViewScreen(url: String) {
    AndroidView(
        factory = { context ->
            WebView(context).apply {
                settings.javaScriptEnabled = true // 자바스크립트 활성화
                webViewClient = WebViewClient() // 웹뷰 클라이언트 설정
                loadUrl(url)
            }
        },
        modifier = Modifier.fillMaxSize()
    )
}

🚀 WebView 활용 예시

앱 내에서 웹 페이지를 띄울 때 사용 📱
기존 WebView 기반 앱을 Compose로 전환할 때 활용 🔄
외부 API에서 제공하는 웹 콘텐츠를 표시할 때 유용 🌍

🔄 AndroidView 업데이트 (update 사용법)

AndroidView는 update 매개변수를 사용하여 뷰를 동적으로 변경할 수 있습니다.

import android.widget.TextView
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.viewinterop.AndroidView

@Composable
fun UpdatableTextView(text: String) {
    AndroidView(
        factory = { context -> TextView(context) },
        update = { it.text = text },
        modifier = Modifier.fillMaxWidth()
    )
}

🔹 설명:

update 블록을 활용하여 기존의 TextView 인스턴스를 수정할 수 있습니다.
update는 View가 재사용될 때마다 호출되므로, 새로운 값을 적용할 때 유용합니다.
예를 들어 text 상태가 변경되면 TextView의 내용이 즉시 업데이트됩니다.

🛠️ 기존 View와 AndroidView의 차이점

비교 항목 XML 기반 View AndroidView (Jetpack Compose)

선언 방식	XML	Kotlin 코드 (Composable)
UI 구성	Activity/Fragment 내에 포함	Compose 내부에서 사용
상태 관리	ViewModel, LiveData 활용	Compose의 상태 관리 (remember, State)
성능	비교적 무겁고 리소스 사용 많음	경량화된 UI, 성능 최적화 가능

🔗 AndroidView 관련 질문 & 답변 (FAQ)

1️⃣ AndroidView를 사용할 때 주의할 점은?

✔️ 기존 View의 생명주기 관리에 신경 써야 합니다. 예를 들어, WebView나 MapView처럼 리소스를 많이 사용하는 뷰는 onCleared() 또는 onDispose()에서 정리하는 것이 좋습니다.

2️⃣ Modifier를 AndroidView에서 사용할 수 있나요?

✔️ 네! modifier를 활용하여 Compose 스타일을 적용할 수 있습니다. 예를 들어, Modifier.fillMaxSize()를 추가하면 WebView가 전체 화면을 차지하게 됩니다.

3️⃣ 기존 XML 레이아웃을 AndroidView로 변환할 수 있나요?

✔️ 가능하지만, XML 레이아웃 전체를 AndroidView로 감싸는 것은 추천하지 않습니다. 대신, 필요한 개별 UI 요소만 AndroidView를 사용하여 조합하는 것이 더 효율적입니다.

📌 결론: AndroidView는 언제 사용할까?

🔹 AndroidView를 사용하면 좋은 경우
✅ 기존 Android View 기반의 UI 요소를 Jetpack Compose에서 그대로 활용하고 싶을 때
✅ WebView, MapView, TextureView 등 Compose에 기본 제공되지 않는 UI 요소가 필요할 때
✅ 기존 Android 라이브러리와 Compose를 함께 사용해야 할 때

🚀 Jetpack Compose를 도입하면서도 기존 View를 활용하고 싶다면 AndroidView를 적극 활용해 보세요! 🎉

저작자표시 비영리 변경금지

슬기로운 컴포즈 생활 🎼