0Pricing
Android Academy · レッスン

Modifierシステム

Modifierでサイズ、余白、スタイルを設定します

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

Modifier とは

Modifier は、Composable のサイズ、パディング、背景、クリック動作などを装飾または設定します。ほぼすべての Composable が modifier パラメーターを受け取ります。

チェーン

Modifier はチェーンできます。各関数が新しい Modifier を返すため、次々に呼び出します。

Modifier
    .padding(16.dp)
    .size(100.dp)
    .background(Color.LightGray)

Modifier の渡し方

チェーンを Composable の modifier パラメーターに渡します。

Text(
    text = "Hello",
    modifier = Modifier
        .padding(8.dp)
        .background(Color.Yellow)
)

順序が重要です

Modifier の順序によって結果が変わります。Modifier は左から右へ適用され、レイヤーのように互いを包み込みます。

padding の後に background

ここでは先にパディングが適用されるため、背景は内側の領域だけを塗り、パディング部分は透明のままになります。

Modifier
    .padding(16.dp)
    .background(Color.Red)

background の後に padding

順序を入れ替えると、背景が領域全体を覆い、パディングによってコンテンツが内側へ押し込まれます。同じ Modifier でも見た目が異なるのは、順序が重要だからです。

Modifier
    .background(Color.Red)
    .padding(16.dp)

よく使うサイズ用 Modifier

よく使うサイズ用 Modifier：

  • size(100.dp) — 幅と高さを固定します。
  • fillMaxWidth() — 横方向の領域をすべて使います。
  • fillMaxSize() — 利用可能な領域をすべて使います。
  • width() / height() — 一方の寸法を設定します。

クリック可能にする

Modifier.clickable を使うと、通常の Text や Box も含め、あらゆる Composable がタップに反応するようになります。

Text(
    text = "Tap me",
    modifier = Modifier.clickable { /* handle */ }
)

Modifier パラメーターの再利用

慣例として、カスタム Composable は modifier: Modifier = Modifier パラメーターを受け取り、それをルート要素に渡します。これにより、呼び出し側からレイアウトをカスタマイズできます。

@Composable
fun Card(modifier: Modifier = Modifier) {
    Column(modifier = modifier) { /* ... */ }
}

Modifier は最初のパラメーター

慣例では、modifier パラメーターを省略可能なパラメーターの先頭に置き、空の Modifier をデフォルト値にします。これにより、標準ライブラリと一貫した API になります。

まとめ

順序を意図的に設定したチェーンを使ったスタイル付きの Box です。

Box(
    modifier = Modifier
        .size(120.dp)
        .background(Color(0xFFE86F00))
        .padding(12.dp)
) {
    Text(text = "Compose", color = Color.White)
}

クイックチェック

Modifier.padding(16.dp).background(Color.Red) と Modifier.background(Color.Red).padding(16.dp) で見た目が異なるのはなぜですか？

まとめ

Modifier：

  • サイズ、パディング、背景、クリックなどを設定します。
  • チェーンでき、順番に適用されます。つまり順序が重要です。
  • カスタム Composable では、modifier: Modifier = Modifier を最初のパラメーターとして公開します。

よくある質問

「Modifierシステム」レッスンは無料ですか？

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

「Modifierシステム」で何を学びますか？

Modifierでサイズ、余白、スタイルを設定します ブラウザで直接実行するハンズオンコードでAndroid Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「Modifierシステム」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

  1. Column、Row、Box
  2. Modifierシステム
  3. 配置と整列
  4. LazyColumnによるリスト
← Android Academyに戻る