如何在堆栈视图中设置容器的高度?
How to set height of containers in stack view?
我想问一下是否可以设置垂直堆栈视图中放置的每个容器的百分比高度?我想在堆栈视图中有 3 个容器。第一个应该占屏幕尺寸的 40%,第二个 20%,第三个 40%。谢谢
'Fill proportionally' 分发类型适用于固有内容大小。
因此,如果我们的垂直堆栈(高度为 600)视图有 2 个视图,ViewA(内部内容高度 200)和 ViewB(内部内容高度 100),堆栈视图会将它们调整为 ViewA(高度 400)和 ViewB (身高200).
此外,
- 如果所有视图都没有固有的内容高度,垂直堆栈视图将始终显示 IB 错误 "Needs constraint for: Y position or Height"。
- 没有固有高度的视图将折叠为零高度。
- 具有固有高度的视图将按比例分布。
你真正想要的
是具有两个约束的 'fill' 类型分布。
- ViewA.height = 2* ViewB.height
- ViewB.height = 0.5 * ViewC.height
就是这样。希望对你有帮助。
您也可以通过编程方式实现它,您可以在其中删除一个文本字段,然后 return 它返回并填充均匀分布的堆栈视图,如下所示:
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
}
}
我想问一下是否可以设置垂直堆栈视图中放置的每个容器的百分比高度?我想在堆栈视图中有 3 个容器。第一个应该占屏幕尺寸的 40%,第二个 20%,第三个 40%。谢谢
'Fill proportionally' 分发类型适用于固有内容大小。
因此,如果我们的垂直堆栈(高度为 600)视图有 2 个视图,ViewA(内部内容高度 200)和 ViewB(内部内容高度 100),堆栈视图会将它们调整为 ViewA(高度 400)和 ViewB (身高200).
此外,
- 如果所有视图都没有固有的内容高度,垂直堆栈视图将始终显示 IB 错误 "Needs constraint for: Y position or Height"。
- 没有固有高度的视图将折叠为零高度。
- 具有固有高度的视图将按比例分布。
你真正想要的
是具有两个约束的 'fill' 类型分布。
- ViewA.height = 2* ViewB.height
- ViewB.height = 0.5 * ViewC.height
就是这样。希望对你有帮助。
您也可以通过编程方式实现它,您可以在其中删除一个文本字段,然后 return 它返回并填充均匀分布的堆栈视图,如下所示:
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
}
}