Jetpack Compose Academy · レッスン

アバター、名前、自己紹介セクション

画像とテキストでヘッダーを組み立てます。

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

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

Build the Header First

Time to make the sketch real. You will start at the top of the card with the header: the avatar, the name, and a short bio. 👤

The Avatar Image

The avatar is an Image Composable that draws a drawable resource. Give it a clear size so it never balloons to fill the screen.

Image(
    painter = painterResource(R.drawable.avatar),
    contentDescription = "Profile photo"
)

Make It a Circle

Profile photos look best as circles. Chain clip with CircleShape on the Image modifier to round it into a perfect avatar.

Image(
    painter = painterResource(R.drawable.avatar),
    contentDescription = "Profile photo",
    modifier = Modifier.size(96.dp).clip(CircleShape)
)

Add the Name

Below the avatar comes the display name. A simple Text Composable shows the string the user will read first.

Text(text = "Ada Lovelace")

Style the Name

Names should stand out. Pass a style from MaterialTheme typography so the name looks like a proper heading.

Text(
    text = "Ada Lovelace",
    style = MaterialTheme.typography.titleLarge
)

The Bio Text

Under the name, add a one-line bio with another Text. Use a smaller, softer style so it reads as a subtitle, not a headline.

Text(
    text = "Building delightful apps.",
    style = MaterialTheme.typography.bodyMedium
)

Stack Them in a Column

Avatar, name, and bio stack vertically, so wrap all three in a Column. The order you write them is the order they appear.

Column {
    Image(/* avatar */)
    Text("Ada Lovelace")
    Text("Building delightful apps.")
}

Center Everything

Headers feel balanced when centered. Set horizontalAlignment to CenterHorizontally on the Column to line up the avatar and text.

Column(
    horizontalAlignment = Alignment.CenterHorizontally
) { /* ... */ }

Add Vertical Spacing

Cramped headers look messy. Use Arrangement.spacedBy on the Column to drop a consistent gap between the avatar, name, and bio.

Column(
    verticalArrangement = Arrangement.spacedBy(8.dp)
) { /* ... */ }

Pad the Header

Give the whole section room to breathe by adding padding to the Column modifier. Edges should never touch the screen frame.

Column(
    modifier = Modifier.padding(16.dp)
) { /* ... */ }

Header Section Done

You now have a clean header: a circular avatar, a bold name, and a soft bio, centered and spaced. The top of your card is finished. 🎉

Quick Check

How do you turn a square photo into a round avatar?

Recap: The Header

You built the header inside a centered Column: a clipped circular avatar, a styled name, and a subtle bio, all padded and spaced. Next you will add the stats row.

よくある質問

「アバター、名前、自己紹介セクション」レッスンは無料ですか？

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

「アバター、名前、自己紹介セクション」で何を学びますか？

画像とテキストでヘッダーを組み立てます。ブラウザで直接実行するハンズオンコードでJetpack Compose Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「アバター、名前、自己紹介セクション」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← Jetpack Compose Academyに戻る