1. Jetpack Compose の初期理解
1. Jetpack Compose とは何ですか
Jetpack Compose は、宣言型プログラミング モデルに基づいて、ネイティブ Android UI を構築するための最新のツールキットです。そのため、UI がどのように見えるかを記述するだけで、残りは Compose が処理します。状態が変化すると、UI は自動的に更新されます。Compose は Kotlin 上に構築されているため、Java プログラミング言語と完全に相互運用可能であり、すべての Android および Jetpack API に直接アクセスできます。
2. 従来の UI の書き方との違いは何ですか
①従来の UI の記述方法: まず XML ファイルを作成し、そのファイルにレイアウトを記述し、次に Java ファイル (または Kotlin ファイル) に戻ってコントロールをインスタンス化し、それを呼び出します。
②Compose ライブラリ: Android UI の記述方法を再定義し、xml ファイルを使用せず、Kotlin ファイルにレイアウト コードを直接記述するフレームワークです (Kotlin のみサポート)。Compose の公式評価は「難しいことをシンプルにし、不可能を可能にする」です。
3. 従来の UI 記述方法と比較した Compose の利点は何ですか
① 宣言型 UI である
従来の UI の手法を「命令型 UI」と呼び、compose のことを「宣言型 UI」と呼びます。
Compose の利点は、完全な宣言型 UI であることです。必要なのはインターフェイスを宣言するだけです。データが変更された場合、手動で更新する必要はありません。Compose はデータを更新して最新のデータを表示し、インターフェイスを更新する手間を省きます。
Compose は、カスタム描画、カスタム レイアウト、カスタム タッチ、アニメーションなど、従来の UI で実行できることはすべて実行できます。
②xml の削除は
compose の 2 番目の利点であり、記述の単純さを維持しながら xml を放棄し、混合記述 (xml+Java、kotlin) によってもたらされる制限を完全に取り除き、Ui をより速く書くことができるようになります。
4. Jetpack Compose をサポートする新しいアプリケーションを作成する方法
Jetpack Compose をサポートするアプリケーションを作成するには、次の手順に従います。
1. Android Studio のようこそウィンドウが表示されている場合は、[新しい Android Studio プロジェクトを開始する] をクリックします。Android Studio プロジェクトを開いている場合は、上部のメニュー バーで [ファイル] > [新規作成] > [新しいプロジェクト] を選択します。
2. [プロジェクト テンプレートの選択] ウィンドウで、[空の作成アクティビティ] を選択し、[次へ] をクリックします。 [
プロジェクトの構成] ウィンドウで、次の手順を実行します。
a. プロジェクト名、パッケージ名、保存場所を設定します。
b. Jetpack Compose は Kotlin で記述されている場合にのみ実行できるため、言語ドロップダウン メニューでは Kotlin が唯一のオプションであることに注意してください。
c. [最小 API レベル] ドロップダウン メニューで、21 以上を選択します。
d. 「完了」をクリックします。
これで、Jetpack Compose を使用してアプリケーションを作成できるようになりました。
2. Jetpack Compose の簡単なアプリケーション
1.まずプロジェクトを作成します
2. 修飾子を使用してスタイルが画面全体を満たすように設定し、mutableStateOf を使用して状態を監視し、状態が変化したときにトリガーし、表示しないように初期状態を false に設定します。
Column(
modifier = Modifier.fillMaxSize()
) {
var isVisible by remember {
mutableStateOf(false)
}
3. ボタンを作成し、クリックイベントを設定します。
Button(onClick = {
isVisible = !isVisible
}) {
Text(text = "Toggle")
}
4. 次に、フェードインアニメーションを設定し、ボタンをクリックした後に画面全体に赤いボックスを作成します。
AnimatedVisibility(
visible = isVisible,
enter= slideInHorizontally()+ fadeIn(),
modifier = Modifier.fillMaxWidth().weight(1f)
) {
Box(modifier = Modifier.background(Color.Red))
}
レンダリング
著者：陸裕豪
https://blog.csdn.net/qq_52967136/article/details/128175993