How to create a reusable button class with a stack view in UIKit?

Question

I'm using a class to build a reusable button (image below) that uses a stack view to position two labels vertically, and allows me to configure both labels' text when called.

I tried to add "label" and "subLabel" into a UIStackView in the init method below, but the stack isn't being added onto the button's view.

What would be the best way to integrate a stack view into this custom button class?

struct ActivityButtonVM {
    let labelText: String
    let subLabelText: String
    let action: Selector
}

final class ActivityButton: UIButton {
    private let label: UILabel = {
        let label = UILabel()
        label.textAlignment = .center
        label.textColor = .black
        
        return label
    }()
    
    private let subLabel: UILabel = {
        let label = UILabel()
        label.textAlignment = .center
        label.textColor = .gray
        
        return label
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)

        setBackgroundImage(Image.setButtonBg, for: .normal)
        
        let stack = UIStackView(arrangedSubviews: [label, subLabel])
        stack.axis = .vertical
        stack.alignment = .center
        addSubview(stack)
        clipsToBounds = true
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    func configure(with viewModel: ActivityButtonVM) {
        label.text = viewModel.labelText
        subLabel.text = viewModel.subLabelText
        self.addTarget(SetActivityVC(), action: viewModel.action,
                       for: .touchUpInside)
    }
}

This is how I'm using this custom button class:

class SetActivityVC: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupViews()
    }
    
    lazy var firstButton: UIButton = {
        let button = ActivityButton()
        button.configure(with: ActivityButtonVM(labelText: "No Exercise", subLabelText: "no exercise or very infrequent", action: #selector(didTapFirst))
        return button
    }()
    
    lazy var secondButton: UIButton = {
        let button = ActivityButton()
        button.configure(with: ActivityButtonVM(labelText: "Light Exercise", subLabelText: "some light cardio/weights a few times per week", action: #selector(didTapSecond))
        return button
    }()
    
    @objc func didTapFirst() {
        print("Tapped 1")
    }
    
    @objc func didTapSecond() {
        print("Tapped 2")
    }
}

extension SetActivityVC {
    fileprivate func setupViews() {
        addViews()
        constrainViews()
    }
    
    fileprivate func addViews() {
        view.addSubview(firstButton)
        view.addSubview(secondButton)
    }
    
    fileprivate func constrainViews() {
        firstButton.centerXToSuperview()
        
        secondButton.centerXToSuperview()
        secondButton.topToBottom(of: firstButton, offset: screenHeight * 0.03)
    }
}

Answer 1

First, you are not calling your init(frame:) when initialising your buttons:

let button = ActivityButton()

You are just calling the initialiser you inherited from NSObject, so of course the stack views are not added.

You can add a parameterless convenience initialiser yourself, that calls self.init(frame:):

convenience init() {
    self.init(frame: .zero)
}

and then the stack views will be added.

I think you would also need to add:

stack.translatesAutoresizingMaskIntoConstraints = false

to stop the autoresizing mask constraints from causing the stack view to have a .zero frame.

Additionally, you should add constraints to the stack view so that it is positioned correctly with respect to the button. (probably pin the 4 sides to the button's 4 sides?)

Last but not least, the way that you are adding the target is incorrect. You are adding a new instance of SetActivityVC as the target here, rather than the instance of the VC that has the button.

self.addTarget(SetActivityVC(), action: viewModel.action,
    for: .touchUpInside)

Instead, if you want to do this with target-action pairs, you should include the target in the view model as well:

struct ActivityButtonVM {
    let labelText: String
    let subLabelText: String
    let target: Any // <----
    let action: Selector
}

...

self.addTarget(viewModel.target, action: viewModel.action,
    for: .touchUpInside)

---

Tip: rather than using colours such as .black and .gray, use .label and .secondaryLabel so that it also looks good in dark mode.