更新用户界面

This is the third part of the Getting started with Kotlin Multiplatform for mobile tutorial. Before proceeding, make sure you’ve completed previous steps.

First step Set up an environment
Second step Create your first cross-platform app
Third step Update the user interface
Fourth step Add dependencies
Fifth step Share more logic
Sixth step Wrap up your project

To build the user interface, you’ll use the Jetpack Compose toolkit for the Android part of your project and SwiftUI for the iOS one. These are both declarative UI frameworks, and you’ll see similarities in the UI implementations. In both cases, you store the data in the phrases variable and later iterate over it to produce a list of Text items.

Update the Android module

The androidApp module contains an Android application, defines its main activity and the UI views, and uses the shared module as a regular Android library. The UI of the application uses the Jetpack Compose framework.

Make some changes and see how it is reflected in the UI:

  1. Navigate to the MainActivity.kt file in androidApp.
  2. Find the Greeting class invocation. Select the greet() function and use the Cmd + B shortcut. You’ll see that it’s the same class from the shared module you edited in the previous step.

  3. In Greeting.kt, update the greet() function:

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

    Now it returns a list of strings.

  4. Go back to MainActivity.kt. As you can see, it doesn’t compile anymore because the GreetingView composable expects a String argument. Update its definition:

    1. @Composable
    2. fun GreetingView(phrases: List<String>) {
    3.     LazyColumn(
    4.         contentPadding = PaddingValues(20.dp),
    5.         verticalArrangement = Arrangement.spacedBy(8.dp),
    6.     ) {
    7.         items(phrases) { phrase ->
    8.             Text(phrase)
    9.             Divider()
    10.         }
    11.     }
    12. }

    Here the LazyColumn composable shows the list of Text items, adds padding around the content and a space between the list items.

  5. Follow Android Studio’s suggestions to import the missing dependencies.

  6. Update the preview as well, passing a list as an argument:

    1. @Preview
    2. @Composable
    3. fun DefaultPreview() {
    4.     MyApplicationTheme {
    5.         Greeting(listOf("Hello, Android!"))
    6.     }
    7. }

  7. Now you can run the Android app to ensure it displays the list:

    Updated UI of Android multiplatform app

Work with the iOS module in Xcode

iosApp is an Xcode project that builds into an iOS application. It depends on and uses the shared module as an iOS framework. The UI of the app is written in Swift.

Implement the same changes as in the Android app:

  1. Launch Xcode. Select Open a project or file.
  2. Navigate to your project, for example KotlinMultiplatformSandbox, and select the iosApp folder. Click Open.

  3. In the ContenView.swift file, select the greet() function and use the ⌃ + Cmd shortcut.

    You’ll see the Objective-C declarations for the Kotlin functions defined in the shared module. Kotlin types are represented as Objective-C types when used from Objective-C/Swift. Here the greet() function returns List<String> in Kotlin and is seen from Swift as returning NSArray<NSString>. For more on type mappings, see Interoperability with Swift/Objective-C.

  4. If you try running the project, the build will fail. As in the Android app earlier, the Swift code that uses the greet() function doesn’t compile because its declaration is different now. Change the SwiftUI code to display a list of items:

    1. struct ContentView: View {
    2.     let phrases = Greeting().greet()
    4.     var body: some View {
    5.         List(phrases, id: \.self) {
    6.             Text($0)
    7.         }
    8.     }
    9. }
    • The results of the greet() call are stored in the phrases variable (let in Swift is similar to Kotlin’s val).
    • The List function produces a list of Text items.

  5. Run the app to see the changes:

    Updated UI of your iOS multiplatform app

Next step

In the next part of the tutorial, you’ll learn about dependencies and add a third-party library to expand the functionality of your project.

Proceed to the next part

Get help