4

I want my stack view to have three views: red image, blue image and register view. The thing is that while the red and blue button appear just fine, the register view does not.

enter image description here

This is how I set up and place my stack view inside my view controller view:

func setupSocialStackView() {
    let socialStackView = UIStackView(arrangedSubviews: redImage, blueImage, registerView])
    socialStackView.axis = .vertical
    socialStackView.distribution = .fillProportionally
    view.addSubview(socialStackView)
    socialStackView.spacing = 8

    // NSLayoutAnchor constraints here to place stack view 
    // inside my view controller view
}

This is the code for my register view which doesn't show up:

lazy var registerView: UIView = {
    let containerView = UIView()

    // Register button
    let registerButton = UIButton(type: .system)
    registerButton.setTitle("Register", for: .normal)
    registerButton.titleLabel?.font = UIFont.systemFont(ofSize: 12, weight: UIFontWeightLight)
    registerButton.titleLabel?.textAlignment = .center
    registerButton.setTitleColor(UIColor.black, for: .normal)
    registerButton.titleLabel?.textColor = UIColor(r: 91, g: 90, b: 90)
    registerButton.addTarget(self, action: #selector(presentRegisterController), for: .touchUpInside)
    containerView.addSubview(registerButton)

    return containerView
}()

The other two arrange views of the stack view are UIImageViews.

Why are the two images there and the register view is not? Am I missing something?

Cesare
  • 9,139
  • 16
  • 78
  • 130
  • can you show the constraints of the view not being displayed? – Ocunidee Feb 13 '17 at 16:37
  • 1
    A `UIView` by default has no `intrinsicContentSize` so to use it with a `UIStackView` with a vertical axis you need to add a height constraints. As it is the stack view is setting your register view's height to 0. – beyowulf Feb 13 '17 at 17:12

5 Answers5

5

You don't appear to be giving your UIButton a frame size. See what you get if you add an autoresizingMask line:

    registerButton.addTarget(self, action: #selector(presentRegisterController), for: .touchUpInside)

    registerButton.autoresizingMask = [.flexibleWidth, .flexibleHeight]

    containerView.addSubview(registerButton)
DonMag
  • 69,424
  • 5
  • 50
  • 86
3

For me, I needed to add bottom, right, and left constraints for the view inside the stack view. Then it appeared.

fullmoon
  • 8,030
  • 5
  • 43
  • 58
2

The view that isn't showing up is the container UIView, which has no intrinsic size. Inside your lazy var block, constrain the edges of the registerButton to the containerView, so that the container view has a size.

Connor Neville
  • 7,291
  • 4
  • 28
  • 44
1

It looks like you are making a subclass of a UIView in order to show a button saying "Register?". That is way too complicated, a UIButton is already subclass of UIView, so all you need to do is add the register button directly to your stackview! Hope that helps

Florensvb
  • 209
  • 1
  • 10
  • I've actually wanted to add more stuff to the register view, not just a button. Thank you for your answer. – Cesare Feb 13 '17 at 17:14
  • 1
    Ok, why do you have a container UIView inside your register UIView? Simply add the register button to self.addSubview. Also as @beyowulf said, if you add a UIView to a stack, it does not know how big it should be, so you need to either give the view a height constraint, or you can constraint your register button to the register view (using autolayout, not frames), so that you register view knows how big its content will be. – Florensvb Feb 13 '17 at 17:40
-1

First add all 3views in a stackview. Set its Spacing and distribution from the attribute inspector from the right side.eg(spacing=10, distribution=fill equality).Now select the stack view and add the respective constraints.

You can try this.

swati
  • 57
  • 11