Summary
Synth is the library integrated in CRED for using neuromorphic components in your application.
What is a neuromorphism? It is an impressionistic style that plays with light, shadow and depth to create a digital experience inspired by the physical world. At least that’s the definition. We encourage you to try and see what happens. If you make anything with St. Nicholas, please let us know. We look forward to seeing where you take him.
Setting
It can be easily integrated into cocoapods. Insert this line into your subfile:
Synthesizer
Requirements
Use
Types of embossing and stamping
Since it provides an extension through UIView, you can call it through any element of the user interface.
let embossedView = UIView()
embossedView.applyNeuStyle()
When you call applyNeuStyle on any view, the default embossing effect is created. In addition, NeuUIHelper has a getDebossModel() helper function that takes care of the debossing effect.
let debossedView = UIView()
debossedView.applyNeuStyle(model: NeuUIHelper.getDebossModel())
Apply style arguments
| Attribute | Description | Value |
|---|---|---|
| Model | A structure that allows you to define the base color, shadow direction and shadow corrections | NewViewModel |
| showOnlyShadows | If you allow it, only the outer or inner shadows are rendered, skipping the solid part of the background. | Boolean |
NewViewModel Properties
All colours are derived from the standard base colour. If necessary, you can explicitly convey different meanings.
| Attribute | Description | Value |
|---|---|---|
| baseColor | Base colour from which the background and borders are derived | UIColor |
| bgGradientColors | Color scheme representing the background | UIColor] |
| borderGradientColors | A colour scheme that sets the limits | UIColor] |
| borderGradientWidth | Width of outer frame | CGFloat |
| lightDirection | a count to determine the direction of the light | NewLightDirection |
| shadow type | A count that identifies the type of shadow, external or internal. | NewShadowType |
| lightShadowModel | Model for adjusting the shadow correction relative to the top shadow | NewShadowModel |
| darkShadowModel | Model to adjust the lower shadow correction. | NewShadowModel |
| blurAmount | the quantity of mucilage to be applied | CGFloat |
| hideLightShadow | hides the upper shadow | Boolean |
| hideDarkShadow | hides the lower shadow | Boolean |
| hide and seek | covers the outer edge | Boolean |
By default, there are four styles that can be applied via the UIB button:
élevéSoft // an embossed knob
élevéSoftRound // a round embossed knob
élevéFlat // a flat knob
élevéFlatRound // a round flat knob
Increased soft key
let softButton = UIB button()
softButton.applyNeuBtnStyle(type: .elevatedSoft, title: Idle)
Toggle
let roundButton = UIButton()
roundButton.applyNeuBtnStyle(type: .elevatedSoftRound, image: UIImage(name: plus))
Increased wrench
A flat, raised knob makes a flat surface to the surface of a raised neumorphic platform. This flat surface can be adjusted in two ways:
let flatButton = UIB button()
flatButton.applyNeuBtnStyle(type: .elevatedFlat, header: Idle)
You can also add a left-facing image to this image. The synthesizer draws a neumorphic well on which the image is displayed.
softButton.applyNeuBtnStyle(type: .elevatedSoft, title: Slacker, image: UIImage (name: plus), image size: 12)
softButton.applyNeuBtnStyle(type: .elevatedFlat, title: Slacker, image: UIImage (name: plus), image size: 12)
This button consists of three levels: baseModel, innerModel and ContentModel, named from bottom to top. The NeuButtonCustomModel allows you to customize each of these layers and the design button.
Summary of imports
let model = NeuConstants.NeuButtonCustomModel()
… some configuration
let customButton = UIB-button()
customButton.applyNeuBtnStyle(customModel : model, title : Custom Button)
This library works with a basic color concept and extracts the light and dark colors from the basic color itself. All views and buttons use this color to stylize neumorphic elements. This base color can be set when starting the application. Similarly, text attributes can be applied at the application level to give all neuromorphic keys a default style.
NewUtils.baseColor = UIColor.red
leave the text marks: NSAttributedString.key:Any] = [:]
textAttributes[.foregroundColor] = .black
NeuUtils.textAttributes = textAttributes
GitHub
Related Tags:
neumorphic icons, swift neumorphic, neumorphic theme, angular neumorphism, android:shape library, neumorphism examples, neumorphic ui kit figma, neomorphism swift uikit