居中使用Swift以编程方式alignmentUIView中的标签和图像

我在一个应用程序工作,并遇到了一个问题,我似乎无法解决。

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

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

这是它应该看起来如何:

在这里输入图像说明

这里有更长的文字:

在这里输入图像说明

正如你所看到的,左侧应该有一个标签,中间有一个标签,右侧有另一个标签,尽pipe文本的长度可能不同,但它们都居中。

这是我迄今为止的代码。 如果可能,我需要以编程方式进行此操作。 我运行一个方法来创buildbutton取决于一个值。

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 

'无法parsing约束格式:选项遮罩所需的视图要在水平边缘上alignment,不允许布局也是水平的。 H:| – [标签] -5- [brainView] – |

如果我删除了一切都是左alignment,而不是中心,但我不知道这是正确的方式来完成我想要做的。

任何线索如何解决这个问题?

谢谢你的帮助

首先,将.AlignAllCenterX改为.AlignAllCenterY ,原因是"H:|-[label]-5-[brainView]-|" 指定视图如何水平定位,要labelbrainView具有相同的中心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])