• 2023/4/21
• 4分

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

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

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

posted withアプリーチ

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

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

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

• borderモディファイアを使用する
• overlayモディファイアを使用する

borderモディファイアの使い方

公式リファレンス：borderモディファイア

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モディファイアを使用する

枠線を付与する方法としてビューを重ねる役割を持つ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)
}

破線の実装方法

ビューに対して破線の枠を実装する際にも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)
}

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

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