Android Migrate an xml view to compose
사용 버전: Android Studio Koala 2024.1.1
사용 언어: Kotlin 2.0.10
오늘은 XML(엑스엠엘) View(뷰)로 만들어진 앱을 Compose(컴포즈)로 변경해 보는 작업을 해봅시다.
아쉽지만 Compose에 대한 설명은 없습니다. 이미 알고 계신다고 생각하고 진행할 거예요.
아래는 현재 XML로 작성된 제 앱입니다. 이걸 Compose로 변경할 것입니다. 재미있어 보이지 않나요?
사용 언어: Kotlin 2.0.10
안드로이드 Migrate an xml view to compose를 알아보겠습니다.
오늘은 XML(엑스엠엘) View(뷰)로 만들어진 앱을 Compose(컴포즈)로 변경해 보는 작업을 해봅시다.
아쉽지만 Compose에 대한 설명은 없습니다. 이미 알고 계신다고 생각하고 진행할 거예요.
아래는 현재 XML로 작성된 제 앱입니다. 이걸 Compose로 변경할 것입니다. 재미있어 보이지 않나요?
Compose로 변경할 때에는 보통 Fragment 단위로 변경하는 것을 추천합니다. 다시 말하자면, 화면 단위로 변경하는 것이죠.
buildFeatures에 compose = true를 적어줍니다.
dependencies에는 다음의 내용을 추가해 줍니다.
설명을 위해 version catalog는 적용하지 않았습니다.
implementation(platform("androidx.compose:compose-bom:2024.08.00"))
implementation("androidx.compose.material3:material3")
implementation("androidx.compose.ui:ui-tooling-preview")
debugImplementation("androidx.compose.ui:ui-tooling")
Sync Now를 눌러줍니다.
plugin에 compose compiler를 추가해 줍니다.
Project 용 build.gradle
id("org.jetbrains.kotlin.plugin.compose") version("2.0.10") apply false
Sync Now를 눌러줍니다.
compose를 적용할 모듈 용 build.gradle
id("org.jetbrains.kotlin.plugin.compose")
Sync Now를 눌러줍니다.
파일을 하나 만듭니다.
만든 TranslateItem.kt 파일에 아래와 같이 compose를 정의해 줍니다.
왜 이런 Item을 만드는지는 위의 XML을봐주시면 됩니다. 그걸 이걸로 교체하는 거예요.
TranslateScreen로 파일을 하나 만듭니다.
TranslateScreen.kt
이렇게 만들어주면, 미리 보기를 한 번 볼까요?
버튼 위치는 제가 따로 수정해서 달라졌지만, XML과 똑같은 구성이 되었습니다.
그럼 문제는 이 Compose를 어떻게 XML 대신 Fragment에서 사용하게 하느냐인데, 한 번 더 찾아봅시다.
ComposeView를 사용합니다.
Fragment는 Navigation과 얽혀있어서, Fragment를 전부 Compose로 변경하지 않는 이상 계속 유지해야 합니다. 최종적으로는 모두 Compose로 변경하고 Fragment가 사라지겠네요.
TranslateFragment.kt
이 부분을 지워주고 Compose를 넣어줍니다.
짜잔, Compose가 사용되었습니다. 한 번 실행해 볼까요?
글자 크기 등은 손봐야 하지만, 기본적으로는 만족스럽네요.
다음 이야기에서는 Themes를 Compose로 변경하는 것을 다룹니다.
끝.
카테고리: Android
댓글
댓글 쓰기
궁금한 점은 댓글 달아주세요.
Comment if you have any questions.