Geek Answers Handbook

How to set the height of containers on the stack?

I would like to ask you, is it possible to set the height as a percentage of each container placed in the vertical view of the stack? I want to have 3 containers in the stack view. First you need to take 40% of the screen, the second 20% and the third 40%. thank you

enter image description here

+6
source share
2 answers

The "fill proportionally" distribution type works with the size of its own content .

Thus, if our vertical stack (height says 600) has 2 types, ViewA (height of internal content 200) and ViewB (height of embedded content 100), the stack view will be their size ViewA (height 400) and ViewB (height 200).

Besides,

  • If all views do not have an internal content height, the vertical stack view will always display an IB error: "Requires constraint for: Y-position or height."
  • Views without internal height are reset to zero height.
  • Views that have an internal height will be distributed proportionally.

What do you really want

is a distribution of type 'fill' with two constraints.

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

That's all. Hope this helps.

enter image description here

+7
source

You can also implement it programmatically, where you can eliminate a single text field and then return it with a uniform distribution of the stack view, as shown below:

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 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 } }
0
source

More articles:


All Articles