今回は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定数を使って枠線の設定を実現している。