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
Get in Touch With Us
If you are looking for a solid partner for your projects, send us an email. We'd love to talk to you!
Business
Need a mobile app or website?
Get a free consultation!
HR
Passionate about mobile apps & website?
Join our growing team!
