Programatically set frame size of labels inside UIButton - swift

Question

I have a custom UIButton that I created. Inside the button I have 2 labels, one above the other. The top one is the title so it is a little bigger, and the bottom one is a bit smaller.
My goal is to have both labels cover the whole button exactly, like this:
The top label will cover the top 2/3 part of the button, and the bottom will cover the rest 1/3 of the button.
My goal is not far from being reached, but I get weird behavior - the labels are a little out of the button, and in some cases they disappear(I can click on the button but cannot see the labels).
This is my custom UIButton for reference, I hope this code will help people regardless to my issue:
class ButtonWithStats: UIButton {
var num: Int
var name: String
var nameLabel: UILabel?
var numLabel: UILabel?
required init?(coder aDecoder: NSCoder) {
// fatalError("init(coder:) has not been implemented")
self.num = 0
self.name = ""
self.numLabel = UILabel(frame: CGRect(x: 0, y: 0, width: 0, height: 0)) //just to init the labels.
self.nameLabel = UILabel(frame: CGRect(x: 0, y: 0, width: 0, height: 0))
self.numLabel?.textAlignment = .center
self.nameLabel?.textAlignment = .center
self.numLabel?.textColor = UIColor.purple
self.nameLabel?.textColor = UIColor.black
self.numLabel?.font = UIFont.init(name: "Helvetica", size: 11)
self.nameLabel?.font = UIFont.init(name: "Helvetica", size: 13)
super.init(coder: aDecoder)
}
func setButton(numInput: Int, nameInput: String){
self.num = numInput
self.name = nameInput
self.setLabels()
}
private func setLabels(){
numLabel?.text = String(self.num)
nameLabel?.text = self.name
let widthForName = self.frame.width
let heightForName = self.frame.height * 2 / 3
nameLabel?.center = self.center
nameLabel?.frame = CGRect(origin: self.frame.origin, size: CGSize(width: widthForName, height: heightForName))
let widthForNum = self.frame.width
let heightForNum = self.frame.height * 1 / 3
let yForNum = (self.frame.height * 2 / 3) //+ self.frame.origin.y
numLabel?.frame = CGRect(x: self.frame.origin.x, y: yForNum, width: widthForNum, height: heightForNum)
self.addSubview(nameLabel!)
self.addSubview(numLabel!)
print("#########################")
print("Button \(self.nameLabel?.text) frame is: \(self.frame)")
print("Label frame is: \(self.nameLabel?.frame)")
print("Num frame is: \(self.numLabel?.frame)")
print("#########################")
}
}
my console prints this data:
#########################
Button Optional("button one") frame is: (257.5, 0.0, 64.5, 33.0)
Label frame is: Optional((257.5, 0.0, 64.5, 22.0))
Num frame is: Optional((257.5, 22.0, 64.5, 11.0))
#########################
#########################
Button Optional("Button two") frame is: (129.0, 0.0, 64.0, 33.0)
Label frame is: Optional((129.0, 0.0, 64.0, 22.0))
Num frame is: Optional((129.0, 22.0, 64.0, 11.0))
#########################
#########################
Button Optional("Button three") frame is: (0.0, 0.0, 64.5, 33.0)
Label frame is: Optional((0.0, 0.0, 64.5, 22.0))
Num frame is: Optional((0.0, 22.0, 64.5, 11.0))
#########################

Answer 1

Rather than add 2 labels, how about setting the numberOfLines on the UIButtons's textLabel?
button.titleLabel?.numberOfLines = 2
Or alternatively, add a vertical UIStackView, with the 2 labels as subviews, and set stackView.frame = button.bounds
let stackView = UIStackView(arrangedSubviews: [numLabel, nameLabel])
stackView.frame = buttonView.bounds
addSubview(stackView)
You can adjust the stackView.spacing / layoutMargins etc, to position the labels as required
To make the numLabel twice the height of the nameLabel, you could use set constraints using…
numLabel.heightAnchor.constraint(equalTo: nameLabel.heightAnchor, multiplier: 2)
I'd recommend you do this in a storyboard / xib, but if you need to do it programatically, you might find it useful create a xib to experiment with the UIStackView settings.