Add constraints to button in swift (Apple iOS Tutorial)

Question

I am programming Apples Tutorial (Chapter: "Add Buttons to the View") for iOS Development. Just copying the following code I get a different result:

import UIKit

@IBDesignable class RatingControl: UIStackView {

//MARK: Properties
private var ratingButtons = [UIButton]()

var rating = 0
@IBInspectable var starSize: CGSize = CGSize(width: 44.0, height: 44.0)
@IBInspectable var starCount: Int = 5

//MARK: Initialisation
override init(frame: CGRect) {
    super.init(frame: frame)
    setupButtons()
}
required init(coder: NSCoder) {
    super.init(coder: coder)
    setupButtons()
}

//MARK: Private Methods
private func setupButtons() {

        // Create the button
        let button = UIButton()
        button.backgroundColor = UIColor.red

        // Add constraints
        button.translatesAutoresizingMaskIntoConstraints = false
        button.heightAnchor.constraint(equalToConstant: starSize.height).isActive = true
        button.widthAnchor.constraint(equalToConstant: starSize.width).isActive = true

        // Setup the button action
        button.addTarget(self, action: #selector(RatingControl.ratingButtonTapped(button:)), for: .touchUpInside)

        // Add the button to the stack
        addArrangedSubview(button)

        // Add the new button to the rating button array
        ratingButtons.append(button)
}

//MARK: Button Action
func ratingButtonTapped(button: UIButton) {
    print("Button pressed 👍")
}

}

The constraints seem not to be working. My red button has exactly the same size as its super stack view. It is not constrained to 44x44.

The console reports that not all constraints could simultaneously be satisfied:

      2016-12-25 18:43:02.375251 FoodTracker[13644:1695258] [LayoutConstraints] Unable to simultaneously satisfy constraints.
    Probably at least one of the constraints in the following list is one you don't want. 
    Try this: 
        (1) look at each constraint and try to figure out which you don't expect; 
        (2) find the code that added the unwanted constraint or constraints and fix it. 
(
    "<NSLayoutConstraint:0x600000092160 UIButton:0x7ff15f40a740.width == 44   (active)>",
    "<NSLayoutConstraint:0x608000095a90 'UISV-canvas-connection' FoodTracker.RatingControl:0x7ff15f6116c0.leading == UIButton:0x7ff15f40a740.leading   (active)>",
    "<NSLayoutConstraint:0x608000095b30 'UISV-canvas-connection' H:[UIButton:0x7ff15f40a740]-(0)-|   (active, names: '|':FoodTracker.RatingControl:0x7ff15f6116c0 )>",
    "<NSLayoutConstraint:0x608000095630 'UIView-Encapsulated-Layout-Width' FoodTracker.RatingControl:0x7ff15f6116c0.width == 200   (active)>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x600000092160 UIButton:0x7ff15f40a740.width == 44   (active)>

Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger.
The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKit/UIView.h> may also be helpful.
2016-12-25 18:43:02.376266 FoodTracker[13644:1695258] [LayoutConstraints] Unable to simultaneously satisfy constraints.
    Probably at least one of the constraints in the following list is one you don't want. 
    Try this: 
        (1) look at each constraint and try to figure out which you don't expect; 
        (2) find the code that added the unwanted constraint or constraints and fix it. 
(
    "<NSLayoutConstraint:0x600000091e90 UIButton:0x7ff15f40a740.height == 44   (active)>",
    "<NSLayoutConstraint:0x608000095b80 'UISV-canvas-connection' FoodTracker.RatingControl:0x7ff15f6116c0.top == UIButton:0x7ff15f40a740.top   (active)>",
    "<NSLayoutConstraint:0x608000095c70 'UISV-canvas-connection' V:[UIButton:0x7ff15f40a740]-(0)-|   (active, names: '|':FoodTracker.RatingControl:0x7ff15f6116c0 )>",
    "<NSLayoutConstraint:0x608000095680 'UIView-Encapsulated-Layout-Height' FoodTracker.RatingControl:0x7ff15f6116c0.height == 110   (active)>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x600000091e90 UIButton:0x7ff15f40a740.height == 44   (active)>

Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger.
The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKit/UIView.h> may also be helpful.

However, I have not defined other constraints to the stack view except the ones in the class above. Also in the Interface Builder there are no additional constraints for the stack view in the outline. Where do the 'UISV-canvas-connection' come from?

Answer 1

Found the same issue while working with Apple's tutorials, and did make the mistake of creating Horizontal Stack View outside the Vertical Stack View.

After dragging it back to Vertical Stack View, it works for me :)