Kotlin Multiplatform 플랫폼별 UI 다루기

이번에는 플랫폼별로 UI를 다뤄볼게요. 안드로이드는 Jetpack Compose를 사용하고 iOS는 SwfitUI를 사용해요. 두 가지 모두 선언형 UI 프레임워크여서 서로가 비슷하다는 것을 많이 느끼실거에요.

---

Android

우선 androidApp 모듈은 안드로이드 애플리케이션의 주체에요. 해당 모듈에서 MainActivity와 UI를 정의하고 shared 모듈에 접근하기도 하죠.

MainActivity로 이동해서 greet 메서드를 호출하는 곳을 선택하고 코드 내부로 들어가보세요. 그리고 아래처럼 문자열 리스트를 반환 하도록 greet 메서드를 수정해보세요.

fun greet(): List<String> = buildList {
    add(if (Random.nextBoolean()) "Hi!" else "Hello!")
    add("Guess what it is! > ${platform.name.reversed()}!")
}

그후 다시 MainActivity로 돌아오면 컴파일 에러가 나는 것을 볼 수 있을거에요. GreetingView 컴포저블은 파라미터로 String을 기대했으나 앞에서 저희가 greet 메서드를 수정해서 타입이 서로 맞지 않게 되었죠. 컴파일에 성공하도록 아래처럼 Compose 코드를 수정해주세요. LazyColumn 컴포저블을 사용해서 Text가 리스트 형태로 노출되도록 했어요.

@Composable
fun GreetingView(phrases: List<String>) {
    LazyColumn(
        contentPadding = PaddingValues(20.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp),
    ) {
        items(phrases) { phrase ->
            Text(phrase)
            Divider()
        }
    }
}

...

@Preview
@Composable
fun DefaultPreview() {
    MyApplicationTheme {
        GreetingView(listOf("Hello, Android!"))
    }
}

이제 안드로이드 앱을 실행하면 아래처럼 보일거에요.

 

---

iOS

iosApp 모듈은 Xcode 프로젝트이면서 iOS 애플리케이션의 주체에요. 해당 모듈도 이전 androidApp 모듈처럼 shared 모듈을 의존하죠.

 

하지만 iOS 앱의 UI는 Kotlin이 아닌 Swfit로 개발돼요. 그렇기 때문에 iOS 앱의 UI를 개발할 때는 Android Studio 보다 Xcode를 사용하는 것이 더욱 편리해요. XCode에서 Swift 언어와 iOS 플랫폼을 더 잘 지원해주기 때문이에요. 그럼 Xcode에서 KMP 프로젝트 내 iosApp 모듈을 열어보세요.

 

그후 ContentView로 이동하여 greet 메서드를 호출하는 곳을 선택하고 코드 내부로 들어가보세요. shared 모듈의 greet 메서드가 Objective-C로 선언된 것을 볼 수 있을거에요. 이처럼 기존 Kotlin 타입은 iOS에서 Objective-C 타입으로 매핑되어요.

(NSArray<NSString *> *)greet __attribute__((swift_name("greet()")));

다시 ContentView로 돌아와서 프로젝트를 빌드하면 이전 안드로이드처럼 실패할거에요. 빌드를 성공하기 위해 아래처럼 SwiftUI 코드를 수정해주세요. 안드로이드에서는 List UI를 표현하기 위해서 Compose의 LazyColumn을 사용했지만 iOS에서는 SwiftUI의 List를 사용할 수 있어요.

struct ContentView: View {
    let phrases = Greeting().greet()

    var body: some View {
        List(phrases, id: \.self) {
            Text($0)
        }
    }
}

이제 iOS 앱을 실행하면 아래처럼 보일거에요.

 

---

글 작성시 참고한 문서

• Update the user interface

샘플 코드

• Kotlin Multiplatform 플랫폼별 UI 다루기 샘플 코드