Jetpack Compose Academy · レッスン

プロフィールカードのレイアウトを設計する

コードを書く前に構造を計画します。

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

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

Why Sketch First

Before you write a single line, picture the screen. A quick sketch turns a vague idea into a clear plan you can build with confidence. 📝

What a Profile Card Holds

Your profile card shows a few key things: an avatar, a name, a short bio, some stats, and a follow button. That list is your content inventory.

Think in Boxes

Compose lays things out as nested boxes. Each piece of content lives in its own region, and regions nest inside larger ones. Start by drawing those boxes.

Top to Bottom Flow

Most cards read vertically: avatar on top, name below, bio under that. A Column stacks children top to bottom, so it will be your outer container.

Sketch the Outer Column

The whole card sits inside one Column. Everything you add becomes a child of it, in the order you write them.

Column {
    // avatar
    // name
    // bio
    // stats row
    // follow button
}

Side-by-Side Stats

The stats line shows counts next to each other, not stacked. Anything that sits horizontally belongs in a Row nested inside your Column.

Plan the Stats Row

Sketch a Row holding three little blocks: posts, followers, and following. Each block is its own tiny piece of the card.

Row {
    // posts
    // followers
    // following
}

Where the Button Lives

The follow button is the last item, full width at the bottom. In your sketch it sits as the final child of the outer Column.

Name the Sections

Give each region a name: header, bio, stats, action. Naming sections now makes turning the sketch into Composables almost automatic later. ✨

Spacing and Breathing Room

A good sketch marks the gaps too. Note where you want padding around the card and space between sections so it never feels cramped.

From Sketch to Tree

Your sketch maps directly to a Composable tree: outer Column, then header, bio, stats Row, and button as children in order.

Quick Check

Which container best fits items that should sit side by side?

Recap: You Have a Plan

You sketched the card as nested boxes: an outer Column with a header, bio, a stats Row, and a follow button. Next you will turn that plan into real Composables.

よくある質問

「プロフィールカードのレイアウトを設計する」レッスンは無料ですか？

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

「プロフィールカードのレイアウトを設計する」で何を学びますか？

コードを書く前に構造を計画します。ブラウザで直接実行するハンズオンコードでJetpack Compose Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「プロフィールカードのレイアウトを設計する」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← Jetpack Compose Academyに戻る