Paddingで余白を付ける
Modifierで余白を設定します。
「Paddingで余白を付ける」はCoddyKit上の無料Android Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAndroid Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Android Academyコースには全4レッスンが含まれています。
Paddingとは？
Paddingは、composableのコンテンツの周囲に追加する空白です。コンテンツを端から離し、窮屈に見えないようにします。
Composeでは、Modifierを使ってpaddingを追加します。
Text(
text = "Hello",
modifier = Modifier.padding(16.dp)
)dp単位
Paddingのサイズには、density-independent pixels（密度非依存ピクセル）の略であるdpを使います。dpを使うと、どの画面でも物理的に同じ大きさに見えます。
数値の後ろに.dpを付けて記述します。たとえば8.dpや24.dpのように書きます。
Modifier.padding(8.dp)Modifierとは？
Modifierは、composableの見た目や動作（サイズ、padding、背景など）を表します。
関数をドットでつないで、Modifierを組み立てます。
Modifier
.padding(16.dp)
.background(Color.Yellow)すべての辺にPaddingを設定する
padding(16.dp)のように1つの値を指定して呼び出すと、上、下、start、endの4辺すべてに同じ空白が追加されます。
コンテンツの周囲に余裕を持たせる最も手軽な方法です。
Box(
modifier = Modifier.padding(16.dp)
) {
Text("Inside")
}水平と垂直のPadding
horizontalパラメータとverticalパラメータを使うと、辺ごとに個別に設定できます。
Horizontalはstartとend、verticalは上と下を対象にします。
Modifier.padding(
horizontal = 24.dp,
vertical = 8.dp
)1つの辺にPaddingを設定する
1つの辺だけを対象にするには、start、top、end、bottomのいずれかを指定します。
必要な場所だけ、間隔を細かく調整できます。
Modifier.padding(
start = 16.dp,
top = 4.dp
)順序が重要
Modifierの順序によって結果が変わります。backgroundより前にpaddingを置くと、paddingで広がった領域は背景色で塗られません。後に置くと、背景色がpaddingの領域まで広がります。
Modifierはレイヤーのように、上から下へ読み取りましょう。
Modifier
.background(Color.Cyan)
.padding(16.dp)要素間の間隔
ColumnやRowの中では、Arrangement.spacedByを使うと、子要素の間に均等な間隔を自動的に追加できます。
各子要素に手作業でpaddingを設定するよりもすっきりします。
Column(
verticalArrangement = Arrangement.spacedBy(12.dp)
) {
Text("One")
Text("Two")
}間隔にSpacerを使う
Spacerは、要素同士を離すために使う空のcomposableです。Modifierでサイズを指定します。
2つの要素の間に固定の間隔を作るときに便利です。
Column {
Text("Top")
Spacer(Modifier.height(16.dp))
Text("Bottom")
}PaddingとMarginの違い
Composeには独立したmarginはありません。サイズやbackgroundより前にpaddingをModifierチェーンに置くことで、外側の空白を作ります。
つまり、paddingという1つのツールで、順序に応じて内側と外側の両方の間隔を扱えます。
Modifier
.padding(16.dp)
.background(Color.LightGray)
.padding(8.dp)一貫した間隔
優れたアプリでは、4、8、16、24 dpのように、いくつかの値を繰り返し使います。これにより、レイアウトが整い、予測しやすくなります。
ばらばらの数値は避け、小さなスケールから選びましょう。
Modifier.padding(16.dp)理解度チェック
Paddingについての理解度を確認しましょう。
まとめ
Paddingは、dp値を使ったModifier.paddingでコンテンツの周囲に空白を追加します。すべての辺、水平・垂直方向、または1つの辺だけに設定できます。
Modifierの順序は重要です。要素間の間隔には、Arrangement.spacedByやSpacerを使います。
次は、色とMaterialThemeについて学びます。
よくある質問
「Paddingで余白を付ける」レッスンは無料ですか？
はい。「Paddingで余白を付ける」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Android Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Android Academyコースには全4レッスンが含まれています。
「Paddingで余白を付ける」で何を学びますか？
Modifierで余白を設定します。 ブラウザで直接実行するハンズオンコードでAndroid Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Android Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAndroid Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「Paddingで余白を付ける」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAndroid Academyレッスンでコードを書いて実行できますか？
はい。すべてのAndroid Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- テキストをスタイリングする
- ボタンとクリック
- Paddingで余白を付ける
- 色とMaterialTheme