기존 Android 프로젝트에 Compose 화면 빌드하기

현재 관리 중인 앱이 Fragment를 중심으로 구성되어 있는데, 이번에 새 기능 업데이트를 통해 추가되는 페이지를 Compose로 구현하기로 결정했습니다.

 

회사 프로젝트는 이미 Compose 환경이 구축되어 있어 바로 컴포저블을 사용할 수 있었지만, 개인적으로 운영 중인 앱은 아직 Fragment 기반으로 되어 있어 Compose 사용을 위한 최초 마이그레이션 작업이 의미가 있었기에 이를 공유하려고 합니다.

 

Compose 사용 환경 구축하기

먼저 앱 build.gradle 파일에 Compose 사용을 위한 의존성을 추가해야 합니다.

    buildFeatures {
        compose true
    }
    
    ...
    
    dependencies {

    //compose
    implementation 'androidx.compose.material:material'
    implementation 'androidx.compose.ui:ui-tooling-preview'

    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1'
    debugImplementation 'androidx.compose.ui:ui-tooling:1.6.8'
    
    ...
    }

 

위의 두 줄은 필수 의존성이고, 아래 두 줄은 선택 사항입니다. 특히 debugImplementation 부분은 Compose Preview를 위해 꼭 필요합니다. 다른 선택적 의존성에 대해 알고 싶다면 공식 문서 를 참고해주세요.

 

이제 Compose를 사용할 준비가 끝났습니다.

 

Compose로 기존 앱에 새 화면 빌드하기

기존 앱에 새 화면을 Compose로 빌드할 때 약간의 앱 아키텍처 제약이 있습니다. Fragment와 탐색 구성 요소를 사용 중인 경우, 새 Fragment를 만들어 그 콘텐츠를 Compose로 구성해야 하기 때문입니다.

 

포스팅 이전에 자료 수집을 위해 다른 블로그의 글들을 참고했는데, Compose 사용을 위해 Compose 전용 Activity를 만드는 사례를 많이 봤습니다. 하지만 최근에는 최소한의 Activity에 다수의 Fragment 또는 Screen을 사용하는 방식을 구글에서도 선호하고 있습니다. 따라서 저는 공식 문서의 방식을 채택하되, Fragment에서 Compose Screen으로 바로 넘어가도록 했습니다.

 

Compose Screen을 호출하기 위한 Fragment 생성 및 네비게이션 추가

Compose Screen을 호출하기 위한 Fragment를 하나 생성하고 네비게이션에 추가합니다. 이때, View는 Compose를 사용할 것이므로 더 이상 XML은 필요 없습니다.

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
...
    <fragment
        android:id="@+id/configFragment"
        android:name="your.package.ConfigFragment"
        android:label="fragment_config" />
</navigation>

 

그리고 기존의 XML을 사용하고 있는 View에서 버튼 클릭과 같은 이벤트가 발생하면 Compose Screen으로 이동하기 위한 중간 다리 역할을 하는 Fragment로 이동시켜줍니다.

 

 

class PickerFragment : Fragment() {
...
    binding.helpBtn.setOnClickListener {
        it.findNavController().navigate(R.id.configFragment)
    }
}

 

프래그먼트에서 Compose 사용하기

프래그먼트의 onCreateView() 수명 주기 메서드에서 ComposeView를 반환하고, 구성 가능한 함수를 제공하는 setContent() 메서드를 호출합니다.

 

class ConfigFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?,
    ): View? {
        return ComposeView(requireContext()).apply {
            setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
            setContent {
                ConfigScreen()
            }
        }
    }
}

 

이렇게 새로운 Fragment로 넘어가면 이제부터 Compose 빌드를 사용하기 위한 스크린 연동이 작업이 완료되었습니다.