以编程方式使用堆栈视图

Posted 2023-02-27

【中文标题】以编程方式使用堆栈视图

【英文标题】：Using stackviews programmatically

【发布时间】：2016-11-26 02:41:37

【问题描述】：

我创建了一个自定义UIView，并在视图内部尝试使用UIStackView 添加一些 UI 元素。

在 IB 内部，我添加了一个视图，然后将自定义类设置为我的自定义 UIView。

UIStackView 似乎不受我添加到的UIView 的约束，而是UIStackView 似乎锚定到原点。此外，我只能在调试视图层次结构中看到它。它实际上并没有显示任何标签或按钮，我只看到一个灰色虚线框。

这是我创建的自定义视图

import UIKit

class ParameterControl: UIView 

private var name : UILabel!
private var valTf : UITextField!
private var delta : UITextField!
private var stepper : UIStepper!
private var button : UIButton!

init(frame: CGRect, albumCover: String) 
    super.init(frame: frame)
    commonInit()


required init?(coder aDecoder: NSCoder) 
    super.init(coder: aDecoder)
    commonInit()


func commonInit()

    name = UILabel()
    name.text = "Name"
    name.backgroundColor = UIColor.blue

    valTf = UITextField.init()
    delta = UITextField.init()
    stepper = UIStepper.init()
    button = UIButton.init()

    let stackView = UIStackView(arrangedSubviews: [valTf, delta, stepper, button])
    stackView.axis = .horizontal
    stackView.distribution = .fillEqually
    stackView.alignment = .fill
    stackView.spacing = 10
    stackView.translatesAutoresizingMaskIntoConstraints = false

    addSubview(stackView)

    //let viewsDictionary = ["stackView":stackView]
    //let stackView_H = NSLayoutConstraint.constraints(withVisualFormat: "H:|-20-[stackView]-20-|", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: viewsDictionary)
    //let stackView_V = NSLayoutConstraint.constraints(withVisualFormat: "V:|-30-[stackView]-30-|", options: NSLayoutFormatOptions(rawValue:0), metrics: nil, views: viewsDictionary)
    //self.addConstraints(stackView_H)
    //self.addConstraints(stackView_V)

我是否错误地使用了UIStackView？目标是能够为我的每个参数创建一个这些视图的数组。我不想在 IB 中单独创建这些视图。

【问题讨论】：

您需要向堆栈视图添加约束以将其约束到其父视图（自定义类中的自身）

【参考方案1】：

取消注释代码中的约束并确保它们在堆栈视图中被激活。它停留在它的默认位置和框架中，因为你没有给它任何告诉它以其他方式表现的约束。另外，请确保您的所有元素都有一个有效的框架。