Setting cornerRadius of layer for a view embedeed in stack view gives unexpected results

Question

ModernBoldButton is a subclass of UIButton , here is a snippet of it:

private func commonInit() {
    insertSubview(blurView, at: 0)
    if let imageView = imageView {
        bringSubviewToFront(imageView)
    }
    if let titleLabel = titleLabel {
        bringSubviewToFront(titleLabel)
    }
    backgroundColor = .clear
    clipsToBounds = true
}

override func layoutSubviews() {
    super.layoutSubviews()
    layer.cornerRadius = bounds.width / 2
}

I have four UIButton's embedeed in stack view and as you can see on the screenshot, all of the buttons have incorrect shapes, they should look like a circle.

I suspect that I should set the cornerRadius somewhere else in my code, but where?

Answer 1

In order for them to look like a circle, your bounds must be a square . It appears that this is not the case for your buttons (the width is larger than the height).

You could add some constraints to your buttons in order to maintain a 1/1 ratio.

Other than that, you're setting it in the right place.

Answer 2

Rounding to with/2 will completely rounded top and bottom sides (eye shape 👁) Rounding to height/2 will completely rounded left and right sides (like this () )

So if you want a circle, you need to make sure both width and height sizes are the same like a square.

In order to doo it automatically, you can use autolayout and the stackView will take care of the sizing:

self.translatesAutoresizingMaskIntoConstraints = false
self.heightAnchor.constraint(equalTo: self.widthAnchor).isActive = true

Make sure to do it just once to avoid duplications.