[SwiftUI]Image(画像)に枠線をつけるには？

SwiftUI

2022.03.30

どうも、ちょげ(@chogetarou)です。

画像であるImageに枠線をつける方法を紹介します。

方法
1. border
2. overlay
まとめ

方法

Imageに枠線をつける方法は、２つあります。

border

１つは、border修飾子を使う方法です。

まず、Imageにborder修飾子を付与します。

そして、border修飾子の引数で枠線の設定をします。

Image("image")
    .border(色, width: 太さ)

使用例

struct ContentView: View {
    var body: some View {
        VStack {
            Image("DogPhoto")
                 .resizable()
                 .scaledToFit()
                 .border(.black, width: 2)
                 .padding()
        }
    }
}

overlay

もう１つは、overlay修飾子を使う方法です。

まず、Imageにoverlay修飾子を付与します。

次に、overlay修飾子の引数にRectangleやRoundedRectangleを指定します。

そして、RectangleやRoundedRectangleにstroke修飾子を付与します。

stroke修飾子の第１引数には色、第２引数「lineWidth」に太さを指定します。

Image("image")
    .overlay(
        Rectangle()
            .stroke(色, lineWidth: 太さ)
    )

overlay修飾子とRoundedRectangleを使えば、角丸の枠線をつけることが出来ます。

使用例

struct ContentView: View {
    var body: some View {
        VStack {
            Image("DogPhoto")
                 .resizable()
                 .scaledToFit()
                 .overlay(
                    RoundedRectangle(cornerRadius: 10)
                        .stroke(Color.blue, lineWidth: 5)
                 )
                 .padding()
        }
    }
}