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

この記事からわかること

  • Swift UIborderモディファイア使い方
  • ビュー枠線下線付与する方法
  • 太さ変更方法

index

[open]

\ アプリをリリースしました /

みんなの誕生日

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

posted withアプリーチ

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

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

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

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

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)
【Swift UI】borderの使い方!枠線や下線の色や太さ

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

Text("Hello World")
  .padding()
  .border(.cyan,width:3)
【Swift UI】borderの使い方!枠線や下線の色や太さ

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

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

Text("Hello World")
.overlay(
    RoundedRectangle(cornerRadius: 2)
        .stroke(.cyan,lineWidth: 3)
)
【Swift UI】borderの使い方!枠線や下線の色や太さ

ビューに下線を付与する

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

VStack {
    Text("Hello World")
      .frame(width: 70)
    Rectangle()
      .frame(width: 70,height: 3)
      .foregroundColor(.cyan)
}
【Swift UI】borderの使い方!枠線や下線の色や太さ

文字に下線を付与する

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

Text("Hello World")
  .underline()

破線の実装方法

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

【Swift UI】borderの使い方!枠線や下線の色や太さ
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)
}

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

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

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

New Article

index