使用 Swift 3 Xcode 8 居中对齐多个标签

Posted 2023-03-13

【中文标题】使用 Swift 3 Xcode 8 居中对齐多个标签

【英文标题】：Center aligning multiple labels using Swift 3 Xcode 8

【发布时间】：2016-10-07 23:28:00

【问题描述】：

我想将三个标签作为一个组对齐以水平居中。其中两个标签具有可变大小。我彻底参考了以下帖子，但我的应用程序崩溃并显示以下消息：

发布： Center align Labels and images inside UIView programatically with Swift

错误信息：

当添加到视图时，约束的项必须是 该视图（或视图本身）。如果约束，这将崩溃 需要在组装视图层次结构之前解决。

几件事： 我已经在 Autolayout 中为这三个标签设置了限制。对于“InLabel”，我从顶部邻居的边距、宽度和间距中获得领先空间。对于其他两个标签（durationLable 和 timeUnitLabel），我在所有三个标签之间都有空格，并且与顶部邻居有间距。

UIView在ViewController类的开头部分被初始化为indurtimeView = UIView()

在 ViewController 类中调用 super.viewDidLoad() 后，我在“viewDidLoad”函数中调用函数 indurtimeLabelcenter()。

这是我的函数 indurtimeLabelcenter() 的代码：

func indurtimeLabelcenter() 
    //Align "In", "Duration Lable" and "Time Unit Label" to center
    self.view.addSubview(indurtimeView)
    indurtimeView.translatesAutoresizingMaskIntoConstraints = false
    indurtimeView.clipsToBounds = true
    indurtimeView.addSubview(InLabel)

    //Constraints
    var viewsDict = Dictionary <String, UIView>()
    viewsDict["InLabel"] = InLabel
    viewsDict["durationLabel"] = durationLabel
    viewsDict["timeunitLabel"] = timeUnitLabel

    indurtimeView.addConstraints(
        NSLayoutConstraint.constraints(
            withVisualFormat: "V:|[InLabel]|", options: [], metrics: nil, views: viewsDict))
    indurtimeView.addConstraints(
        NSLayoutConstraint.constraints(
            withVisualFormat: "V:|[durationLabel]|", options: [], metrics: nil, views: viewsDict))
    indurtimeView.addConstraints(
        NSLayoutConstraint.constraints(
            withVisualFormat: "V:|[timeunitLabell]|", options: [], metrics: nil, views: viewsDict))
    indurtimeView.addConstraints(
        NSLayoutConstraint.constraints(
            withVisualFormat: "H:|-[InLabel]-5-[durationLabel]-5-[timeunitLabel]-|", options: NSLayoutFormatOptions.alignAllCenterY, metrics: nil, views: viewsDict))
    //costView!.backgroundColor = UIColor.redColor()

    // center costView inside self
    let centerXCons = NSLayoutConstraint(item: indurtimeView, attribute: .centerX, relatedBy: .equal, toItem: self, attribute: .centerX, multiplier: 1, constant: 0);
    let centerYCons = NSLayoutConstraint(item: indurtimeView, attribute: .centerY, relatedBy: .equal, toItem: self, attribute: .centerY, multiplier: 1, constant: 0);
    self.view.addConstraints([centerXCons, centerYCons])

第一次用 Swift 编写应用程序，请原谅我的无知。

【参考方案1】：

在您的代码中，您似乎在以下行中有错误：

var viewsDict = Dictionary <String, UIView>()

我相信你的意思是让你的字典值类型为UILabel。但是，您将其作为类型 UIView。唯一的变化是：

var viewsDict = Dictionary <String, UILabel>()

不过，无论哪种情况，要回答您的问题，您都可以通过执行以下操作将字典中的多个标签居中对齐：

var viewsDict = Dictionary <String, UILabel>()
viewsDict["InLabel"] = InLabel
viewsDict["durationLabel"] = durationLabel
viewsDict["timeunitLabel"] = timeUnitLabel

for label in viewsDict.values 
    label.center.x = view.bounds.width/2

这循环遍历字典值，将每个 UILabel 的中心 x 值分配给屏幕中心。

更新 手动计算，但如果你不能让你的约束发挥作用，总是可以这样做。

let labelOneXOrigin = screenWidth-10-labelOne.frame.width-labelTwo.frame.width-labelThree.frame.width
let labelTwoXOrigin = labelOne.frame.origin.x+labelOne.frame.width+5
let labelThreeXOrigin = labelTwo.frame.origin.x+labelTwo.frame.width+5

【讨论】：

可能是我没有说清楚。所有标签都在同一行，我想将所有标签作为一个组对齐到中心。 Dictionary 是 UIView 类型，因为我正在向它添加子视图。

我想我明白你现在要问的了，为了澄清，虽然“在同一条线上”，你的意思是每个人都直接相邻，中间没有空格？

这些标签之间有一个常数值 5 的空格。

【参考方案2】：

好的。终于……我想通了。有几个问题。首先，我只为一个标签添加子视图。必须为所有三个标签添加它（需要在中心对齐）。其次，因为我想将它们水平居中对齐，所以我不需要提供“centerYcons”。第三，其中一个标签具有从左边距恒定空间的约束。它需要被删除，因为它不能满足将其居中以及左边距的恒定空间的约束。我在下面提供了工作代码：

func indurtimeLabelcenter() 
    //Align "In", "Duration Lable" and "Time Unit Label" to center
    self.view.addSubview(indurtimeView)
    indurtimeView.translatesAutoresizingMaskIntoConstraints = false

    indurtimeView.addSubview(InLabel)
    indurtimeView.addSubview(durationLabel)
    indurtimeView.addSubview(timeUnitLabel)

    //Constraints
    var viewsDict = Dictionary <String, UIView>()
    viewsDict["InLabel"] = InLabel
    viewsDict["durationLabel"] = durationLabel
    viewsDict["timeunitLabel"] = timeUnitLabel

    indurtimeView.addConstraints(
        NSLayoutConstraint.constraints(
            withVisualFormat: "V:|[InLabel]|", options: [], metrics: nil, views: viewsDict))
    indurtimeView.addConstraints(
        NSLayoutConstraint.constraints(
            withVisualFormat: "V:|[durationLabel]|", options: [], metrics: nil, views: viewsDict))
    indurtimeView.addConstraints(
        NSLayoutConstraint.constraints(
            withVisualFormat: "V:|[timeunitLabel]|", options: [], metrics: nil, views: viewsDict))
    indurtimeView.addConstraints(
        NSLayoutConstraint.constraints(
            withVisualFormat: "H:|-[InLabel]-5-[durationLabel]-5-[timeunitLabel]-|", options: NSLayoutFormatOptions.alignAllCenterY, metrics: nil, views: viewsDict))

    // center costView inside self
    let centerXCons = NSLayoutConstraint(item: indurtimeView, attribute: .centerX, relatedBy: .equal, toItem: self.view, attribute: .centerX, multiplier: 1, constant: 0);
    //let centerYCons = NSLayoutConstraint(item: indurtimeView, attribute: .centerY, relatedBy: .equal, toItem: self.view, attribute: .centerY, multiplier: 1, constant: 0);
    self.view.addConstraints([centerXCons])