【Swift UI】borderの使い方！枠線や下線の色や太さ

この記事からわかること

index

[open]

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

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

SwiftUIでビューに枠線を付与できる方法とborderモディファイアの使い方をまとめていきます。

ビューに枠線を付与する方法

SwiftUIでビューに対して枠線を付与する方法はいくつかあります。

func border<S>(
    _ content: S,
    width: CGFloat = 1
) -> some View where S : ShapeStyle

一番スマートな方法がborderモディファイアを使用する方法です。引数にはColor構造体(またはShapeStyleプロトコルに準拠したもの)を渡すことで色味を、widthに線の太さを渡します。

Text("Hello World")
  .border(.cyan,width:3)

これで要素に対して枠線が付与されます。borderモディファイアを呼び出す前にpaddingを呼び出せば余白を持った枠線を実装することができます。

Text("Hello World")
  .padding()
  .border(.cyan,width:3)

枠線を付与する方法としてビューを重ねる役割を持つoverlayモディファイアと四角形を定義するRectangle構造体を使用する方法もあります。

Text("Hello World")
.overlay(
    RoundedRectangle(cornerRadius: 2)
        .stroke(.cyan,lineWidth: 3)
)

ビューに対してサイドだけや下線などといった一部分だけの枠線を実装するにはborderモディファイアでは対応できません。そのため、先ほどのRectangle構造体を使用してVStackなどで整えることで実装可能です。

VStack {
    Text("Hello World")
      .frame(width: 70)
    Rectangle()
      .frame(width: 70,height: 3)
      .foregroundColor(.cyan)
}

Text構造体に下線を付与したい場合はunderlineモディファイアを使用することでテキスト自体に下線を付与することが可能です。

Text("Hello World")
  .underline()

ビューに対して破線の枠を実装する際にもborderモディファイアのみでは実装できません。なのでRectangle構造体を使用して実装します。

Rectangle()
    .stroke(style: StrokeStyle(lineWidth: 2, dash: [5]))
    .frame(width: 200, height: 100)

ビューに対して付与したい場合はoverlayで重ねます。

.overlay {
    Rectangle()
      .stroke(style: StrokeStyle(lineWidth: 2, dash: [5]))
      .frame(width: 140)
}

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

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

Swift