【SwiftUI】画像にグラデーションの枠線を付ける

今回はSwiftUIで表示する画像に、グラデーションの枠線を付ける方法を紹介する。

サンプルコード

まず、あらかじめグラデーションをgradient定数、linear定数として設定しておく。

あとはImageビューの表示の際に、overlayを使って画像とグラデーション枠線を重ね合わせるだけだ。

import SwiftUI

fileprivate let gradient = Gradient(colors: [
    Color.init(red: 1.0, green: 0.9, blue: 0.3),
    Color.init(red: 1.0, green: 0.7, blue: 0.02)
])

fileprivate let linear = LinearGradient(
    gradient: gradient, startPoint: .top, endPoint: .bottom
)

struct ContentView: View {
    var body: some View {
        Image("pasta")
            .resizable()
            .aspectRatio(contentMode: .fill)
            .frame(width: 250, height: 250)
            .clipShape(Circle())
            .overlay(Circle().stroke(linear, lineWidth: 13))
    }
}

ContentView内では単に画像の配置のみをおこなっており、18行目までは画像のサイズ指定、円形の切り取りなどをおこなっている。

19行目でoverlayの処理が入っており、ここであらかじめ設定しておいたグラデーションのlinear定数を使って枠線の設定を実現している。