Fatal编程技术网
  • ios/
  • Ios 使用Swift编程将UIView内的标签和图像居中对齐

Ios 使用Swift编程将UIView内的标签和图像居中对齐

ios uiview

Ios 使用Swift编程将UIView内的标签和图像居中对齐,ios,uiview,centering,Ios,Uiview,Centering,我正在开发一个应用程序，遇到了一个我似乎无法解决的问题 我正在制作一个带有标签和图像的uiview。内容需要在视图内居中 问题是标签将容纳不同长度的文本，而视图本身的宽度将根据使用位置的不同而有所不同 下面是它的外观： 这里有更长的文字： 你可以看到左边有1个标签，中间有一个图片，右边有一个标签，中间都是中间的，即使文本长度不同。 这就是我到目前为止的代码。如果可能的话，我需要按程序来做。我正在运行一个方法，根据一个值创建按钮 func cost(cost:Int){ co

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

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

问题是标签将容纳不同长度的文本，而视图本身的宽度将根据使用位置的不同而有所不同

下面是它的外观：

这里有更长的文字：

<>你可以看到左边有1个标签，中间有一个图片，右边有一个标签，中间都是中间的，即使文本长度不同。

这就是我到目前为止的代码。如果可能的话，我需要按程序来做。我正在运行一个方法，根据一个值创建按钮

    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))

}
'无法分析约束格式： 选项遮罩需要在水平边缘对齐的视图，这对于同样水平的布局是不允许的。 H:|-[标签]-5-[大脑视图]-|

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

关于如何解决这个问题有什么线索吗

感谢您的帮助首先，将
.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])

costView！。添加子视图（标签）
//约束条件
var viewsDict=字典（）
viewsDict[“标签”]=标签
viewsDict[“大脑视图”]=costBrainImageView
viewsDict[“成本标签”]=成本标签
costView！。添加约束(
NSLayoutConstraint.constraintsWithVisualFormat(
“V:|[label]|”，选项：无，度量：无，视图：viewsDict）
costView！。添加约束(
NSLayoutConstraint.constraintsWithVisualFormat(
“V:|[brainView]|”，选项：无，度量：无，视图：viewsDict）
costView！。添加约束(
NSLayoutConstraint.constraintsWithVisualFormat(
“V:|[costLabel]|”，选项：无，指标：无，视图：viewsDict）
costView！。添加约束(
NSLayoutConstraint.constraintsWithVisualFormat(
“H:|-[label]-5-[brainView]-5-[costLabel]-|”，选项：NSLayoutFormatOptions.AlignAllCenterY，度量值：nil，视图：viewsDict））
costView！。backgroundColor=UIColor.redColor（）
//内部自我中心视图
让centerXCons=NSLayoutConstraint（项目：costView！，属性：.CenterX，关联方：.Equal，toItem:self，属性：.CenterX，乘数：1，常数：0）；
让centerYCons=NSLayoutConstraint（项目：costView！，属性：.CenterY，关联方：.Equal，toItem:self，属性：.CenterY，乘数：1，常数：0）；
self.addConstraints（[centerXCons，centerYCons]）
首先，将
.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])

costView！。添加子视图（标签）
//约束条件
var viewsDict=字典（）
viewsDict[“标签”]=标签
viewsDict[“大脑视图”]=costBrainImageView
viewsDict[“成本标签”]=成本标签
costView！。添加约束(
NSLayoutConstraint.constraintsWithVisualFormat(
“V:|[label]|”，选项：无，度量：无，视图：viewsDict）
costView！。添加约束(
NSLayoutConstraint.constraintsWithVisualFormat(
“V:|[brainView]|”，选项：无，度量：无，视图：viewsDict）
costView！。添加约束(
NSLayoutConstraint.constraintsWithVisualFormat(
“V:|[costLabel]|”，选项：无，指标：无，视图：viewsDict）
costView！。添加约束(
NSLayoutConstraint.constraintsWithVisualFormat(
“H:|-[label]-5-[brainView]-5-[costLabel]-|”，选项：NSLayoutFormatOptions.AlignAllCenterY，度量值：nil，视图：viewsDict））
costView！。backgroundColor=UIColor.redColor（）
//内部自我中心视图
让centerXCons=NSLayoutConstraint（项目：costView！，属性：.CenterX，关联方：.Equal，toItem:self，属性：.CenterX，乘数：1，常数：0）；
让centerYCons=NSLayoutConstraint（项目：costView！，属性：.CenterY，关联方：.Equal，toItem:self，属性：.CenterY，乘数：1，常数：0）；
self.addConstraints（[centerXCons，centerYCons]）
我认为您需要固定标签的宽度，而且您的选项应该为零。我不清楚代码中的内容与图像中的内容相对应。黑色圆角矩形是costView，还是costView是黑色矩形的子视图？我看到您正在将标签和图像视图添加到costView，而不是您称之为self.label的视图。为什么？哪个标签是self.label？还有，这段代码中的“self”是什么？@rdelmar self.view是实际的圆角矩形（类似于超级视图），它包含一些用于不同演示的方法，主要用于演示文本。costview拥有1个图像和1个标签。这主要是为了更容易地移动这两个对象，这样我只需要处理和居中两个对象，标签和costview。但也许这不是个好主意我想我可能根本不会使用costView，而是直接将2个标签和图像视图添加到黑色矩形中（或者如果您有其他理由，可以将所有3个标签都放在costView中）.我想你需要固定标签的宽度，而且你的选择应该为零。我不清楚你的代码中的内容与你的图像中的内容相对应。这是黑胭脂吗