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

Posted 2023-03-05

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

【英文标题】：Center align Labels and images inside UIView programatically with Swift

【发布时间】：2015-05-24 22:08:37

【问题描述】：

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

我正在制作一个带有标签和图像的 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]-|

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

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

感谢您的帮助

【问题讨论】：

我认为你需要修复标签的宽度，而且你的选项应该是 Nil

我不清楚您的代码中的内容与图像中的内容相对应。黑色圆角矩形是costView，还是costView是黑色矩形的子视图？我看到您正在向 costView 添加标签和图像视图，但不是您调用 self.label 的那个。为什么？ self.label 是哪个标签？另外，这段代码中的“self”是什么？

@rdelmar self.view 是实际的圆角矩形（如超级视图），它包含一些用于不同演示的方法，主要用于显示文本。 costview 拥有 1 个图像和 1 个标签。这主要是为了更容易移动这两个对象，这样我只需要处理和居中两个对象，标签和成本视图。但也许这不是一个好主意？ :S

我想我可能根本不会使用 costView，并将 2 个标签和图像视图直接添加到黑色矩形（或者将所有 3 个标签都放在 costView 中，如果你有其他理由拥有它)。

【参考方案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])

【讨论】：

效果太棒了！！！ :D 非常感谢@gabbler。我必须为图像视图添加宽度和高度，以便图像不会拉伸“V：|[brainView(