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