Inspiration
When you look for inspiration whether it be from the great mind of yourself, or from sites like dribble. Like the example above, we can see multiple buttons and labels that could be reusable.
Creating programmatic stored properties with the same methods is tedious and unnecessary. If it doesn’t follow the DRY concept then refactor it.
- D: Don’t
- R: Repeat
- Y: Yourself
When writing code, and we notice that these two stored properties share some common interest.
let articleTitle: UILabel = {
let articleTitle = UILabel()
articleTitle.translateAutoresizeMaskIntoConstraints = false
articleTitle.font = UIFont.systemFont(ofSize: 14, weight: .semibold)
articleTitle.textColor = .white
articleTitle.numberOfLines = 0
return articleTitle
}()
- translatesAutoresizingMaskIntoConstraints = false
- font = UIFont.systemFont()
- textColor = .white
This is six lines of unwanted code, let's implement a style file that will assist with fixing this issue!
class TestUIStyle: UILabel {
enum Style {
/*
I usually determine my cases based on the needs of the project. Let's try to get some of the details in order.
*/
// HomeView
case title, header
}
}
I created a new Swift file and named it TestUIStyle. The style that I want to mimic is for labels, I am gonna subclass it as a UILabel and start with an enum called "Style". As you can see I have determined from our dribble image that we have a ton of labels that are gonna follow suit.
let style: Style
init(style: Style, text: String) {
self.style = style
super.init(frame: .zero)
self.text = text
setupStyling()
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
private func setupStyling() {
}
Now we are gonna create a constant and set it to our enum and initialize it. This allows us to choose which style wants and the given text that you would like when creating it in our ViewControllers. The "text: String" is optional and it's not a requirement if you prefer not to.
private func setupStyling() {
translatesAutoresizingMaskIntoConstraints = false
numberOfLines = 0
switch style {
case .header:
font = .systemFont(ofSize: 20, weight: .bold)
textColor = .label
case .title:
font = .systemFont(ofSize: 14, weight: .light)
textColor = .white
default:
font = .systemFont(ofSize: 12, weight: .regular)
textcolor = .yellow
}
}
As you can see with each style that is being switched they have their own set attributes but they all conform to two things that we need from them all.
- translatesAutoResizingMaskIntoConstraints = false
- numberOfLines = 0
Let's see how this style file can go from what we had before to now!
// New code from the style
let articleTitle = TestUIStyle(style: .title, text: "Medium"
let articleHeader = TestUIStyle(style: .header, text: "Name of Source"
// Old code from the style
let articleTitle: UILabel = {
let articleTitle = UILabel()
articleTitle.translatesAutoresizingMaskIntoConstraints = false
articleTitle.font = UIFont.systemFont(ofSize: 14, weight: .semibold)
articleTitle.textColor = .white
articleTitle.numberOfLines = 0
return articleTitle
}
Cleaning up unwanted code could be a huge time saver when working with programmatic UI. We are able to bring everything down to two lines.
Here is the full sample code for viewing! Hope you’re just like me and prefer your things DRY!
import Foundation
import UIKit
class TestUIStyle: UILabel {
enum Style {
// HomeView
case header, description, title, dates, author
// ArticleDetailView
case detailTitle, detailDate, detailAuthor, detailPaper, detailContent
// CollectionView
case collectionTitle, collectionAuthor
}
let style: Style
init(style: Style, text: String) {
self.style = style
super.init(frame: .zero)
self.text = text
setupStyling()
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
private func setupStyling() {
translatesAutoresizingMaskIntoConstraints = false
numberOfLines = 0
switch style {
case .header:
font = .systemFont(ofSize: 20, weight: .bold)
textColor = .label
case .title:
font = .systemFont(ofSize: 14, weight: .light)
textColor = .white
default:
font = .systemFont(ofSize: 12, weight: .regular)
textColor = .yellow
}
}
}
Top comments (0)