Go Back
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
Sagar Bhavsar
May 9, 2024
5 min
We are pleased to convey the exciting news that our unwavering pursuit of quality has been acknowledged worldwide.... Read More
Sagar Bhavsar
Mar 5, 2024
7min
The demand for mobile apps has increased across industries in recent years. Businesses across the globe are recognizing... Read More
Sagar Bhavsar
Dec 26, 2023
2min
Greetings, tech enthusiasts and digital aficionados! Hold onto your chai, because iRoid Solutions is elated to share some... Read More