[Android] Compose 도입 ( 마이그레이션 )

 

Kotlin DSL로 작성되었습니다.

 

 

build.gradle ( app level )

android{
	....
    buildFeatures {
        compose = true
    }
    
    composeOptions {
        kotlinCompilerExtensionVersion = "1.4.3"
    }
    
}

 

컴포즈 버전을 선택하실땐 공식문서를 확인하셔서 사용중인 코틀린 버전과 호환되는 버전을 선택하시고 너무 오래된 버전을 사용중이시라면 이번 기회에 올리는 것을 추천드립니다.

 

Dependencies 

    const val composeVersion = "1.4.3"
    const val composeUi = "androidx.compose.ui:ui"
    const val composeGraphics = "androidx.compose.ui:ui-graphics"
    const val composePreview = "androidx.compose.ui:ui-tooling-preview"
    const val composeMaterial = "androidx.compose.material3:material3"
    const val composeLiveData = "androidx.compose.runtime:runtime-livedata"
    const val composeActivity = "androidx.activity:activity-compose:$composeVersion"

    const val composePlatformVersion = "2023.06.01"
    const val composePlatform = "androidx.compose:compose-bom:$composePlatformVersion"

컴포즈의 버전은 빠르게 변경되기 때문에 bom 사용을 추천드립니다. bom 버전도 컴포즈 버전과 호환되는 버전을 선택하셔야 합니다. 
공식문서를 확인해주세요.

 

material3 (m3)은 새로운 테마등을 담고 있어 구글에선 materal (m2) 를 사용하시는 분들은 m3로 이전을 권고하고 있습니다.

m3에 관련된 자세한 사항은 공식문서를 참고해주세요.

 

 

컴포즈를 도입하면서 변경된 버전에 맞게 일부 코드를 수정하다보니 생각보다 일이 많아 고생했습니다. 시간이 여유로우실때 하시는걸 추천드립니다.

 

기존 뷰 마이그레이션

xml로 이루어져 있는 뷰를 통째로 바꾸기엔 어렵고 시간이 많이 소요되어 시작조차 못할 수 있으니 
가능한 작은 단위부터 바꾸거나 꼭 통째로 바꾸고 싶으시다면 비교적 간단한 화면부터 하시길 추천드립니다.

    <androidx.compose.ui.platform.ComposeView
        android:id="@+id/compose_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

 

마이그레이션할 xml에 컴포즈뷰를 추가하고 

            
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        composeView.setContent {
        	// 컴포즈 뷰 추가 
        }
   }

 

마이그레이션할 뷰들을 작성해주시면 됩니다.

 

저도 컴포즈를 도입해 적용하면서 익숙해지려고 노력하는중에 있어 다소 부적합한 내용이 있을수 있으니 참고용으로만 봐주시고

틀린 부분은 말씀해주시면 수정하겠습니다.

 

다음은 기존 xml에 대체되는 컴포즈 컴포넌트들을 기록하겠습니다. 

 

감사합니다.