Android Academy · レッスン

Text、Image、Button

Q: 「Text、Image、Button」で何を学びますか？

基本的な組み込みComposableを使います ブラウザで直接実行するハンズオンコードでAndroid Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

基本的な組み込みComposableを使います

「Text、Image、Button」はCoddyKit上の無料Android Academyレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはAndroid Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Android Academyコースには全4レッスンが含まれています。

組み込み Composable

Compose には、一般的な UI 用のすぐに使える Composable が用意されています。特によく使うのは Text、Image、Button の3つです。

Text Composable

Text は文字列を表示します。最も重要なパラメータは text です。

@Composable
fun Title() {
    Text(text = "My App")
}

テキストのスタイル設定

Text は、fontSize、color、fontWeight など、多くのスタイル設定用パラメータを受け取ります。

Text(
    text = "Big Bold",
    fontSize = 24.sp,
    color = Color.Blue,
    fontWeight = FontWeight.Bold
)

sp と dp

フォントサイズには .sp（スケール非依存ピクセル）を使用します。これにより、ユーザーのフォントサイズのアクセシビリティ設定が反映されます。レイアウトのサイズには .dp（密度非依存ピクセル）を使用します。

テキストには sp、それ以外には dp を使います。

Image Composable

Image は画像を表示します。painterResource を使って drawable を読み込み、アクセシビリティのために必ず contentDescription を指定します。

Image(
    painter = painterResource(id = R.drawable.logo),
    contentDescription = "App logo"
)

contentDescription

contentDescription はスクリーンリーダーによって読み上げられます。意味を持たない装飾用画像には null を渡します。意味のある画像には、短い説明を指定します。

Button Composable

Button はクリック可能な要素です。主なパラメータは onClick で、タップされたときに実行されるラムダです。ボタンのラベルはコンテンツラムダに記述します。通常は Text を使います。

Button(onClick = { /* do something */ }) {
    Text(text = "Tap me")
}

クリックへの反応

onClick ラムダには、状態の更新、画面遷移、関数の呼び出しなどのロジックを記述します。

Button(onClick = { println("Clicked!") }) {
    Text(text = "Log")
}

コンテンツラムダ

Button が末尾のコンテンツラムダを受け取ることに注目してください。中に記述したものはすべてボタンのコンテンツとして描画されるため、ボタンにはラベルだけでなく、アイコンとテキストを含めることもできます。

Button(onClick = { }) {
    Text(text = "Save")
}

組み合わせる

実際の UI では、これらの Composable を組み合わせます。ここでは、タイトル、画像、ボタンを Column の中に縦に並べています。

@Composable
fun Card() {
    Column {
        Text(text = "Profile")
        Image(
            painter = painterResource(id = R.drawable.avatar),
            contentDescription = "Avatar"
        )
        Button(onClick = { }) { Text("Follow") }
    }
}

他にも多数あります

この3つ以外にも、Compose には TextField、Icon、Checkbox、Switch など、多くの Composable があります。基本的なパターンは同じで、パラメータとコンテンツラムダを渡します。

クイックチェック

ユーザーがタップしたときにコードを実行するButtonのパラメータはどれですか？

まとめ

基本となる3つのコンポーザブルを学びました。

Text — 文字列を表示します。fontSizeやcolor（spを使用）でスタイルを設定します。
Image — painterResourceとcontentDescriptionを使用します。
Button — onClickラムダとコンテンツラムダを使用します。

よくある質問

「Text、Image、Button」レッスンは無料ですか？

はい。「Text、Image、Button」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Android Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Android Academyコースには全4レッスンが含まれています。

「Text、Image、Button」で何を学びますか？

基本的な組み込みComposableを使いますブラウザで直接実行するハンズオンコードでAndroid Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Android Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのAndroid Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/4です。

「Text、Image、Button」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このAndroid Academyレッスンでコードを書いて実行できますか？

はい。すべてのAndroid Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Android Academyに戻る