Recreate a Dribbble App Design with UIKit Episode 1 — Part 2

This article will guide you through my thought process and approach to programmatically recreating a cool UI design.

Recreating Dribbble Designs

Welcome back to the article series(missed part one? click here ) on how I recreated this Dribbble design using UIKit. Picking up right where we left off…it seems that I may have promised you guys some ‘pills’…didn’t I?

The approach to this was a bit of an interesting one,

1. I created a custom UIView, styled in the shape of the ‘pills’ — some background color with rounded corners and some text on the inside.
2. Added them to a horizontal UIStackview (distributed equally).
3. Placed the UIStackview within the parent view.

Here’s how the custom UIView was made, I’ve called it a CategoryView

//CategoryView inherts from UIView
class CategoryView: UIView {

    override init(frame: CGRect) {
        super.init(frame: frame)
    
        configViews()
        configConstraints()
    }
            
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

//This view contains a UILabel,
// which will be used to set the text for the 'pills'
    var categoryLbl: UILabel =…