使用 Swift 以编程方式将 UIView 中的标签和图像居中对齐

Question

我正在开发一个应用程序，遇到了一个我似乎无法解决的问题。

我正在制作一个带有标签和图像的 uiview。内容需要在视图中居中。

问题是标签将包含不同长度的文本，并且视图本身将根据使用位置而具有不同的宽度。

它应该是这样的：

这里有更长的文字：

如您所见，左边应该有 1 个标签，中间有一个 uiimage，右边有另一个标签，所有标签都居中到中间，即使文本长度可能不同。

这是我目前的代码。如果可能，我需要以编程方式执行此操作。我运行一种根据值创建按钮的方法。

    func cost(cost:Int){

    costView = UIView()
    costView?.setTranslatesAutoresizingMaskIntoConstraints(false)
    self.costView?.clipsToBounds = true
    self.addSubview(costView!)


    self.costLabel.frame = CGRectMake(0, 0, 60, self.bounds.size.height)
    self.costLabel.textAlignment = NSTextAlignment.Right
    self.costLabel.textColor = UIColor.whiteColor()
    self.costLabel.font = Services.exoFontWithSize(16)
    self.costLabel.text = String(cost)
    costView?.addSubview(costLabel)



    self.costBrainImageView = UIImageView(frame: CGRectMake(0, 0, self.bounds.size.height, self.bounds.size.height))
    self.costBrainImageView?.image = Graphics.maskImageNamed("CommonMediumBrain", color: UIColor.whiteColor())
    self.costBrainImageView?.contentMode = UIViewContentMode.ScaleAspectFill
    costView?.addSubview(costBrainImageView!)




    self.label.adjustsFontSizeToFitWidth = true
    self.label.setTranslatesAutoresizingMaskIntoConstraints(false)
    self.label.numberOfLines = 1
    self.label.minimumScaleFactor = 0.20
    self.label.textAlignment = NSTextAlignment.Right
    self.label.font = Services.exoFontWithSize(20)


    //Constraints
    var viewsDict = Dictionary <String, UIView>()
    viewsDict["label"] = label
    viewsDict["brainView"] = costView


    self.addConstraints(
        NSLayoutConstraint.constraintsWithVisualFormat(
            "V:|[label]|", options: nil, metrics: nil, views: viewsDict))
    self.addConstraints(
        NSLayoutConstraint.constraintsWithVisualFormat(
            "V:|[brainView]|", options: nil, metrics: nil, views: viewsDict))
    self.addConstraints(
        NSLayoutConstraint.constraintsWithVisualFormat(
            "H:|-[label]-5-[brainView]-|", options: NSLayoutFormatOptions.AlignAllCenterX, metrics: nil, views: viewsDict))

}

目前这行中断

NSLayoutFormatOptions.AlignAllCenterX

'无法解析约束格式：选项屏蔽要求视图在水平边缘对齐，这对于同样水平的布局是不允许的。 H:|-[标签]-5-[brainView]-|

如果我删除所有内容都向左对齐而不是居中但我不确定这是完成我想做的事情的正确方法。

关于如何解决这个问题的任何线索？

感谢您的帮助

Answer 1

首先，将.AlignAllCenterX更改为.AlignAllCenterY，原因是"H:|-[label]-5-[brainView]-|"指定视图的水平位置，您希望label和brainView具有相同的中心 Y 位置。

其次，制作一个包含所有 3 个视图的子视图，然后将此子视图置于黑色矩形内的中心。您可以使用 costView 作为子视图。下面是一些基于您现有代码的修改代码。

costView!.addSubview(label)

//Constraints
var viewsDict = Dictionary <String, UIView>()
viewsDict["label"] = label
viewsDict["brainView"] = costBrainImageView
viewsDict["costLabel"] = costLabel

costView!.addConstraints(
    NSLayoutConstraint.constraintsWithVisualFormat(
        "V:|[label]|", options: nil, metrics: nil, views: viewsDict))
costView!.addConstraints(
    NSLayoutConstraint.constraintsWithVisualFormat(
        "V:|[brainView]|", options: nil, metrics: nil, views: viewsDict))
costView!.addConstraints(
    NSLayoutConstraint.constraintsWithVisualFormat(
        "V:|[costLabel]|", options: nil, metrics: nil, views: viewsDict))
costView!.addConstraints(
    NSLayoutConstraint.constraintsWithVisualFormat(
        "H:|-[label]-5-[brainView]-5-[costLabel]-|", options: NSLayoutFormatOptions.AlignAllCenterY, metrics: nil, views: viewsDict))
costView!.backgroundColor = UIColor.redColor()

// center costView inside self
let centerXCons = NSLayoutConstraint(item: costView!, attribute: .CenterX, relatedBy: .Equal, toItem: self, attribute: .CenterX, multiplier: 1, constant: 0);
let centerYCons = NSLayoutConstraint(item: costView!, attribute: .CenterY, relatedBy: .Equal, toItem: self, attribute: .CenterY, multiplier: 1, constant: 0);
self.addConstraints([centerXCons, centerYCons])

使用 Swift 以编程方式将 UIView 中的标签和图像居中对齐

Center align Labels and images inside UIView programatically with Swift

uiview

centering

ios