Reusable Components for Scalable Projects with UIKit Programmatically Swift 5

5 min readDec 1, 2022

Introduction

When you want to make large scalable project from zero you have to think what reusable component are needed for making the app such as reusable label, button, etc based on high-fidelity prototype design that you make. I implement this method while creating on Fluffi App (Created while joining Apple Developer Academy @BINUS), an app that connects pet owner and pet hotel so that owner can find a reliable place to leave their pets while they are away. Fluffi have large feature and pages such as explore nearest pet hotels, reserve pet hotels based on needs, track pet updates, and many more. So i have to implement Reusable Component on this project.

Benefits Reusable Component for Your Scalable Project

Some of the advantages that can be obtained when using this method are:

More effective and less time consuming in repeated code applications
Minimizing errors in writing code
More readable code because of clean code
Easy to debug if there is error on component
Reduce size memory because of less code

Example Reusable Component

On this article, i’ll show you how to implement reusable component that i already done in fluffi app by creating Reusable Label.

Let’s say you already have the design style guide for font, size, and color like shown below.

If you don’t make the reusable component you will write to every code that needed the label like this:

instead of doing like that you can simply make custom reusable label type like below:

See the powerful of reusable label, you can simply turn much much line of code within only 1 line of code for every label.

How to Make Reusable Label as a Type Reference

1. Import Font and Create Color Asset also Create Reusable Label Component New Swift Class UILabel

On Xcode you need to download and impor the custom font (on this tutorial Poppins-Bold) and set the custom color from the asset menu.

Setup Custom Colors Based on Style Guide

after that you will need to create new file by clicking cmd+n, click Cocoa Touch Class and set the class to ReusableLabel and subclass to UILabel:

2. Create Enum for Custom Label Based on Style Guide

Enum is a data type having a fixed set of constants which you define yourself. So we want make custom label for H1, H2, and H3 for font and size also the color black, grey1, grey2, grey3, and white based on Style Guide.

import UIKit

class ReusableLabel: UILabel {
    
    enum labelTypeEnum {
        case H1
        case H2
        case H3
    }
    
    enum colorStyle {
        case black
        case grey1
        case grey2
        case grey3
        case white
    }

    //...
}

3. Create Variable and Set Init

Then you can create variable and set init for reusableLabel Type.

//...
public private(set) var labelText: String //For Title Text
public private(set) var labelType: labelTypeEnum //For Label Type (H1,H2,H3)
public private(set) var labelColor: colorStyle // For Label Color
    
init(labelText: String, labelType: labelTypeEnum, labelColor: colorStyle) {
    self.labelText = labelText
    self.labelType = labelType
    self.labelColor = labelColor
        
    super.init(frame: .zero)
    self.configureLabelStyle() //Setup Label Style
    self.configureLabelColor() //Setup Label Color

    self.translatesAutoresizingMaskIntoConstraints = false //For AutoLayout
    let attributedString = NSMutableAttributedString(string: labelText)
    self.attributedText = attributedString //Setup Label to AttributedString for custom font
}
    
required init?(coder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}
//...

4. Configure Label Style and Color Based on Style Guide

After that we need to configure label color and style based on the style guide using switch case like shown below.

//...
private func configureLabelColor() {
    switch labelColor {
    case .black:
        self.textColor = UIColor(named: "black")
    case .grey1:
        self.textColor = UIColor(named: "grey1")
    case .grey2:
        self.textColor = UIColor(named: "grey2")
    case .grey3:
        self.textColor = UIColor(named: "grey3")
    case .white:
        self.textColor = UIColor(named: "white")
    }
}
    
private func configureLabelStyle() {
    switch labelType {
    case .H1:
        self.font = UIFont(name: "Poppins-Bold", size: 24)
    case .H2:
        self.font = UIFont(name: "Poppins-Bold", size: 16)
    case .H3:
        self.font = UIFont(name: "Poppins-Bold", size: 12)
    }
}
//...

Here is the full code of reusableLabel component that we have created:

import UIKit

class ReusableLabel: UILabel {
    
    enum labelTypeEnum {
        case H1
        case H2
        case H3
    }
    
    enum colorStyle {
        case black
        case grey1
        case grey2
        case grey3
        case white
    }
    
    public private(set) var labelType: labelTypeEnum
    public private(set) var labelText: String
    public private(set) var labelColor: colorStyle
    
    init(labelText: String, labelType: labelTypeEnum, labelColor: colorStyle) {
        self.labelText = labelText
        self.labelType = labelType
        self.labelColor = labelColor
        
        super.init(frame: .zero)
        self.configureLabelStyle()
        self.configureLabelColor()
        
        self.translatesAutoresizingMaskIntoConstraints = false //For AutoLayout
        let attributedString = NSMutableAttributedString(string: labelText)
        self.attributedText = attributedString //Setup Label to AttributedString for custom font
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func configureLabelColor() {
        switch labelColor {
        case .black:
            self.textColor = UIColor(named: "black")
        case .grey1:
            self.textColor = UIColor(named: "grey1")
        case .grey2:
            self.textColor = UIColor(named: "grey2")
        case .grey3:
            self.textColor = UIColor(named: "grey3")
        case .white:
            self.textColor = UIColor(named: "white")
        }
    }
    
    private func configureLabelStyle() {
        switch labelType {
        case .H1:
            self.font = UIFont(name: "Poppins-Bold", size: 24)
        case .H2:
            self.font = UIFont(name: "Poppins-Bold", size: 16)
        case .H3:
            self.font = UIFont(name: "Poppins-Bold", size: 12)
            
        }
    }
}

And, Done..

you can try the component in view controller and set the label using ReusableLabel Type like shown below:

import UIKit

class ViewController: UIViewController {
    
    let label: ReusableLabel = ReusableLabel(labelText: "This is Title", labelType: .H1, labelColor: .black)

    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.backgroundColor = .white
        
        view.addSubview(label)
        NSLayoutConstraint.activate([
            label.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            label.centerYAnchor.constraint(equalTo: view.centerYAnchor)
        ])
    }
}

ReusableLabel for H1 Type and Black Color

You can implement this method into other reusable component such as button, custom bar, or anything that you think you want to reuse it frequently! Thanks for reading.