neumorphic-view
neumorphic-view copied to clipboard
iOS IBDesignable Neumorphic View in Swift
Neumorphic-View
With IBDesignable NeumorphicView Class, you can easily add neumorphic-views on storyboards.
Inspired by Alexplyuto's Neumorphism design.
How to use
- Add
NeumorphicView.swift
to your project folder or copy the code. - Go to your storyboard, and add an UIView.
- Open the Identity Inspector and type
NeumorphicView
the Class field.
- On the Attributes Inspector, change the values whatever you want.
Shape of View
There are 4 types of shape.
Flat(0), Concave(1), Convex(2), Pressed(3)
Since Xcode doesn't support custom drop-down menu, you have to choose the type of shape by number.
![]() |
![]() |
![]() |
![]() |
---|---|---|---|
Flat | Concave | Convex | Pressed |
Direction of Shadow
There are 4 types of direction.
Top-Left(0), Top-Right(1), Bottom-Left(2), Bottom-Right(3)
You also hvae to choose the type of direction by number.
![]() |
![]() |
![]() |
![]() |
---|---|---|---|
Top-Left | Top-Right | Bottom-Left | Bottom-Right |
Intensity of Shadow
Opacity = 1, Shadow Radius = 25, Offset = 20
Check the differences when only changing the value of intensity.
![]() |
![]() |
![]() |
![]() |
---|---|---|---|
Intensity = 10 | Intensity = 20 | Intensity = 30 | Intensity = 40 |
References
- https://neumorphism.io/
- https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6
- https://medium.muz.li/skeuomorphism-neumorphism-ui-trend-e7b78792bd21