How to make a custom component class & Apply It to components?

Admin

Jun 10, 2022

3 min.

As we use a storyboard, we use a label regularly in our designs, and in that, we use custom fonts to look better as per our design, but still use old fashion to change the font style and size. Now there is a simple solution to it, which is to make a class of a particular component style and give that class to that respective component.

Steps for the create Component:

First Option :
Step 1:
Create a New Folder in project -> In that New Folder create a New Swift File, with filename ComponentThemeClass.swift (eg. LabelThemeClass.swift)

Step 2.1:
Open ComponentThemeClass.swift and create a New Class with the name ComponentFontThemeSize.swift (eg. LabelAvenirBoldTheme16)

class LabelPromptMediumTheme12: UILabel {

override init(frame: CGRect) {

super.init(frame: frame)

setup()

}

required init?(coder: NSCoder) {

super.init(coder: coder)

// This will call `awakeFromNib` in your code

setup()

}

private func setup() {

self.textColor = .black

self.font = UIFont(name: "Prompt-Medium", size: 12.0)

}

Step 3.1 :
Select the component and Change the class from the Identity Inceptor

Second option :

Now, we will see another example of UIButton,

Step 1 and Step 3 will be the same as the previous method, we have to modify only the step 2

Step 2.2

class ButtonRedCornerRadiusExtraBoldTheme : UIButton {

override init(frame: CGRect) {

super.init(frame: frame)

setup()

}

required init?(coder: NSCoder) {

super.init(coder: coder)

// This will call `awakeFromNib` in your code

setup()

}

private func setup() {

self.layer.cornerRadius = 15

self.backgroundColor = UIColor.appRedBGColor

self.setTitleColor(.white, for: .normal)

self.titleLabel?.font = UIFont(name: "Prompt-ExtraBold", size: 16.0)

self.titleLabel?.textColor = .white

self.layer.cornerRadius = 20

self.layer.borderWidth = 1.5

self.layer.borderColor = UIColor.appRedBGColor.cgColor

self.layer.masksToBounds = false

self.layer.shadowOffset = CGSize(width: -1, height: 1)

self.layer.shadowRadius = 1

self.layer.shadowOpacity = 0.5

}

Step 3.2:
Select the component and Change the class from the Identity Inceptor

Conclusion:

This will help us to reusable the class. After applying to the many components, if we want to change font style or size, we have to make the changes in the following class. It will automatically reflect the respective component. Looking for hire iOS App developers then iRoid solutions has Brilliant Engineers.

Recent Blog Posts