android-compose

android-compose

目的

このスキルを使うと、Jetpack Compose を使用した Android UI コードの生成と操作ができ、効率的でリアクティブなインターフェースを実現する宣言型構文に重点を置いています。Android アプリの UI コンポーネント、状態管理、ナビゲーションに対応する際に使用します。

使用するタイミング

動的なリスト、テーマに応じたデザイン、画面ナビゲーションなど、最新の UI パターンが必要な Android アプリの構築やリファクタリングにこのスキルを適用します。Material 3 を使用する新規プロジェクトや、パフォーマンスとコードのシンプルさを向上させるために XML レイアウトから Compose に移行する場合にも使用します。

主な機能

• @Composable アノテーションを使用して、再利用可能な UI 要素を定義します。
• 状態ホイスティングによって状態を管理し、再コンポジション時のバグを防ぎます。
• 大規模なデータセットには LazyColumn を使用して、効率的なリストを描画します。
• Button や Scaffold などの Material 3 コンポーネントを実装し、一貫したテーマを適用します。
• CompositionLocal を使ってグローバルコンテキストにアクセスし、コンポーザブル間でデータを共有します。
• 複数画面のアプリでは navigation-compose を使用してナビゲーションを処理します。

使用パターン

UI を構築するには、Activity または Fragment にトップレベルの @Composable 関数を作成します。適切な再コンポジションを可能にするため、必ず状態を親コンポーザブルにホイスティングしてください。リストでは、項目を LazyColumn で囲み、コンテンツを遅延読み込みします。スタイル設定には MaterialTheme を使用し、値の注入には CompositionLocalProvider を使用します。ナビゲーションを行う場合は、composable のデスティネーションを指定して NavHost を設定します。

主なコマンド／API

• @Composable アノテーションを使用する：androidx.compose.runtime.Composable をインポートし、@Composable fun MyScreen() { Text("Hello") } のように関数にアノテーションを付けます
• 状態を管理する：remember と mutableStateOf を使用します。例：val count by remember { mutableStateOf(0) }
• 遅延リスト：androidx.compose.foundation.lazy.LazyColumn をインポートし、LazyColumn { items(list) { ItemRow(it) } } のように使用します
• Material 3：androidx.compose.material3.MaterialTheme をインポートし、MaterialTheme { Surface { MyContent() } } で UI を囲みます
• CompositionLocal：compositionLocalOf で定義します。例：val LocalUser = compositionLocalOf { null }。LocalUser.current でアクセスします
• ナビゲーション：build.gradle に依存関係を追加します：implementation "androidx.navigation:navigation-compose:2.5.3"。NavHost(navController) { composable("route") { Screen() } } で設定します

統合に関する注意

build.gradle に Compose BOM を追加して、Compose を Android プロジェクトに統合します：dependencies { implementation platform('androidx.compose:compose-bom:2023.10.01') implementation 'androidx.compose.ui:ui' implementation 'androidx.compose.material3:material3' }。モジュールの build.gradle で composeOptions { kotlinCompilerExtensionVersion '1.4.7' } を設定して、Compose を有効にします。ナビゲーションでは、hilt または手動の依存関係注入を使って ViewModel と組み合わせます。必要に応じて SDK パスに $ANDROID_HOME 環境変数を使用し、スクリプトでカスタムバージョンを設定するには $COMPOSE_VERSION を設定します。

エラー処理

状態をホイスティングして、再コンポジションエラーに対処します。たとえば、古い状態が原因でコンポーザブルがクラッシュする場合は、状態をパラメーターとして渡す関数で囲みます。よくある問題：コンポジション中の無効な変更には、コールバックに rememberUpdatedState を使用します。IndexOutOfBounds などの LazyColumn エラーを防ぐには、描画前にデータが読み込まれていることを確認します。Log.e("ComposeError", "Message") でエラーをログに記録し、UI 以外のコードでは try-catch を使用します。ナビゲーションが失敗する場合は、navController の設定とルートを確認し、Android Studio の Compose プレビューでデバッグします。

具体的な使用例

1. 状態を持つシンプルなコンポーザブル：次のように記述して、カウンター UI を作成します：@Composable fun Counter() { var count by remember { mutableStateOf(0) } Button(onClick = { count++ }) { Text("$count") } }。次に、Activity から呼び出します：setContent { Counter() }
2. LazyColumn を使ったナビゲーション：リストを含む画面を設定します：@Composable fun HomeScreen(navController: NavController) { LazyColumn { items(10) { Text("Item $it"); if (it == 5) Button(onClick = { navController.navigate("detail") }) { Text("Go") } } } }。アプリでは次のようにします：NavHost { composable("home") { HomeScreen(navController) } }

グラフの関連性

• 関連するクラスター：モバイル
• タグによる関連性：compose（他の UI スキルへのリンクなど）、android（Android コアスキルとの統合など）、ui（Web UI スキルとのパターンの共有など）、material（デザインシステムスキルとの整合など）
• 依存関係：navigation-compose（ルーティング用）、material3（テーマ設定用）