0Pricing
Android Academy · レッスン

プロフィールカードを構築する

Composableを組み合わせて画面を作ります。

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

目標

これまで学んだことを組み合わせてみましょう。名前と職種をスタイル付きのボックスにきれいに積み重ねた、シンプルなプロフィールカードを作成します。

その過程で、コンポーザブルのサイズ、間隔、外観を制御するModifierについて学びます。

Modifierに会いましょう

Modifierは、コンポーザブルの見た目や動作を変更します。多くのコンポーザブルが受け取るmodifierパラメータを通して渡します。

Modifierでは、パディング、サイズ、背景色、境界線などを設定できます。ComposeでUIを装飾する主な方法です。

Text(
    "Ada Lovelace",
    modifier = Modifier.padding(16.dp)
)

Modifierを連結する

ドットで呼び出しを連結して、modifierを作成します。各呼び出しは新しいmodifierを返すため、複数のmodifierを重ねて指定できます。

順序が重要です。backgroundの前にpaddingを指定する場合と、後に指定する場合では結果が異なります。レシピを読むように、チェーンを左から右へ読みましょう。

Modifier
    .padding(16.dp)
    .fillMaxWidth()

幅いっぱいに広げる

fillMaxWidth modifierを使うと、コンポーザブルが利用可能な横方向の空間いっぱいに広がります。画面幅いっぱいに表示するカードに最適です。

縦横両方向に広げるfillMaxSizeや、幅と高さを固定するsizeもあります。

Column(
    modifier = Modifier.fillMaxWidth()
) {
    Text("Profile")
}

パディングを追加する

パディングは、コンポーザブルの内側、つまり端とコンテンツの間に空間を追加します。dpの値を指定してModifier.paddingを使います。

パディングによって、カードの端にテキストが接触しなくなり、快適ですっきりしたレイアウトになります。

Column(
    modifier = Modifier.padding(16.dp)
) {
    Text("Ada Lovelace")
    Text("Mathematician")
}

カードに背景を付ける

背景色を付けると、カードを目立たせることができます。background modifierと色の値を使って適用します。

パディングと組み合わせると、内部のテキストの周囲に色付きの領域が適度な余白を持つようになります。

Column(
    modifier = Modifier
        .background(Color.LightGray)
        .padding(16.dp)
) {
    Text("Ada Lovelace")
}

名前と職種を積み重ねる

カードのColumnの中に、2つのテキストを積み重ねます。上に太字の名前、下に細めの職種を配置します。

異なるfontSizeとfontWeightの値を設定すると、2つのテキストの視覚的な階層が明確になります。

Column {
    Text("Ada Lovelace", fontSize = 20.sp, fontWeight = FontWeight.Bold)
    Text("Mathematician", fontSize = 14.sp)
}

再利用できるようにする

カードを、nameとtitleをパラメータとして受け取る再利用可能なコンポーザブルに変えてみましょう。これで、どの人物でも表示できるようになります。

これはレッスン1で学んだものと同じ考え方です。データを渡して、UIをどこでも再利用します。

@Composable
fun ProfileCard(name: String, title: String) {
    Column {
        Text(name)
        Text(title)
    }
}

完成したプロフィールカード

すべての部品を組み合わせたカードです。画面幅いっぱいのColumn、灰色の背景、パディング、そしてスタイルを設定した2行のテキストで構成されています。

modifierのチェーンとColumnの子要素によって、これまでのレッスンの内容が1つの整ったコンポーザブルにまとまっていることに注目してください。

@Composable
fun ProfileCard(name: String, title: String) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .background(Color.LightGray)
            .padding(16.dp)
    ) {
        Text(name, fontSize = 20.sp, fontWeight = FontWeight.Bold)
        Text(title, fontSize = 14.sp)
    }
}

カードをプレビューする

@Previewラッパーを追加して、Android Studioでカードを確認できるようにします。サンプルデータを使ってProfileCardを呼び出し、背景も表示します。

これで、パディングや色を調整しながら、結果がすぐに更新される様子を確認できます。

@Preview(showBackground = true)
@Composable
fun ProfileCardPreview() {
    ProfileCard("Ada Lovelace", "Mathematician")
}

画面に表示する

実行中のアプリにカードを表示するには、アクティビティのsetContent内で呼び出します。これにより、コンポーザブルが実際の画面に組み込まれます。

これで、1つのコンポーザブルから、完全に再利用可能なUIコンポーネントまで作成できました。

setContent {
    ProfileCard("Ada Lovelace", "Mathematician")
}

理解度チェック

コンポーザブルにパディング、サイズ、背景を設定する方法を復習しましょう。

まとめ

Text、Column、Modifierを組み合わせて、完全なプロフィールカードを作成しました。Modifierを使うと、padding、fillMaxWidth、backgroundを連結して、UIの形やスタイルを整えられます。

nameとtitleのパラメータによってカードを再利用可能にし、@Previewでプレビューし、setContentを通じて表示しました。これで、最初から最後まで1つの完全なコンポーザブル画面を作成できました。お疲れさまでした。

よくある質問

「プロフィールカードを構築する」レッスンは無料ですか？

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

「プロフィールカードを構築する」で何を学びますか？

Composableを組み合わせて画面を作ります。 ブラウザで直接実行するハンズオンコードでAndroid Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「プロフィールカードを構築する」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

  1. Composableとは
  2. TextとColumnの基本
  3. UIをプレビューする
  4. プロフィールカードを構築する
← Android Academyに戻る