使用不使用硬编码的 CGRect 和最小数量的约束以编程方式将堆栈视图与屏幕顶部对齐

Posted 2023-03-12

【中文标题】使用不使用硬编码的 CGRect 和最小数量的约束以编程方式将堆栈视图与屏幕顶部对齐

【英文标题】：Aligning a stackview to the top of the screen programmatically using no hardcoded CGRect and the minimum number of constraints

【发布时间】：2015-09-27 18:35:33

【问题描述】：

我的 ViewController 中有以下代码

let imageView               = UIImageView()
imageView.backgroundColor   = UIColor.blueColor()
imageView.heightAnchor.constraintEqualToConstant(120.0).active = true
imageView.widthAnchor.constraintEqualToConstant(120.0).active = true
imageView.image = UIImage(named: "buttonFollowCheckGreen")

let textLabel               = UILabel()
textLabel.widthAnchor.constraintEqualToConstant(self.view.frame.width).active = true
textLabel.heightAnchor.constraintEqualToConstant(20.0).active = true
textLabel.text  = "Hi World"
textLabel.font = UIFont(name:kFontName, size:24)
textLabel.textAlignment = .Center

let stackView   = UIStackView()
stackView.axis  = UILayoutConstraintAxis.Vertical
// stackView.distribution  = UIStackViewDistribution.EqualSpacing
// stackView.alignment = UIStackViewAlignment.Center
stackView.spacing   = 16.0

stackView.addArrangedSubview(imageView)
stackView.addArrangedSubview(textLabel)
stackView.translatesAutoresizingMaskIntoConstraints = false;

self.view.addSubview(stackView)

stackView.centerXAnchor.constraintEqualToAnchor(self.view.centerXAnchor).active = true
stackView.centerYAnchor.constraintEqualToAnchor(self.view.centerYAnchor).active = true

但是，这呈现如下：

我想让它呈现如下：

为实现此目的，对上述代码的最小更改是什么。我希望 stackView 上有一个属性可以将其与顶部对齐。

【问题讨论】：

代码中的最后两行将堆栈视图置于视图的中心。你可以从改变它开始。

即使我注释掉您所指的两行，我也有相同的结果（也在原始问题中编辑）

你用什么约束来代替它们？

我尝试了 stackView.alignment = UIStackViewAlignment.Leading 和 stackView.alignment = UIStackViewAlignment.Top 但这给了我意想不到的结果，蓝色矩形浮动到左侧而不是顶部。

感谢@Abizern 我设法通过将最后一行更改为 stackView.centerYAnchor.constraintEqualToAnchor(self.view.topAnchor).active = true 使蓝色矩形与顶部对齐，但我仍然需要一个边距-stackview 和框架顶部之间的顶部。如果可能，请提供帮助。

【参考方案1】：

将最后两行替换为：

stackView.centerXAnchor.constraintEqualToAnchor(self.view.centerXAnchor).active = true

let constraint = NSLayoutConstraint(
    item: stackView, 
    attribute: .Top, 
    relatedBy: .Equal, 
    toItem: topLayoutGuide, 
    attribute: .Bottom, 
    multiplier: 1.0, 
    constant: 0.0
)
view.addConstraint(constraint)

此外，您正在使用自动布局的代码中创建视图，因此您需要通过添加以下两行来关闭自动调整大小掩码

imageView.translatesAutoresizingMaskIntoConstraints = false
textLabel.translatesAutoresizingMaskIntoConstraints = false

您的堆栈视图中的视图仍然存在一些冲突，但这不是问题的一部分，所以我将把它留给您尝试解决。