@IBDesignable And @IBInspectable in Swift

Khushboo Gupta

31 January 2022

Hello guys, Today we learn about @IBDesignable And @ IBInspectable in Swift.

What is @IBDesignable And @ IBInspectable in Swift:-

@IBDesignable:- When we want to change our custom outlet design from the StoaryBoard or .xib files at a time we will use @IBDesignable functionality. for this, we need to create a class and mark that class name with the @IBDesignable attribute.

@IBInspectable:- When we want to make some part of the custom view subclass configurable inside the @IBInspectable builder it allows us to create an attribute that is assigned in storyboard or .xib

@IBDesignable class ViewCLass: UIView {
   
    @IBInspectable var cornerRadius: Double {
// code
}
}

@IBDesignable class ViewCLass: UIView {

@IBInspectable var cornerRadius: Double {

// code

}

Getting Start:- Let’s take an example, I am taking a view and TextView and want to change their design like I want to give some shadow, the border with, and borderColor to the view outlet and set some padding in my textView

step1:- Firstly, create a new Xcode project.

File-> New-> Project-> Choose Ios-> choose App-> next and Add your project name then create.

Step2:- Then, take a View or textView

Firstly, drag and drop the View in Storyboard.
Secondly, drag and drop TextView in Stoaryboard.

Step 3:- Then, create a new swift class

File–> New–> File–> Select Cocoa Touch class –> and create a class

Step4:- Now, write the code

import UIKit

@IBDesignable class ViewCLass: UIView {
   
    @IBInspectable var cornerRadius: Double {
         get {
           return Double(self.layer.cornerRadius)
         }set {
           self.layer.cornerRadius = CGFloat(newValue)
         }
    }
    @IBInspectable var borderWidth: Double {
          get {
            return Double(self.layer.borderWidth)
          }
          set {
           self.layer.borderWidth = CGFloat(newValue)
          }
    }
    @IBInspectable var borderColor: UIColor? {
         get {
            return UIColor(cgColor: self.layer.borderColor!)
         }
         set {
            self.layer.borderColor = newValue?.cgColor
         }
    }
    @IBInspectable
    var shadowColor: UIColor? {
        get {
           return UIColor(cgColor: self.layer.shadowColor!)
        }
        set {
           self.layer.shadowColor = newValue?.cgColor
        }
    }
    @IBInspectable
    var shadowOpacity: Float {
        get {
           return self.layer.shadowOpacity
        }
        set {
           self.layer.shadowOpacity = newValue
       }
    }

}

import UIKit

@IBDesignable class ViewCLass: UIView {

@IBInspectable var cornerRadius: Double {

get {

return Double(self.layer.cornerRadius)

}set {

self.layer.cornerRadius = CGFloat(newValue)

}

@IBInspectable var borderWidth: Double {

get {

return Double(self.layer.borderWidth)

}

set {

self.layer.borderWidth = CGFloat(newValue)

}

@IBInspectable var borderColor: UIColor? {

get {

return UIColor(cgColor: self.layer.borderColor!)

}

set {

self.layer.borderColor = newValue?.cgColor

}

@IBInspectable

var shadowColor: UIColor? {

get {

return UIColor(cgColor: self.layer.shadowColor!)

}

set {

self.layer.shadowColor = newValue?.cgColor

}

@IBInspectable

var shadowOpacity: Float {

get {

return self.layer.shadowOpacity

}

set {

self.layer.shadowOpacity = newValue

}

This code is for UIView outlets like- View.

@IBDesignable class TextViewWithInsets: UITextView {

    @IBInspectable
    var topInset: CGFloat = 0 {
        didSet {
            self.contentInset = UIEdgeInsets(top: topInset, left: self.contentInset.left, bottom: self.contentInset.bottom, right: self.contentInset.right)
        }
    }

    @IBInspectable
    var bottmInset: CGFloat = 0 {
        didSet {
            self.contentInset = UIEdgeInsets(top: self.contentInset.top, left: self.contentInset.left, bottom: bottmInset, right: self.contentInset.right)
        }
    }

    @IBInspectable
    var leftInset: CGFloat = 0 {
        didSet {
            self.contentInset = UIEdgeInsets(top: self.contentInset.top, left: leftInset, bottom: self.contentInset.bottom, right: self.contentInset.right)
        }
    }

    @IBInspectable
    var rightInset: CGFloat = 0 {
        didSet {
            self.contentInset = UIEdgeInsets(top: self.contentInset.top, left: self.contentInset.left, bottom: self.contentInset.bottom, right: rightInset)
        }
    }
}

@IBDesignable class TextViewWithInsets: UITextView {

@IBInspectable

var topInset: CGFloat = 0 {

didSet {

self.contentInset = UIEdgeInsets(top: topInset, left: self.contentInset.left, bottom: self.contentInset.bottom, right: self.contentInset.right)

}

@IBInspectable

var bottmInset: CGFloat = 0 {

didSet {

self.contentInset = UIEdgeInsets(top: self.contentInset.top, left: self.contentInset.left, bottom: bottmInset, right: self.contentInset.right)

}

@IBInspectable

var leftInset: CGFloat = 0 {

didSet {

self.contentInset = UIEdgeInsets(top: self.contentInset.top, left: leftInset, bottom: self.contentInset.bottom, right: self.contentInset.right)

}

@IBInspectable

var rightInset: CGFloat = 0 {

didSet {

self.contentInset = UIEdgeInsets(top: self.contentInset.top, left: self.contentInset.left, bottom: self.contentInset.bottom, right: rightInset)

}

This code indicates for textView – it is used for padding purposes.

Here we are using the did Set or get Set method so here is what is did Set and get Set method in swift?

GetSet:- To write a value we use the set method and to read a value we use the get method. The common use would be data handling with persistent storage.

DidSet:- didSet is called right after the data is stored and it has a default constant that shows the previous value that is overwritten.

Output:- Now, run your project and see the result.

Conclusion:-

In this blog, we discussed @IBdesignable And @ IBInspectable in Swift

I hope this blog will help you to understand the working of @IBdesignable And @ IBInspectable in Swift

Thanks for reading!!!