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

Question

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

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

问题是标签将包含不同的长度文本,视图本身将根据其使用位置具有不同的宽度.

以下是它的外观:

这里有更长的文字:

正如你所看到的那样,左边应该有一个标签,中间有一个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])