1. Soft-UI(Neumorphism)とは

New skeuomorphismというUI designの新しいトレンドっぽい
Soft-UI(Neumorphism)

2. コード実装

基本凸を表示するためにOuter Shadowを２つ、凹を表示するためにInner Shadowを２つ作って実装

Outer Shadow

Outer ShadowはCAShapeLayerでcornerRadiusに合わせたpathで影を作る
shadowColorとshadowOffsetを逆にして２つ作る

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
lightOuterShadowLayer = {
    let shadowLayer = createOuterShadowLayer(shadowColor: lightShadowColor, shadowOffset: shadowOffset.inverse)
    layer.addSublayer(shadowLayer)
    return shadowLayer
}()
darkOuterShadowLayer.path = createOuterShadowPath()

darkOuterShadowLayer = {
    let shadowLayer = createOuterShadowLayer(shadowColor: darkShadowColor, shadowOffset: shadowOffset)
    layer.addSublayer(shadowLayer)
    return shadowLayer
}()
lightOuterShadowLayer.path = createOuterShadowPath()


func createOuterShadowLayer(shadowColor: CGColor, shadowOffset: CGSize) -> CAShapeLayer {
    let layer = CAShapeLayer()
    layer.backgroundColor = UIColor.clear.cgColor
    layer.fillColor = mainColor
    layer.shadowColor = shadowColor
    layer.shadowOffset = shadowOffset
    layer.shadowOpacity = shadowOpacity
    layer.shadowRadius = shadowRadius
    return layer
}

func createOuterShadowPath() -> CGPath {
    return UIBezierPath(roundedRect: bounds, cornerRadius: cornerRadius).cgPath
}

Inner Shadow

Inner ShadowもCAShapeLayerでcornerRadiusに合わせたpathとより大きいpathを合わせて影を作りmaskで外側には表示されないようにする
shadowColorとshadowOffsetを逆にして２つ作る

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

darkInnerShadowLayer = {
    let shadowLayer = createInnerShadowLayer(shadowColor: darkShadowColor, shadowOffset: shadowOffset)
    layer.addSublayer(shadowLayer)
    shadowLayer.isHidden = true
    return shadowLayer
}()
darkInnerShadowLayer.path = createInnerShadowPath()
darkInnerShadowLayer.mask = createInnerShadowMask()

lightInnerShadowLayer = {
    let shadowLayer = createInnerShadowLayer(shadowColor: lightShadowColor, shadowOffset: shadowOffset.inverse)
    layer.addSublayer(shadowLayer)
    shadowLayer.isHidden = true
    return shadowLayer
}()
lightInnerShadowLayer.path = createInnerShadowPath()
lightInnerShadowLayer.mask = createInnerShadowMask()

func createInnerShadowLayer(shadowColor: CGColor, shadowOffset: CGSize) -> CAShapeLayer {
    let layer = CAShapeLayer()
    layer.backgroundColor = UIColor.clear.cgColor
    layer.fillColor = mainColor
    layer.shadowColor = shadowColor
    layer.shadowOffset = shadowOffset
    layer.shadowOpacity = shadowOpacity
    layer.shadowRadius = shadowRadius
    layer.fillRule = .evenOdd
    return layer
}

func createInnerShadowPath() -> CGPath {
    let path = UIBezierPath(roundedRect: bounds.insetBy(dx: -100, dy: -100), cornerRadius: cornerRadius)
    path.append(UIBezierPath(roundedRect: bounds, cornerRadius: cornerRadius))
    return path.cgPath
}

func createInnerShadowMask() -> CALayer {
    let layer = CAShapeLayer()
    layer.path = UIBezierPath(roundedRect: bounds, cornerRadius: cornerRadius).cgPath
    return layer
}

Example

全ソースコードはこちらに
https://github.com/hmhv/SoftUIView

参考

https://neumorphism.io/#55b9f3