• 2022/8/10
• 3分

【Swift UI】paddingの使い方まとめ！余白の指定方法

＼ アプリをリリースしました ／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

Swift UIで要素の余白を取る時に使うpaddingモディファイアの使い方をまとめました。

paddingの使い方

paddingモディファイアはTextや ButtonなどのView構造体に指定して余白を取るために使用します。

Text("Hello World")
    .padding()
    .background(Color.cyan)

引数に何も指定せずにpadding()と指定した場合は要素の上下左右に適切な余白が自動で取られます。

定義を見てみると以下のようになっています。

 func padding(
    _ edges: Edge.Set = .all,
    _ length: CGFloat? = nil
) -> some View

これが基本の形ではありますが記述形式は複数あるので注意してください。

余白のサイズを指定する

余白のサイズをカスタマイズしたい時は引数にCGFloat型の値(数値でOK)を渡します。

func padding(_ length: CGFloat) -> some View

引数のlengthは省略可能なので以下のように数値を渡すだけでその数値分の余白が全体に取られます。

Text("Hello World").padding(10)

余白を上下左右別々に指定する

デフォルトでは自動で全方向へ余白を取ってくれますがEdgeInsets構造体を用いると上下左右の余白を別々のサイズで指定することも可能です。

func padding(_ insets: EdgeInsets) -> some View

EdgeInsetsの定義

@frozen  struct EdgeInsets (
    top: CGFloat,        // 上の余白
    leading: CGFloat,    // 左の余白
    bottom: CGFloat,     // 下の余白
    trailing: CGFloat    // 右の余白
)

使用例

Text("Hello World").padding(EdgeInsets(
                        top: 10,         // 上の余白
                        leading: 100,    // 左の余白
                        bottom: 10,      // 下の余白
                        trailing: 100    // 右の余白
                    ))

特定の方向のみに指定する

上下左右全方向ではなく、特定の方向のみに指定する場合は省略可能な引数edgesに列挙型Edgeの値を渡すことで指定できます。

func padding(
    _ edges: Edge.Set = .all,
    _ length: CGFloat? = nil
) -> some View

列挙型：Edge

@frozen  enum Edge{
    case top
    case bottom
    case leading
    case trailing
}

デフォルトではこの値に全方向が指定する.allが渡されていますが、別々に指定する時はその値を記述します。

1方向に指定する

.padding(.top, 10)

複数方向に指定する

複数方向に指定する場合は配列形式で指定します。

.padding([.bottom, .trailing], 30) 

指定する順番に注意

paddingに限った話ではないですがモディファイアを追加する際は指定する順番通りに反映されていくので注意が必要です。例えば以下の場合はpadding部分には背景色が適応されません。

 Text("Hello World")
      .background(Color.cyan)
      .padding()

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

私がSwift UI学習に使用した参考書