Introduction

Hi, Humans!

My name is Hamza Farooq and I love 'Swift' programming. I always try to implement new ideas, so here is another glimps of one of my new work for you. Do check HFLoader also... :-)

HFSoftUI

A simple and short extension for Neumorphic Effect in Swift (also know as SoftUI). Try this new effect in your projects and enhance the UI experience.

Gifs

Images

Example

To run the example project, clone the repo, and simply run HFSoftUI.xcodeproj from the 'HFSoftUI' directory.

Simple Usage

Do the following simple steps to make an awesome Neumorphic Effect.

Simply download and place the file named HFSoftUI.swift in your project anywhere. (Click on this link, this will take you to the directory where HFSoftUI file is placed)

Now let's suppose we have a View and a Button in your ViewController:

@IBOutlet weak var myView: UIView!
@IBOutlet weak var myButton: UIButton!

let HFSoftUIColor = #colorLiteral(red: 0.8745098039, green: 0.8941176471, blue: 0.9333333333, alpha: 1) // for light color scheme
// let HFSoftUIColor = #colorLiteral(red: 0.2605174184, green: 0.2605243921, blue: 0.260520637, alpha: 1) // for dark color scheme

You can apply Neumorphic Effect as follows:

• For UIView

myView.HFSoftUIView(backgroundColorValue: HFSoftUIColor)

• For UIButton

myButton.HFSoftUIButton(backgroundColorValue: HFSoftUIColor)

And that's it. Your eyes will witness a nice Neumorphic Effect, (Well... Maybe not yet. :-D). Let's dive deeper to get things working.

First thing to keep in mind that your color scheme must matches for the Neumorphic Effect to appear properly on your mobile screen. secondly, add the above line of code in your controller's viewDidAppear() (if and only if you are not creating the view by programmatic approach. If you create a UIView or UIButton programmatically, then you use HFSoftUI anywhere for that view or Button after setting their frame - I suppose... :-D) as:

override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        
        self.view.backgroundColor = HFSoftUIColor // changing background color also to match the color scheme
        myView.HFSoftUIView(backgroundColorValue: HFSoftUIColor)
        myButton.HFSoftUIButton(backgroundColorValue: HFSoftUIColor)
        
    }

This will create light color scheme Neumorphic Effect similar to the one showing in First Screen Shot

NOTE: Again, you have to write this in viewDidAppear rather than viewDidLoad() or viewWillAppear() because the extension uses one's frame to form this effect, and that frame is not yet known at the time of viewDidLoad and viewWillAppear if that view or button is not created progmmatically. So its better to use viewDidAppear.

Advance Usage

• You can use HFSoftUI for TableView as well as CollectionView. The word 'Advance' is just to scare you. Just write below lines of code in your cellForRowAt for TableView and cellForItemAt for CollectionView:

DispatchQueue.main.async {
               cell.myView.HFSoftUIView(backgroundColorValue: HFSoftUIColor)
        }

• You can also use HFSoftUI for nested views as well. This will make a very nice and soft touching UI that will surely catches your eye)

DispatchQueue.main.async {
        
            cell.cellImageView.layer.cornerRadius = 4
            
            cell.cellOuterView.HFSoftUIView(backgroundColorValue: HFSoftUIColor, isDarkColorScheme: isDarkColorScheme, isUpperWhiteRequired: isUpperWhiteRequired)
            cell.cellImageOuterView.HFSoftUIView(backgroundColorValue: HFSoftUIColor, isDarkColorScheme: isDarkColorScheme, isUpperWhiteRequired: isUpperWhiteRequired)
            
            cell.acceptButtonOutlet.HFSoftUIButton(backgroundColorValue: HFSoftUIColor, isDarkColorScheme: isDarkColorScheme, isUpperWhiteRequired: isUpperWhiteRequired)
            cell.rejectButtonOutlet.HFSoftUIButton(backgroundColorValue: HFSoftUIColor, isDarkColorScheme: isDarkColorScheme, isUpperWhiteRequired: isUpperWhiteRequired)
            
        }

DispatchQueue.main.async {
               
            cell.cellImageView.layer.cornerRadius = cell.cellImageView.frame.height / 2
            
            cell.cellOuterView.HFSoftUIView(backgroundColorValue: HFSoftUIColor, isDarkColorScheme: isDarkColorScheme, isUpperWhiteRequired: isUpperWhiteRequired)
            cell.cellImageOuterView.HFSoftUIView(backgroundColorValue: HFSoftUIColor, cornerRadiusValue: cell.cellImageOuterView.frame.height / 2, isDarkColorScheme: isDarkColorScheme, isUpperWhiteRequired: isUpperWhiteRequired)
            
            cell.acceptButtonOutlet.HFSoftUIButton(backgroundColorValue: HFSoftUIColor, cornerRadiusValue: cell.acceptButtonOutlet.frame.height / 2, isDarkColorScheme: isDarkColorScheme, isUpperWhiteRequired: isUpperWhiteRequired)
            cell.rejectButtonOutlet.HFSoftUIButton(backgroundColorValue: HFSoftUIColor, cornerRadiusValue: cell.rejectButtonOutlet.frame.height / 2, isDarkColorScheme: isDarkColorScheme, isUpperWhiteRequired: isUpperWhiteRequired)
            
        }

Change Properties / Customization

You can adjust/customize HFSoftUI. These are some properties that you can play with to change its appearance:

• cornerRadius
• backgroundColor
• shadowRadius
• shadowOpacity
• isDarkColorScheme
• isUpperWhiteRequired

Example 1:

This will create round button with Neumorphic Outward Effect

self.myButton.HFSoftUIButton(backgroundColorValue: HFSoftUIColor, cornerRadiusValue: self.myButton.frame.height / 2)

Now Set isDarkColorScheme to 'true'

self.myButton.HFSoftUIButton(backgroundColorValue: HFSoftUIColor, cornerRadiusValue: self.myButton.frame.height / 2, isDarkColorScheme: true)

Example 2:

This will create corner button with Neumorphic Outward Effect

self.myButton.HFSoftUIButton(backgroundColorValue: HFSoftUIColor)

Now Set isDarkColorScheme to 'true'

self.myButton.HFSoftUIButton(backgroundColorValue: HFSoftUIColor, isDarkColorScheme: true)

Example 3:

This will create corner button with Neumorphic Intward Effect

self.myButton.HFSoftUIButton(shadowRadiusValue: -2.0, backgroundColorValue: HFSoftUIColor)

Now Set isDarkColorScheme to 'true'

self.myButton.HFSoftUIButton(shadowRadiusValue: -2.0, backgroundColorValue: HFSoftUIColor, isDarkColorScheme: true)

Key Notes

You can set isDarkColorScheme to 'true' or 'false' depending upon your color scheme. You can also set isUpperWhiteRequired to 'true' or 'false' depending upon your color scheme. Play with these two variables to achieve better results. If you are using dark scheme, and still Neumorphic Effect is not appearing properly, make isUpperWhiteRequired property true, fingers crossed... :-D // NOTE TAHT Neumorphic Effect WILL NOT APPEAR ON EVERY COLOR SCHEME -_-

Contributions

Your contributions are most welcomed. Do let me know if you find any kind of issue while using this file. Please open an issue to discuss that problem. Thanks

Auther

Hamza Farooq, hamza_faroooq@yahoo.com

License

MIT (Click Me O_o)