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

debugcn 发表于 Dev

托比亚斯

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

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

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

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

谢谢你的帮助

加布勒

首先，将更.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])

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。