Skip to content

lygon55555/neumorphic-view

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

40 Commits
 
 
 
 
 
 

Repository files navigation

스크린샷 2020-10-19 오후 4 17 50

Neumorphic-View

With IBDesignable NeumorphicView Class, you can easily add neumorphic-views on storyboards.
Inspired by Alexplyuto's Neumorphism design.

How to use

  1. Add NeumorphicView.swift to your project folder or copy the code.
  2. Go to your storyboard, and add an UIView.
  3. Open the Identity Inspector and type NeumorphicView the Class field.
    스크린샷 2020-10-07 오후 3 43 14
  4. On the Attributes Inspector, change the values whatever you want.
    스크린샷 2020-10-07 오후 3 43 21

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.

스크린샷 2020-10-07 오후 2 51 03 스크린샷 2020-10-07 오후 2 51 11 스크린샷 2020-10-07 오후 2 51 18 스크린샷 2020-10-07 오후 2 51 25
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.

스크린샷 2020-10-07 오후 2 54 33 스크린샷 2020-10-07 오후 2 54 39 스크린샷 2020-10-07 오후 2 54 45 스크린샷 2020-10-07 오후 2 54 52
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.

스크린샷 2020-10-19 오전 10 57 29 스크린샷 2020-10-19 오전 10 57 35 스크린샷 2020-10-19 오전 10 57 42 스크린샷 2020-10-19 오전 10 57 49
Intensity = 10 Intensity = 20 Intensity = 30 Intensity = 40

References

About

iOS IBDesignable Neumorphic View in Swift

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages