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

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

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

Kotlin Multiplatform アプリを作成する

このチュートリアルでは IntelliJ IDEA を使用しますが、Android Studio でも同様に進めることができます。両方の IDE は同じコア機能と Kotlin Multiplatform サポートを共有しています。これは「共有ロジックとネイティブ UI を備えた Kotlin Multiplatform アプリの作成」チュートリアルの第 1 部です。Kotlin Multiplatform アプリの作成 ユーザーインターフェースの更新 依存関係の追加 共有ロジックの追加 プロジェクトの仕上げ

ユーザーインターフェースを更新する
依存関係を追加する

共有ロジックをさらに追加する
プロジェクトを仕上げる

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

Android 部分を更新する

androidApp モジュールには Android アプリケーションが含まれており、そのメインアクティビティを定義します。UI コードの大部分は sharedUI モジュールに含まれており、Android アプリはこれを Android ライブラリとして使用します。UI は Compose Multiplatform フレームワークを使用して実装されています。

変更を加えて、UI にどのように反映されるかを確認してみましょう。

1. sharedUI/src/commonMain/.../greetingkmp ディレクトリにある App.kt ファイルに移動します。

2. Greeting().greet() 関数呼び出しを見つけます。greet() を右クリックして Go To | Declaration or Usages を選択します。 IDE が sharedLogic/src/commonMain/.../Greeting.kt ファイルを開きます。

3. Greeting.kt ファイルで、greet() 関数が文字列のリストを返すように Greeting クラスを更新します。

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

4. IDE の提案に従って kotlin.random.Random パッケージをインポートします。

5. sharedUI/src/commonMain/.../App.kt ファイルに戻り、文字列のリストを表示するように App() の実装を更新します。

   @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 アイテムを表示し、それらの周囲にパディングを追加し、アイテム間にスペースを追加しています。

6. IDE の提案に従って、不足している依存関係をインポートします。

7. これで Android アプリを実行して、文字列のリストがどのように表示されるかを確認できます。

   

iOS 部分を更新する

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

共通コードの更新を反映するために、Android アプリと同じ変更を実装します。

1. IntelliJ IDEA の Project ツールウィンドウで、プロジェクトのルートにある iosApp/iosApp フォルダを見つけます。

2. iosApp/ContentView.swift ファイルを開き、Greeting().greet() 呼び出しを右クリックして Go To | Declaration or Usages を選択します。 IDEA が Swift の呼び出しを Kotlin の宣言と正しく照合していることがわかります。

3. ContentView.swift ファイルに戻ります。 Android アプリと同じ方法で文字列のリストを表示するには、ContentView 構造体のコードを以下に置き換えます。

   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 アイテムのリストを生成します。

4. iOS の実行構成（Run Configuration）を開始して、変更を確認します。

   

発生する可能性のある問題と解決策

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

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

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

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

次のステップ

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

次のパートへ進む

ヘルプを得る

• Kotlin Slack: 招待を受けて、#multiplatform チャンネルに参加してください。
• Kotlin イシュートラッカー: 新しい問題を報告してください。