概要
SwiftUIのColortとViewを拡張して、Modifierをつければスタイルを適用できるようにする方法を書いていく。いちいち色を指定してドロップシャドウをして、というのは効率的でないので、Modifierにしてしまえという発想。
ちなみにNeumorphismはデザイン手法の一つ。New（新しい）＋Skeumorphism（スキューモーフィズム）から来ているらしい。基本的に、2つのドロップシャドウを使用することで、単色ながら立体感をだし、ちょっとモダンなビジュアルになるのが特徴。
まずはColorを拡張する
import SwiftUI
extension Color {
static let neuBackground = Color(hex: "f0f0f3")
static let dropShadow = Color(hex: "aeaec0").opacity(0.4)
static let dropLight = Color(hex: "ffffff")
}
extension Color {
init(hex: String) {
let scanner = Scanner(string: hex)
scanner.scanLocation = 0
var rgbValue: UInt64 = 0
scanner.scanHexInt64(&rgbValue)
let r = (rgbValue & 0xff0000) >> 16
let g = (rgbValue & 0xff00) >> 8
let b = rgbValue & 0xff
self.init(red: Double(r) / 0xff, green: Double(g) / 0xff, blue: Double(b) / 0xff)
}
}見た目を確認する
Image(systemName: "forward.fill")
.padding(padding)
.background(
RoundedRectangle(cornerRadius: 10)
.fill(Color.neuBackground)
)
.shadow(color: .dropShadow, radius: 15, x: 10, y: 10)
.shadow(color: .dropLight, radius: 15, x: -10, y: -10)
.foregroundColor(.primary)Viewを拡張してModifierを作る
extension View {
func neumorphism(padding: CGFloat)->some View {
self.modifier(NeumorphismModifier(padding: padding))
}
}
struct NeumorphismModifier: ViewModifier {
var padding: CGFloat = 5
func body(content:Content) -> some View {
ZStack(content: {
content
.padding(padding)
.background(
RoundedRectangle(cornerRadius: 10)
.fill(Color.neuBackground)
)
.shadow(color: .dropShadow, radius: 15, x: 10, y: 10)
.shadow(color: .dropLight, radius: 15, x: -10, y: -10)
.foregroundColor(.primary)
})
}
}あとはこれでいい
拡張子を作ったので、Viewにつけるだけ
Image(systemName: "forward.fill")
.neumorphism(padding: 10)まとめ
今回はNeumorphismにするためのModifierを作った。こうやって切り出して一つの処理にまとめると気分がいいですね。a
