コンポーザブルコードの探索

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

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

Compose Multiplatformアプリを作成する

This tutorial uses IntelliJ IDEA, but you can also follow it in Android Studio – both IDEs share the same core functionality and Kotlin Multiplatform support. This is the first part of the Create a Compose Multiplatform app with shared logic and UI tutorial. Create your Compose Multiplatform app Explore composable code Modify the project Create your own application

コンポーザブルコードの探索
プロジェクトを変更する

独自のアプリケーションを作成する

Kotlin Multiplatformウィザードによって作成されたサンプルコンポーザブルを詳しく見てみましょう。まず、共通UIを実装し、すべてのプラットフォームで使用できるコンポーザブルなApp()関数があります。次に、各プラットフォームでこのUIを起動するプラットフォーム固有のコードがあります。

コンポーザブル関数の実装

composeApp/src/commonMain/kotlin/App.ktファイルで、App()関数を見てみましょう。

@Composable
@Preview
fun App() {
  MaterialTheme {
    var showContent by remember { mutableStateOf(false) }
    Column(
      modifier = Modifier
        .safeContentPadding()
        .fillMaxSize(),
      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")
        }
      }
    }
  }
}

App()関数は、@Composableでアノテーションされた通常のKotlin関数です。これらの種類の関数は、_コンポーザブル関数_または単に_コンポーザブル_と呼ばれます。それらはCompose Multiplatformに基づいたUIの構成要素です。

コンポーザブル関数には、次の一般的な構造があります。

• MaterialThemeはアプリケーションの外観を設定します。デフォルト設定はカスタマイズできます。たとえば、色、形状、タイポグラフィを選択できます。
• Columnコンポーザブルはアプリケーションのレイアウトを制御します。ここでは、AnimatedVisibilityコンポーザブルの上にButtonを表示します。
• ButtonはTextコンポーザブルを含み、いくつかのテキストをレンダリングします。
• AnimatedVisibilityはアニメーションを使用してImageを表示および非表示にします。
• painterResourceはXMLリソースに格納されているベクターアイコンをロードします。

ColumnのhorizontalAlignmentパラメーターは、そのコンテンツを中央に配置します。しかし、これが効果を発揮するには、カラムがそのコンテナの全幅を占める必要があります。これはmodifierパラメーターを使用して実現されます。

モディファイアはCompose Multiplatformの主要なコンポーネントです。これは、UI内のコンポーザブルの表示や動作を調整するために使用する主要なメカニズムです。モディファイアはModifier型のメソッドを使用して作成されます。これらのメソッドをチェーンすると、各呼び出しは前の呼び出しから返されたModifierを変更できるため、順序が重要になります。 詳細については、JetPack Composeドキュメントを参照してください。

状態の管理

サンプルコンポーザブルの最後の側面は、状態の管理方法です。AppコンポーザブルのshowContentプロパティは、mutableStateOf()関数を使用して構築されます。これは、監視可能な状態オブジェクトであることを意味します。

var showContent by remember { mutableStateOf(false) }

状態オブジェクトはremember()関数への呼び出しでラップされており、これは一度構築され、その後フレームワークによって保持されることを意味します。これを実行することで、値がブール値を含む状態オブジェクトであるプロパティを作成します。フレームワークはこの状態オブジェクトをキャッシュし、コンポーザブルがそれを監視できるようにします。

状態の値が変更されると、それを監視するすべてのコンポーザブルが再呼び出しされます。これにより、それらが生成するウィジェットが再描画されることになります。これは_リコンポジション_と呼ばれます。

アプリケーションでは、状態が変更される唯一の場所はボタンのクリックイベント内です。onClickイベントハンドラはshowContentプロパティの値を反転させます。結果として、親のAnimatedVisibilityコンポーザブルがshowContentを監視しているため、画像がGreeting().greet()の呼び出しとともに表示または非表示になります。

異なるプラットフォームでのUIの起動

App()関数の実行はプラットフォームごとに異なります。Androidではアクティビティによって管理され、iOSではビューコントローラによって、デスクトップではウィンドウによって、ウェブではコンテナによって管理されます。それぞれを調べてみましょう。

Androidの場合

Androidの場合、composeApp/src/androidMain/kotlinにあるMainActivity.ktファイルを開きます。

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

        setContent {
            App()
        }
    }
}

これはAppコンポーザブルを呼び出すAndroidアクティビティであるMainActivityです。

iOSの場合

iOSの場合、composeApp/src/iosMain/kotlinにあるMainViewController.ktファイルを開きます。

fun MainViewController() = ComposeUIViewController { App() }

これは、Androidのアクティビティと同じ役割を果たすビューコントローラです。iOSとAndroidの両方のタイプが単にAppコンポーザブルを呼び出していることに注目してください。

デスクトップの場合

デスクトップの場合、composeApp/src/desktopMain/kotlinにあるmain()関数を見てください。

fun main() = application {
    Window(onCloseRequest = ::exitApplication, title = "ComposeDemo") {
        App()
    }
}

• ここで、application()関数は新しいデスクトップアプリケーションを起動します。
• この関数はラムダを受け取り、そこでUIを初期化します。通常、Windowを作成し、ウィンドウが閉じられたときにプログラムがどのように反応すべきかを指示するプロパティと命令を指定します。このケースでは、アプリケーション全体がシャットダウンします。
• このウィンドウ内にコンテンツを配置できます。AndroidやiOSと同様に、唯一のコンテンツはApp()関数です。

現在、App関数はパラメーターを宣言していません。大規模なアプリケーションでは、通常、プラットフォーム固有の依存関係にパラメーターを渡します。これらの依存関係は手動で作成することも、依存性注入ライブラリを使用することもできます。

ウェブの場合

composeApp/src/wasmJsMain/kotlin/main.ktファイルで、main()関数を見てみましょう。

@OptIn(ExperimentalComposeUiApi::class)
fun main() {
    ComposeViewport(document.body!!) { App() }
}

• @OptIn(ExperimentalComposeUiApi::class)アノテーションは、実験的としてマークされており、将来のリリースで変更される可能性があるAPIを使用していることをコンパイラに伝えます。
• ComposeViewport()関数は、アプリケーションのCompose環境を設定します。
• Webアプリは、ComposeViewport関数のパラメーターとして指定されたコンテナに挿入されます。この例では、ドキュメントのボディ全体がコンテナとして機能します。
• App()関数は、Jetpack Composeを使用してアプリケーションのUIコンポーネントを構築する役割を担います。

次のステップ

チュートリアルの次のパートでは、プロジェクトに依存関係を追加し、ユーザーインターフェースを変更します。

次のパートに進む

ヘルプ

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