按钮填充堆栈视图

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.

Answer 2

Alright folks I got it. I had the horizontal stack in the wrong place in the view. I had the same issue and I used the alignment -> top but that only fixed my horizontal not my width. The true issue was that I placed the Horizontal Stack View in the wrong location. It says "and drag one into your storyboard scene so that it's in the stack view below the image view" when I placed it as shown it sized correctly. correct location for horizontal stack

Answer 3

I realise that an answer has been accepted for this question, however, I came across the same problem when following the tutorial. Whether or not this is the expected behaviour, following the tutorial exactly results in different looking interfaces on running the app in the simulator.

Something is not quite right with the constraints and so the constraints set in setupButtons() were not being implemented.

button.heightAnchor.constraint(equalToConstant: 20.0).isActive = true
button.widthAnchor.constraint(equalToConstant: 20.0).isActive = true

To solve this I had to change the stack view allignment attribute from fill to top as shown below:

This fixes the interface so that it's the same as the tutorial screenshots. Hopefully this helps anyone else coming across this issue in the future.

Answer 4

In recent versions of Xcode (v 9.0.1 as or writing) it will complain in the debugger output. It mentions that you may have an unwanted constraint. If you remove the constraints from the storyboard, the code should work as intended.

Answer 5

I follow the tutorial too and I had the same Problem. I solved it, by deactivating the red contrains in the marked screenshoot. I uploaded another screenshoot, to show you my other settings. I am Beginner and it was totaly luck and I want to share this luck^^ other settings marked screenshoot

enter image description here