Button filling up stack view

Question

I'm following the dev tutorial from Apple on iOS, and got to the part where you have to implement a custom control using a stack view. However, when I get to the part where it should show me a little red square referring to the button I added to the stack view, I get the whole stack view in red (the button fills the entire stack view). My attributes are the following:

What am I doing wrong, despite following the tutorial to the letter? Thank you in advance.

Edit:

I use these constraints:

    button.translatesAutoresizingMaskIntoConstraints = false
    button.heightAnchor.constraint(equalToConstant: 24.0).isActive = true
    button.widthAnchor.constraint(equalToConstant: 14.0).isActive = true

Answer 1

This is the expected behavior of a stack view with one arranged subview. If you have placed constraints on the stack view that make it larger than its arranged subviews those subviews will expand to fill the size of the stack view. Or if the stack view has no constraints on it, it will conform to the size dictated by its arranged subviews. Either way with one arranged subview that subview will take up the entirety of the stack view.

In the tutorial, there are no constraints on the stack view so it shrinks to the size of the constraints set on the button, as it is the only arranged subview in the UIStackView. You should open the size inspector stack view to ensure there are no constraints set on it. For more about stack views and layouts you should see here.