「Android Studio Giraffe」の作成するプロジェクトは、Jetpack Composeの利用が推奨されます。
今後、Viewシステムに代わり、Jetpack Composeが主流になるようです。
※環境：Android Studio Giraffe | 2022.3.1 Patch 1
Kotlin 1.8.10
Compose Compiler 1.4.3
目次
プロジェクトの作成
「Android Studio Giraffe」は、プロジェクトの新規作成（File ⇒ New ⇒ New Project…）を行うと、Jetpack ComposeとViewシステムのテンプレートが選択できます。
ただし、選択パネルは、Jetpack Composeのテンプレートがハイライトされて立ち上がります。ですので、Jetpack Composeの利用が優先されているようです。
以下は、テンプレート「Empty Activity」を指定して作成したプロジェクトです。
（↑↑クリックで拡大↑↑）
（↑↑クリックで拡大↑↑）
テンプレートはJetpack Composeの必要最低限の構文が詰め込まれたサンプルアプリです。これだけで、ビルドが通り、実行が可能です。
Jetpack Composeとは
Jetpack ComposeはAndroidシステムの新たなUIフレームワークです。従来のViewシステムと、アプリ画面の描画の仕組みが異なります。
詳細は次の2つの記事を参照してください。
「Jetpack Compose：Composeによるアプリ画面の描画」
「Jetpack Compose：再Composeとスキップ」
開発環境（またはプロジェクト）から見たJetpack Composeの違いは、アプリ画面の構成をKotlinでプログラミングすることです。
画面の構成を記述したKotlinのソースコードはCompose Compilerにより描画処理を行うバイトコードへ変換されます。
Compose CompilerはKotlin Compilerを拡張したJetpack Compose向けの特別なコンパイラーです。
ファイル構成
図はJetpack Composeプロジェクトのファイル構成です。
レイアウトリソース（res/layout）は存在しません。画面の構成はKotlinのソースファイル（XXX.kt）へ記述されます。
MainActivityファイル
MainActivityファイルの記述は3つの部分に分けられます。
- （1）画面の構成（Composable 関数のUIツリー）
- （2）Activity（ライフサイクル）
- （3）画面のプレビュー
画面の構成（Composable 関数のUIツリー）
@Composableアノテーションが付いた関数がComposable関数です。一つのUI要素を表現しています。
そして、Composable関数から子Composable関数を呼び出すことで、階層（UIツリー）を作り、アプリ画面を構成します。
例えば、プロジェクト作成時のサンプルアプリは、5階層のUIツリーになっています。
※図はAndroid StudioのLayout Inspectorの表示です。
Activity（ライフサイクル）
ライフサイクルに従って、Activityの動作を記述する部分です。
MainActivityはComponentActivityを継承しています。
そのComponentActivityの拡張関数setConponentが、UIツリーをViewツリーへ組み込む作業を行っています。
public fun ComponentActivity.setContent(
parent: CompositionContext? = null,
content: @Composable () -> Unit
) {
val existingComposeView = window.decorView
.findViewById<ViewGroup>(android.R.id.content)
.getChildAt(0) as? ComposeView
if (existingComposeView != null) with(existingComposeView) {
setParentCompositionContext(parent)
setContent(content)
} else ComposeView(this).apply {
// Set content and parent **before** setContentView
// to have ComposeView create the composition on attach
setParentCompositionContext(parent)
setContent(content)
// Set the view tree owners before setting the content view so that the inflation process
// and attach listeners will see them already present
setOwners()
setContentView(this, DefaultActivityContentLayoutParams)
}
}
UIツリーとViewツリーの間に、仲介役のComposeViewが入ります。
画面のプレビュー
@Previewアノテーションの付いたComposable関数はプレビュー対象になります。
プレビュー対象の関数は引数を持ていないので注意してください。
@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
MyApplicationTheme {
Greeting("Android")
}
}
プレビュー対象の関数は、Android Studioによりデザインの状態が表示されます。ただし、表示にはビルドが必要です。
また、複数のプレビューを同時に行うことができます。
あまり多くのプレビューを行うと、ビルドに時間がかかり、Android Studioの軽快な操作感が損なわれます。多用はお勧めしません。
ビルド環境の設定（build.gradle）
Compose Compilerとツールキットの指定が確認できます。
...
android {
namespace = "com.example.res.project"
compileSdk = 34
...
kotlinOptions {
jvmTarget = "1.8"
}
buildFeatures {
compose = true // Composerの処理を有効化
}
composeOptions {
kotlinCompilerExtensionVersion = "1.4.3" // 使用するCompose Compiler
}
packaging {
resources {
excludes += "/META-INF/{AL2.0,LGPL2.1}"
}
}
}
dependencies {
implementation("androidx.core:core-ktx:1.9.0")
implementation("androidx.lifecycle:lifecycle-runtime-ktx:2.6.2")
implementation("androidx.activity:activity-compose:1.8.0")
implementation(platform("androidx.compose:compose-bom:2023.03.00"))
implementation("androidx.compose.ui:ui")
implementation("androidx.compose.ui:ui-graphics")
implementation("androidx.compose.ui:ui-tooling-preview")
implementation("androidx.compose.material3:material3")
testImplementation("junit:junit:4.13.2")
androidTestImplementation("androidx.test.ext:junit:1.1.5")
androidTestImplementation("androidx.test.espresso:espresso-core:3.5.1")
androidTestImplementation(platform("androidx.compose:compose-bom:2023.03.00"))
androidTestImplementation("androidx.compose.ui:ui-test-junit4")
debugImplementation("androidx.compose.ui:ui-tooling")
debugImplementation("androidx.compose.ui:ui-test-manifest")
}
なお、Compose CompilerはKotlin Compilerと互換性のあるバージョンを選ぶ必要があります。詳細は「ComposeとKotlinコンパイラーの互換性とビルドエラー」を参照。
関連記事：