Adding Shadow with Rounding Corner in Swift 5 — Let Create An App

Adding shadow with rounding corner

Corner radius and shadow is the needed design in all the applications. Defining corner radius or shadow separately is very easy in iOS, but adding shadow with rounding the corner on the same view is bit challenging. If we define both on the same view with a common approach, only the corner radius will show up.

In this article, we will see how we can add shadow with rounded corners to view and buttons and we also refine the code and create a separate class to implement this functionality. So whenever we need to add a shadow with a rounded corner on the view, we only need to give this class to that view.

If you want to watch the video tutorial of this article, here you go:

Adding shadow with rounding corner

1. Create a New Swift Project

Open Xcode, Select App and click on next and give a proper name to the project and make sure to select the user interface should be Swift, and create the new project. Give the name according to your need.

2. Design the Basic Layout

First, we need to design the button or view on the screen, so we can add shadow and rounded corners on that button. You can change the design as per your need, this is just for demo purposes.

Let's drag and drop UIButton on the main.storyboard and give some basic constraints. Leading = 30, trailing = 30, vertically & horizontally center. After giving this constraint your main. storyboard look like this.

3. Provide Shadow and Rounding Corners

Before moving on to the coding part, we need to take the outlet of this button so we can assign properties to this button. Let’s take the outlet first.

@IBOutlet weak var btnSignup: UIButton!

Now, we need to give shadow and rounding the corner to this button, as we are giving them separately in our daily development process.

override func viewDidLoad() {
      super.viewDidLoad()
        
      // To round the corners
      btnSignup.layer.cornerRadius = 20
      btnSignup.clipsToBounds = true
      
      // To provide the shadow
      btnSignup.layer.shadowRadius = 10
      btnSignup.layer.shadowOpacity = 1.0
      btnSignup.layer.shadowOffset = CGSize(width: 3, height: 3)
      btnSignup.layer.shadowColor = UIColor.green.cgColor
}

Try to run the code and you will see the output something like the below image.

We can clearly see that there is no shadow on the button, the reason behind this issue is the ‘clipsToBounds’ property of the button. This property clips all the things which is moving out of its bounds. So it is clipping all the shadow parts.

So for resolving this issue, we need to add one more property to this button which is ‘masksToBounds’. This property works on layers and shadow is also working on layers. So we need to make ‘masksToBounds’ to false, by default this property is true.

Making ‘masksToBounds’ false, the layer will not clip the shadow and it will show on the button or any other view. Change the above code with the below code.

// To round the corners
btnShadow.layer.cornerRadius = 20
btnShadow.clipsToBounds = true
// To provide the shadow
btnShadow.layer.shadowRadius = 10
btnShadow.layer.shadowOpacity = 1.0
btnShadow.layer.shadowOffset = CGSize(width: 3, height: 3)
btnShadow.layer.shadowColor = UIColor.green.cgColor
btnShadow.layer.masksToBounds = false

Let’s run the code and see the magic.

Now the shadow is showing on the UIButton with clip to bound property. You can use the same approach to add shadow and rounding corners to any view.

4. Code Optimisation

Views are coming with shadow and rounding corners, but if this functionality is coming with almost all the views in the application then, the ViewController will become very messy. So separating the designing code from the business logic is a good option.

We will create one class that inherits UIView or UIButton in that class. This class is a core class to provide the shadow and rounding corner to the view, We only need to assign this class to a view or button and it will automatically show the shadow and rounding corner on that view. You can also use IBInspectable to make the option available on the storyboard, so can directly configure the shadow from the storyboard.

Let’s create one class named it ‘CustomButton’ and paste the below code in that class.

class CustomButton: UIButton {
     
   override init(frame: CGRect) {
       super.init(frame: frame)
       setRadiusAndShadow()
   }
     
   required init?(coder: NSCoder) {
       super.init(coder: coder)
       setRadiusAndShadow()
   }
     
   func setRadiusAndShadow() {
       layer.cornerRadius = 20
       clipsToBounds = true
       layer.shadowRadius = 10
       layer.shadowOpacity = 1.0
       layer.shadowOffset = CGSize(width: 3, height: 3)
       layer.shadowColor = UIColor.green.cgColor
       layer.masksToBounds = false
    }
}

Now assign this class to the btnSignup button on the storyboard and remove all the code related to design from the ViewController.swift file. This makes the class free from design coding and only business-related logic will place in the class.

We are good to go, now try to run the application. You can able to see the shadow on the button, without writing any code to give a shadow or rounding the corner to that button.

Download Resources for Adding Shadow with Rounding Corner to UIView in Swift 5

Download the source code of Adding Shadow with Rounding Corner to UIView in swift 5

I hope you like this tutorial and if you want any help let me know in the comment section.

Stay tuned, there is way more to come! follow me on Youtube, Instagram, Twitter. So you don’t miss out on all future Articles and Video tutorials.

. . .

I am delighted that you read my article! If you have any suggestions do let me know! I’d love to hear from you. ????

Originally published at https://letcreateanapp.com on June 30, 2021.