CHNeumorphismView

Neumorphism is a design style using shadows below or above the elements to make convex or concave effects.

Requirements

iOS 11.0+

Installation

Swift Package Manager

Use Swift Package Manager by adding following line to Package.swift:

dependencies: [
 .package(url: "https://github.com/Chaehui-Seo/CHNeumorphismView.git", from: "1.0.0")
]

Cocoapods

Use Cocoapods by adding following line to Podfile:

pod "CHNeumorphismView", "~> 1.0.0"

Usage

Create neumorphismView

Make UIView as neumorphism view by changing the Custom Class to CHNeumorphismView.

Default CHNeumorphismView would look like below.

Curve Direction	Intensity	Dark Shadow Color	Light Shadow Color
Outside (Convex)	1 (Maximum value)	Based on background Color	White

Customizing options

All of the customizing options can be set either in the storyboard or with codes. You can change it in the storyboard by set the value of the inspectors like below.

You can apply the effect with various options at once with public method.

// MARK: - [Make Neumorphism Effect at once]
// Curve Direction is the only essential parameter.
neumorphismView.makeNeumorphismEffect(curve: .outside) // for outside curve (= convex)
neumorphismView.makeNeumorphismEffect(curve: .inside) // for inside curve (= concave)
    
// Intensity is not essential and the default value is 1, which is the maximum value.
// Intensity value can be set between 0 ~ 1
neumorphismView.makeNeumorphismEffect(curve: .outside, intensity: 0.8)
    
// Dark or light shadow color can be set as you want.
// If you don't set the color value, dark shadow color will be decided based on the background color,
// and light shadow color will be set as white.
neumorphismView.makeNeumorphismEffect(curve: .inside, intensity: 0.8, darkShadowColor: UIColor.gray)
neumorphismView.makeNeumorphismEffect(curve: .inside, intensity: 0.8, lightShadowColor: UIColor.yellow)
neumorphismView.makeNeumorphismEffect(curve: .inside, intensity: 0.8, darkShadowColor: UIColor.gray, lightShadowColor: UIColor.yellow)

Or you can modity the options one by one.

// MARK: - [Curve Direction]
neumorphismView.isCurveOutside = true // for outside curve (= convex)
neumorphismView.isCurveOutside = false // for inside curve (= concave)

// MARK: - [Effect Intensity]
neumorphismView.effectIntensity = 0.5 // value between 0 ~ 1, default value is 1

// MARK: - [Corner Radius]
neumorphismView.cornerRadius = 10 // Use it rather than 'layer.cornerRadius' to apply corner to the effect

// MARK: - [Shadow Color]
neumorphismView.darkShadowColor = UIColor( ... ) // default value is set based on the background color
neumorphismView.lightShadowColor = UIColor( ... ) // default value is .white

SampleApp

You can run SampleApp Project located in SampleApp folder. All the functions that provided by the package are testable through the SampleApp project.

Caution

Make sure to apply the effect AFTER setting the layout of the target view.
Since neumorphism UI uses shadows to express depth, transparent colors(alpha < 1) are NOT recommended as a background color.