setContent：UIの始まり
ComposableツリーをActivityにつなぎます。
「setContent：UIの始まり」はCoddyKit上の無料Jetpack Compose Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJetpack Compose Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Jetpack Compose Academyコースには全4レッスンが含まれています。
Compose を Android に接続する
Composable には配置先が必要です。Activity 内の setContent 呼び出しが、UI ツリーを Android の画面に渡す橋渡しになります。🔗
onCreate の中で呼び出す
Activity の onCreate から setContent を呼び出します。この時点で Android がアプリに画面を表示するタイミングを知らせます。
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent { Greeting() }
}ラムダを受け取る
setContent はラムダを受け取り、そのブロック内で Composable を呼び出します。波かっこ内のすべてが画面のコンテンツになります。
setContent {
Greeting("Compose")
}ラムダも Composable である
このラムダ自体が @Composable スコープです。そのため、追加の設定なしで、その中から任意の Composable を直接呼び出せます。
ルート Composable を 1 つにする
整理されたアプリでは、ここで 1 つのルート Composable を呼び出します。アプリ全体やテーマであることが多く、その中に他の要素をすべて入れ子にします。
setContent {
MyApp()
}テーマでラップする
多くのアプリではルートをテーマでラップし、色やフォントを全体に適用します。テーマも UI を囲むもう 1 つの Composable にすぎません。
setContent {
MyAppTheme {
MyApp()
}
}setContentView を置き換える
以前の View システムでは、XML レイアウトを指定して setContentView を呼び出していました。Compose ではこれを、Composable ラムダを渡す setContent に置き換えます。
ComponentActivity を継承する
setContent を使用する Activity は通常、Compose が利用するように設計された軽量な基底クラス ComponentActivity を継承します。
class MainActivity : ComponentActivity() {
// onCreate with setContent
}ツリーが配置される場所
setContent はエントリポイントです。ここから Compose が、その中で呼び出した Composable のツリー全体を構築し、レイアウトし、描画します。
背景用に Surface を追加する
コンテンツを Surface でラップすると、テーマに沿った背景とエレベーションが得られます。これはテーマの直下に置く最初の子としてよく使われます。
setContent {
MyAppTheme {
Surface { MyApp() }
}
}画面ごとに setContent は 1 回だけ
通常、Activity ごとに setContent を一度だけ呼び出します。異なるコンテンツを表示する場合は、setContent を再度呼び出すのではなく、ツリー内の状態を変更します。
クイックチェック
Compose UI がどこから始まるかを最後に確認しましょう。
まとめ
すべての始まりがわかりました。onCreate で setContent を呼び出し、Composable ラムダを渡し、それをテーマでラップすると、Compose がアプリを描画します。🎉
AI チューターと学ぶ Kotlin — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 30
- レッスン
- 120
よくある質問
「setContent：UIの始まり」レッスンは無料ですか？
はい。「setContent：UIの始まり」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Jetpack Compose Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Jetpack Compose Academyコースには全4レッスンが含まれています。
「setContent：UIの始まり」で何を学びますか？
ComposableツリーをActivityにつなぎます。 ブラウザで直接実行するハンズオンコードでJetpack Compose Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Jetpack Compose Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJetpack Compose Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「setContent：UIの始まり」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJetpack Compose Academyレッスンでコードを書いて実行できますか？
はい。すべてのJetpack Compose Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- @Composable関数を書く
- @Previewによるライブプレビュー
- ComposableからComposableを呼び出す
- setContent：UIの始まり