ユーザーインターフェースを更新する

このチュートリアルではIntelliJ IDEAを使用しますが、Android Studioでも同様に進めることができます。どちらのIDEもコア機能とKotlin Multiplatformのサポートを共有しています。

これは「共有ロジックとネイティブUIを持つKotlin Multiplatformアプリを作成する」チュートリアルの第2部です。次に進む前に、前の手順を完了していることを確認してください。

ユーザーインターフェースを更新する

依存関係を追加する

ロジックをさらに共有する

プロジェクトをまとめる

ユーザーインターフェースを構築するには、プロジェクトのAndroid部分にはCompose Multiplatformツールキットを、iOS部分にはSwiftUIを使用します。これらはどちらも宣言型UIフレームワークであり、UIの実装に類似点が見られます。どちらの場合も、データをphrases変数に格納し、後でそれを反復処理してTextアイテムのリストを生成します。

Android部分を更新する

composeAppモジュールにはAndroidアプリケーションが含まれており、そのメインアクティビティとUIビューを定義し、sharedモジュールを通常のAndroidライブラリとして使用します。アプリケーションのUIはCompose Multiplatformフレームワークを使用しています。

いくつかの変更を加えて、それらがUIにどのように反映されるかを確認してください。

composeApp/src/androidMain/kotlinにあるApp.ktファイルに移動します。
Greetingクラスの呼び出しを見つけます。greet()関数を選択して右クリックし、Go To | Declaration or Usagesを選択します。これは、前の手順で編集したsharedモジュールと同じクラスであることがわかります。

Greeting.ktファイルで、greet()関数を更新します。

kotlin

import kotlin.random.Random

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

これで文字列のリストを返します。

App.ktファイルに戻り、App()の実装を更新します。

kotlin

@Composable
@Preview
fun App() {
    MaterialTheme {
        val greeting = remember { Greeting().greet() }

        Column(
            modifier = Modifier
                .padding(all = 10.dp)
                .safeContentPadding()
                .fillMaxSize(),
            verticalArrangement = Arrangement.spacedBy(8.dp),
        ) {
            greeting.forEach { greeting ->
                Text(greeting)
                HorizontalDivider()
            }
        }
    }
}

ここでは、ColumnコンポーザブルがTextアイテムのそれぞれを表示し、それらの周りにパディングを、それらの間にスペースを追加します。

IntelliJ IDEAの提案に従って、不足している依存関係をインポートします。
これでAndroidアプリを実行して、文字列のリストがどのように表示されるかを確認できます。

iOSモジュールを操作する

iosAppディレクトリはiOSアプリケーションとしてビルドされます。これはsharedモジュールに依存し、それをiOSフレームワークとして使用します。アプリのUIはSwiftで記述されています。

Androidアプリと同様の変更を実装します。

IntelliJ IDEAで、ProjectツールウィンドウでプロジェクトのルートにあるiosAppフォルダーを見つけます。
ContentView.swiftファイルを開き、Greeting().greet()呼び出しを右クリックし、Go To | Definitionを選択します。
sharedモジュールで定義されたKotlin関数のObjective-C宣言が表示されます。Kotlinの型は、Objective-C/Swiftから使用されるときにObjective-Cの型として表現されます。ここでは、greet()関数はKotlinではList<String>を返し、SwiftからはNSArray<NSString>を返すものとして見なされます。型マッピングの詳細については、Swift/Objective-Cとの相互運用を参照してください。
Androidアプリと同様の方法でアイテムのリストを表示するようにSwiftUIコードを更新します。
Swift
```
struct ContentView: View {
   let phrases = Greeting().greet()

   var body: some View {
       List(phrases, id: \.self) {
           Text($0)
       }
    }
}
```
- greet()呼び出しの結果はphrases変数に格納されます（SwiftのletはKotlinのvalに似ています）。
- List関数はTextアイテムのリストを生成します。
変更を確認するためにiOS実行構成を開始します。

発生しうる問題と解決策

共有フレームワークを呼び出すコードでXcodeがエラーを報告する場合

Xcodeを使用している場合、Xcodeプロジェクトがまだ古いバージョンのフレームワークを使用している可能性があります。これを解決するには、IntelliJ IDEAに戻りプロジェクトを再ビルドするか、iOS実行構成を開始してください。

共有フレームワークをインポートする際にXcodeがエラーを報告する場合

Xcodeを使用している場合、キャッシュされたバイナリをクリアする必要があるかもしれません。メインメニューでProduct | Clean Build Folderを選択して環境をリセットしてみてください。

次のステップ

チュートリアルの次のパートでは、依存関係について学び、サードパーティライブラリを追加してプロジェクトの機能を拡張します。

次のパートに進む

ヘルプ

Kotlin Slack。招待状を取得して、#multiplatformチャンネルに参加してください。
Kotlinイシュートラッカー。新しいイシューを報告する。

ユーザーインターフェースを更新する ​

Android部分を更新する ​

iOSモジュールを操作する ​

発生しうる問題と解決策 ​

共有フレームワークを呼び出すコードでXcodeがエラーを報告する場合 ​

共有フレームワークをインポートする際にXcodeがエラーを報告する場合 ​

次のステップ ​

ヘルプ ​