Neumorphism is a design style using shadows below or above the elements to make convex or concave effects.
- iOS 11.0+
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")
]
Use Cocoapods by adding following line to Podfile:
pod "CHNeumorphismView", "~> 1.0.0"
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 |
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 .whiteYou can run SampleApp Project located in SampleApp folder.
All the functions that provided by the package are testable through the SampleApp project.
- 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.