How to set height of containers in stack view?

Question

I'd like to ask you if it's possible to set height in percentage of each container placed in vertical stack view? I want to have 3 containers in stack view. First should take 40% of screen size, second 20% and third 40%. Thank you

Solution 1

'Fill proportionally' distribution type works with intrinsic content size.

So if our vertical stack(height say 600) view has 2 views, ViewA (intrinsic content height 200) and ViewB(intrinsic content height 100), the stack view will size them to ViewA(height 400) and ViewB(height 200).

Also,

1. If all the views do not have intrinsic content height, vertical stack view will always show an IB error "Needs constraint for: Y position or Height".
2. Views with no intrinsic height will collapse to zero height.
3. Views that have intrinsic height will distribute themselves proportionally.

What you really want

is the 'fill' type distribution with two constraints.

1. ViewA.height = 2* ViewB.height
2. ViewB.height = 0.5 * ViewC.height

Thats all. Hope it helps.

Solution 2

You could also implement it programmatically where you could eliminate one text field and then return it back with fill equally distribution of stack view, like the following:

class LoginViewController: UIViewController{

@IBOutlet weak var nameTextField: UITextField!
@IBOutlet weak var emailTextField: UITextField!
@IBOutlet weak var passwordTextField: UITextField!

override func viewDidLoad() {
    super.viewDidLoad()
nameTextField.translatesAutoresizingMaskIntoConstraints = false
emailTextField.translatesAutoresizingMaskIntoConstraints = false
passwordTextField.translatesAutoresizingMaskIntoConstraints = false
}

// IBAction 
@IBAction func registerLoginSegmented(_ sender: Any) {

    if (sender as AnyObject).selectedSegmentIndex == 0{
        // Before we resize (shrink) the nameTextField, change the stackview' distribution from "fill equally" to just "fill"
        stackView.distribution = .fill

        // Change the nameTextField's text
        heightConstraintNameTextField = nameTextField.heightAnchor.constraint(equalToConstant: 0)
        heightConstraintNameTextField?.isActive = true

        // Rearrange the height of the emailTextField
        heightConstraintEmailTextField = emailTextField.heightAnchor.constraint(equalToConstant: 50)
        heightConstraintEmailTextField?.isActive = true

        // Rearrange the height of the passwordTextField
        heightConstraintPasswordTextField = passwordTextField.heightAnchor.constraint(equalToConstant: 50)
        heightConstraintPasswordTextField?.isActive = true

    }
    else {
          // Return the nameTextField by simply trun off the constrants and assign "fillEqually" instead of "fill"
        heightConstraintNameTextField?.isActive = false
        heightConstraintEmailTextField?.isActive = false
        heightConstraintPasswordTextField?.isActive = false
        stackView.distribution = .fillEqually

    }

}

Comments

[Lachtan]

Thank you very much. Helped me more understand stack views

[Naishta]

good one. worth mentioning how you add height constraints. drag between 2 views, select Equal Height. and then in the size inspector , change the multiplier between views

[Muhammad Ahmed]

is using this method is still available in xcode 11? because i am unable to add constraints as described in the answer