How do I add constraints to a programmatically created UIButton placed in a UIStackView

Question

I have a simple vertical UIStackView and in the 3rd subview, I want to place my programmatically created UIButton . I can do this but the button is expanding to the full width and height of the subview instead of being the size I'm setting it to in my code. I've created the UIStackView using the storyboard but I'm adding this button programmatically so I have better control over the look of the button.

  let doThisButton = UIButton(frame: CGRect(x: 0, y: 0, width: 50, height: 40))
  doThisButton.setTitle("Let's do this.", forState: .Normal)
  doThisButton.setTitleShadowColor(UIColor.blackColor(), forState: .Highlighted)
  doThisButton.translatesAutoresizingMaskIntoConstraints = false
  doThisButton.layer.cornerRadius = 3
  doThisButton.layer.backgroundColor = UIColor(hexString: "b7b7b7").CGColor
  doThisButton.layer.borderWidth = 0

  liftLogStackView.addArrangedSubview(doThisButton)

In Apple's documentation, I found UILayoutGuide which seemed like it might work but now I don't think so. I tried this:

  let container = UILayoutGuide()
  doThisButton.addLayoutGuide(container)

  doThisButton.leadingAnchor.constraintEqualToAnchor(container.leadingAnchor, constant: 8.0).active = true
  doThisButton.trailingAnchor.constraintEqualToAnchor(container.trailingAnchor, constant: 8.0).active = true

  liftLogStackView.addArrangedSubview(doThisButton)
  container.leadingAnchor.constraintEqualToAnchor(margins.leadingAnchor).active = true

and it made no difference.

A lot of SO searching didn't turn up any answers specific to my problem, so I'm hoping someone can help. Thanks in advance.

Answer 1

You need to change the alignment of the UIStackView . By default it is set so subviews will fill the dimension perpendicular to the axis. In your case, the width.

liftLogStackView.alignment = .center

That will apply to all subview in the UIStackView which may not be what you want. In that case, just add the button as a subview in another UIView then add that view to the UIStackView . Your new view will then be full width but you can constrain the button to whatever size you want.

Also, I'd suggest reading the UIStackView Documentation . There is a lot of useful information in there about how to setup your layouts.

Answer 2

Another solution would be to pack this UIButton into a UIView . Then the UIView will stretch out and take all place needed. The UIButton will stay the size you have defined. Now you are able to define the constraints depending on the container view.

I have made a short Playground example:

import UIKit
import PlaygroundSupport

class TestViewController : UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()

        title = "Test"

        self.view.frame = CGRect(x: 0, y: 0, width: 320, height: 480)
        self.view.backgroundColor = UIColor.brown

        let stackview = UIStackView(frame: CGRect(x: 0, y: 0, width: 320, height: 480))
        stackview.axis = .vertical
        stackview.distribution = UIStackViewDistribution.fillEqually

        let text = UILabel(frame: CGRect(x: 0, y: 0, width: 200, height: 20))
        text.text = "Hello, i am a label"
        text.backgroundColor = UIColor.green

        let containerView = UIView(frame: CGRect(x: 0, y: 0, width: 320, height: 100))
        containerView.backgroundColor = UIColor.red
        containerView.addSubview(text)

        stackview.addArrangedSubview(containerView)

        let text2 = UILabel(frame: CGRect(x: 0, y: 0, width: 100, height: 20))
        text2.text = "Hello, i am another label"
        text2.backgroundColor = UIColor.orange

        stackview.addArrangedSubview(text2)

        self.view.addSubview(stackview)
    }
}

let testController = TestViewController()
PlaygroundPage.current.liveView = testController.view
testController