How to add corner radius to UIStackView and mask subviews

Question

I use a simple subclass for UIStackView to add background color for it:

    func backgroundColor(_ color: UIColor?) {
        backgroundView.backgroundColor = color
    }

    func cornerRadius(_ radius: CGFloat) {
        backgroundView.clipsToBounds = true
        backgroundView.layer.cornerRadius = radius
    }

The problem is that corner radius using custom view as a container, won't mask arrangedSubviews. I was trying to fix that by overriding addArrangedSubview method:

    override func addArrangedSubview(_ view: UIView) {
        super.addArrangedSubview(view)
        view.mask = backgroundView
    }

But it makes weird things and spamming to console:

- changing property mask in transform-only layer, will have no effect

Possibly related: https://stackoverflow.com/questions/32456727/changing-property-maskstobounds-in-transform-only-layer-will-have-no-effect-i/33926542 https://stackoverflow.com/questions/33185720/changing-property-contentsgravity-in-transform-only-layer-will-have-no-effect — Ahmad F, Aug 26 '19 at 23:27

score 1 · Accepted Answer · answered Aug 26 '19 at 23:20

Instead of adding background to stack view, you can add stack view as a child to the background and mask background with corners.

let wrapper = UIView()               // Creating background
wrapper.layer.cornerRadius = 10
wrapper.layer.masksToBounds = true
wrapper.backgroundColor = .yellow

let stack = UIStackView()            // Creating stack
stack.frame = wrapper.bounds
stack.autoresizingMask = [.flexibleWidth, .flexibleHeight]
wrapper.addSubview(stack)

How to add corner radius to UIStackView and mask subviews

1 Answers1