[Android] Android Compose Multiplatform

kotlin과 compose를 사용해서 로직 및 UI를 공유해서 android와 ios 모두 개발할 수 있는 방법이 있다고 해서 한번 알아보려고 합니다.

1.  프로젝트 생성

KMM 프로젝트 생성

Kotlin Multiplatform Wizard | JetBrains

위의 링크로 들어가시면 프로젝트를 생성할 수 있습니다.

IOS 부분에서 Shared UI 체크박스를 체크해야합니다.

2. 프로젝트 구성

프로젝트 구성은 위와 같습니다.

composeApp 하위폴더에 androidMain, commonMain, iosMain이 존재하는데

공통 비지니스 로직은 commonMain에 각 os별로 다른 부분은 androidMain, iosMain에서 구현하도록 해둔것 같습니다.

 

commonMain을 확인해보겠습니다.

@OptIn(ExperimentalResourceApi::class)
@Composable
@Preview
fun App() {
    MaterialTheme {
        var showContent by remember { mutableStateOf(false) }
        Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
            Button(onClick = { showContent = !showContent }) {
                Text("Click me!")
            }
            AnimatedVisibility(showContent) {
                val greeting = remember { Greeting().greet() }
                Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
                    Image(painterResource(Res.drawable.compose_multiplatform), null)
                    Text("Compose: $greeting")
                    Text("My First Multiplatform App!", color = Color.Black,)
                }
            }
        }
    }
}

위의 App() 함수를 android,ios에서 실행시키게 됩니다.

//android
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            Column {
                App()
            }
        }
    }
}

//iosMain > kotlin > MainViewController.kt
fun MainViewController() = ComposeUIViewController {
    Column {
        App()
    }
}

 

위처럼 각 환경에서 실행되는 것을 확인할 수 있습니다. 맨 밑줄의 Text 컴포저블은 제가 commonMain의 App()에 제가 추가한 것입니다.

이제 androidMain,iosMain에서도 추가 해보겠습니다.

 

//android
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            Column {
                App()
                Text("This is Android", modifier = Modifier.fillMaxWidth().align(Alignment.CenterHorizontally).padding(top = 10.dp), textAlign = TextAlign.Center)
            }
        }
    }
}

//ios
fun MainViewController() = ComposeUIViewController {
    Column {
        App()
        Text("This is IOS", modifier = Modifier.fillMaxWidth().align(Alignment.CenterHorizontally).padding(top = 10.dp), textAlign = TextAlign.Center)

    }
}

 

 

이처럼 commonMain,androidMain,iosMain에서 각각 UI를 수정할 수 있습니다.

 

3. 생각

그저 기본 프로젝트를 실행시켜보고 text 컴포저블 하나 추가했을 뿐이고, gradle 구조도 좀 달라서 더 알아보고 확인해봐야겠지만

익숙한 안드로이드 스튜디오와 compose를 사용해서 android,ios,web을 만들 수 있는건 저처럼 안드로이드 개발자를 준비중이거나

안드로이드 개발자로 근무하고 계신 분들에겐 좋은 소식인것 같습니다. 계속 발전해서 크로스플랫폼에 대한 부담이 줄어들길 바랍니다.

 

여유가 조금 생기면 간단한 네트워크 통신으로 뷰를 그리는 예제를 해보겠습니다.