How can I set the cornerRadius of a UIStackView?

Question

I'm updating my app to use UIStackViews, now that most people should have updated to iOS 9.

In the old version, I made a UIView consisting of two UITextFields and set its layer.cornerRadius property.

In the new version, I created a UIStackView consisting of the same two UITextFields, instead of the UIView. When I try setting its layer.cornerRadius property nothing seems to happen. The documentation doesn't seem to have any helpful/relevant information.

Solution 1

UIStackView just manages the position and size of its arranged views, the cornerRadius has no effect. Try to add a custom view below the stackView and set the cornerRadius of it.

Solution 2

add cornerRadius on stackview's superview and enable clipsToBounds property of the superview so that the subviews are confined to the bounds of the superview.

Solution 3

You can use an extension like this:

extension UIStackView {
    func customize(backgroundColor: UIColor = .clear, radiusSize: CGFloat = 0) {
        let subView = UIView(frame: bounds)
        subView.backgroundColor = backgroundColor
        subView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        insertSubview(subView, at: 0)

        subView.layer.cornerRadius = radiusSize
        subView.layer.masksToBounds = true
        subView.clipsToBounds = true
    }
}

Solution 4

If you want to provide backgroundColor, CornerRadius and Shadow to StackView:

extension UIStackView {
func insertCustomizedViewIntoStack(background: UIColor, cornerRadius: CGFloat, shadowColor: CGColor, shadowOpacity: Float, shadowRadius: CGFloat) {
        let subView = UIView(frame: bounds)
        subView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        subView.layer.cornerRadius = cornerRadius
        subView.backgroundColor = background
        subView.layer.shadowColor = shadowColor
        subView.layer.shadowOpacity = shadowOpacity
        subView.layer.shadowOffset = .zero
        subView.layer.shadowRadius = shadowRadius
        insertSubview(subView, at: 0)
    }
}

If you want to provide backgroundColor, CornerRadius , borderColor and border width to StackView:

extension UIStackView {
     func insertViewIntoStack(background: UIColor, cornerRadius: CGFloat, borderColor: CGColor, borderWidth: CGFloat) {
        let subView = UIView(frame: bounds)
        subView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        subView.layer.cornerRadius = cornerRadius
        subView.backgroundColor = background
        subView.layer.borderColor = borderColor
        subView.layer.borderWidth = borderWidth
        insertSubview(subView, at: 0)
    }
    }

Solution 5

If you are in Interface Builder, you can do the following:

1. Embed your StackView in a View. (Menu -> Editor -> Embed -> View)

2. Add constraints so that the StackView is constrained exactly to the new superView.

Be careful! xCode is very misleading because if you are looking at the Navigator (on the left) where it shows your constraints, you can think that "bottom = stackView.bottom" means that they are exactly aligned. But no! xCode uses a Standard constraint by Default. You see it in the display are of your xib graphically, but it's subtle and confusing. Look at the Inspector (on the right) where the details are for the constraint, and you will see that the constant is "Standard". Change that to 0!

3. Checkmark clipToBounds in the View. (Inspector, towards the bottom)

4. Add the corner radius you want to the View. (Inspector, towards the top)

The answers here that use subView are problematic if your StackView is dynamically sized at run time. If you use a superview (View) with constraints connecting it to the StackView this is not a problem.

Also pay attention to background color in your superview View if that's a factor in the particular layout you are doing. Also shadow, as is mentioned in the other answers here.

View more solutions

Comments

[CStreel]

Can you share the code before & after? It will be easier to help if we have a snippet of code to look at

[Peter DeWeese]

or above the stackview

[ScottyBlades]

Why would you put it above the stackview? Wouldn't that cover the stackView content?