CODEWITHSUNDEEP
swiftconstraintsuistackview
Ofri
Ofri

Reputation: 289

UIStackView not showing as expected

I want to add a UIStackView of log in buttons to my app, and so I added this code:

override func viewDidLayoutSubviews()
    {
        super.viewDidLayoutSubviews()


        SignInButtonsStackView.center.x = self.view.center.x
        SignInButtonsStackView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 10)
        SignInButtonsStackView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: 10)
        SignInButtonsStackView.spacing = 5


        SignInButtonsStackView.addArrangedSubview(FacebookSignInButton)
        SignInButtonsStackView.addArrangedSubview(GoogleSignInButton)

    }

I am setting the UIStackView's constraints first and then adding the buttons.

My goal is to be able to add more sign in buttons in the future while adding minimum code to do so.

This is what I get :

enter image description here

Which is not only not same width, but the height is messed up too.

How can I make sure all items in my UIStackView are of same width, height and spacing ? How do I fix this view to look fine ?

Edit

I have this in debug window:

"<NSLayoutConstraint:0x600000288700 UILayoutGuide:0x6000007b0760'UIViewSafeAreaLayoutGuide'.bottom == UIStackView:0x7f9b04d15420.bottom + 187   (active)>",
    "<NSLayoutConstraint:0x600000288ac0 V:|-(499)-[UIStackView:0x7f9b04d15420]   (active, names: '|':UIView:0x7f9b04d166e0 )>",
    "<NSLayoutConstraint:0x60c000290f40 GIDSignInButton.height == 10   (active, names: GIDSignInButton:0x7f9b04d076e0 )>",
    "<NSLayoutConstraint:0x60800028cd50 'UISV-canvas-connection' V:[GIDSignInButton]-(0)-|   (active, names: GIDSignInButton:0x7f9b04d076e0, '|':UIStackView:0x7f9b04d15420 )>",
    "<NSLayoutConstraint:0x60c00028bb80 'UISV-canvas-connection' UIStackView:0x7f9b04d15420.top == FBSDKLoginButton:0x7f9b04d0a4d0'Continue with Facebook'.top   (active)>",
    "<NSLayoutConstraint:0x60c00028ad20 'UISV-fill-equally' GIDSignInButton.height == FBSDKLoginButton:0x7f9b04d0a4d0'Continue with Facebook'.height   (active, names: GIDSignInButton:0x7f9b04d076e0 )>",
    "<NSLayoutConstraint:0x60c000288610 'UISV-spacing' V:[FBSDKLoginButton:0x7f9b04d0a4d0'Continue with Facebook']-(5)-[GIDSignInButton]   (active, names: GIDSignInButton:0x7f9b04d076e0 )>",
    "<NSLayoutConstraint:0x60800028d1b0 'UIView-Encapsulated-Layout-Height' UIView:0x7f9b04d166e0.height == 736   (active)>",
    "<NSLayoutConstraint:0x600000288840 'UIViewSafeAreaLayoutGuide-bottom' V:[UILayoutGuide:0x6000007b0760'UIViewSafeAreaLayoutGuide']-(0)-|   (active, names: '|':UIView:0x7f9b04d166e0 )>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x60c000290f40 GIDSignInButton.height == 10   (active, names: GIDSignInButton:0x7f9b04d076e0 )>

Upvotes: 0

Views: 1679

Answers (2)

tom_139
tom_139

Reputation: 306

I would suggest you to add SignInButtonsStackView.distribution = .fillEqually to get equal height for your buttons and SignInButtonsStackView.alignment = .fill in order to get same width.

Unfortunately how the buttons will behave depends on internal constraint their view may have. I would suggest to check the console for any log related to "unsatisfiable constraints" (setting a symbolic breakpoint for UIViewAlertForUnsatisfiableConstraints may be useful https://staxmanade.com/2015/06/debugging-ios-autolayout-issues/).

Upvotes: 0

Ilya Kharabet
Ilya Kharabet

Reputation: 4631

You don't need to set height constraint of UIStackView. Just set height constraint of UIButton's in UIStackView and distribution to "Equal spacing" in UIStackView.

Upvotes: 1

Related Questions