围绕以编程方式使用自动布局一个UIView，使视图从上海华消失 [英] Centering a UIView programmatically using Autolayout makes the view disappear from superview

问题描述

我有以下的code使用简单地中央有一个红色方形自动版式约束编程我的的ViewController 的视图：

 类的ViewController：UIViewController的{    让方：的UIView    所需的init（codeR ADE codeR：NS codeR）{
        让squareFrame = CGRectMake（0.0，0.0，500.0，500.0）
        self.square =的UIView（帧：squareFrame）        super.init（codeR：ADE codeR）
    }    覆盖FUNC viewDidLoad中（）{
        self.view.addSubview（self.square）
        self.square.backgroundColor = UIColor.redColor（）
        self.view.backgroundColor = UIColor.blueColor（）
        打印（self.square）
        setupConstraints（）
        打印（self.square）
    }
    FUNC setupConstraints（）{
        self.square.translatesAutoresizingMaskIntoConstraints = FALSE        NSLayoutConstraint（项目：self.view，属性：NSLayoutAttribute.CenterX，relatedBy：NSLayoutRelation.Equal，
            toItem：self.square，属性：NSLayoutAttribute.CenterX，事半​​功倍：1，恒：0）。主动=真
        NSLayoutConstraint（项目：self.view，属性：NSLayoutAttribute.CenterY，relatedBy：NSLayoutRelation.Equal，
            toItem：self.square，属性：NSLayoutAttribute.CenterY，事半功倍：1，恒：0）。主动=真
    }
}
 

由此产生的画面。但只显示蓝色的背景，没有红色正方形的迹象...使用的视图调试即使的功能在X code那么它不能被看到。

如果我注释掉 setupConstraints（），它可以作为预期与我在初始化过程中给广场上的原始帧。

顺便说一句，无论打印语句具有完全相同的输出：
＆LT;的UIView：0x7ff1c8d3f3e0;帧=（0 0 500 500）;层= LT; CALayer的：0x7ff1c8d04c00＆GT;＆GT;

如何能当方已经无处可看出这是什么？

更新：
当我加入宽度和高度限制由@HaydenHolligan在 setupConstraints提出的问题依然（）：

  FUNC setupConstraints（）{
    self.square.translatesAutoresizingMaskIntoConstraints = FALSE    NSLayoutConstraint（项目：self.view，属性：NSLayoutAttribute.CenterX，relatedBy：NSLayoutRelation.Equal，
        toItem：self.square，属性：NSLayoutAttribute.CenterX，事半​​功倍：1，恒：0）。主动=真
    NSLayoutConstraint（项目：self.view，属性：NSLayoutAttribute.CenterY，relatedBy：NSLayoutRelation.Equal，
        toItem：self.square，属性：NSLayoutAttribute.CenterY，事半功倍：1，恒：0）。主动=真    //以下行具有对于aboove提到的问题没有影响
    让sizeFormat =[方（100 @ 100）]
    让大小= NSLayoutConstraint.constraintsWithVisualFormat（sizeFormat，选择：NSLayoutFormatOptions.AlignAllCenterX，指标：无，意见：广场：self.square]）
    self.view.addConstraints（尺寸）
}
 

解决方案

试着改变你的setupConstraints FUNC这样：

  FUNC setupConstraints（）{    self.square.translatesAutoresizingMaskIntoConstraints = FALSE    让我们的centerX = NSLayoutConstraint（项目：self.view，属性：NSLayoutAttribute.CenterX，relatedBy：NSLayoutRelation.Equal，toItem：self.square，属性：NSLayoutAttribute.CenterX，事半​​功倍：1，常数：0）
    让centerY = NSLayoutConstraint（项目：self.view，属性：NSLayoutAttribute.CenterY，relatedBy：NSLayoutRelation.Equal，toItem：self.square，属性：NSLayoutAttribute.CenterY，事半功倍：1，常数：0）
    让squareWidth = NSLayoutConstraint（项目：self.square，属性：NSLayoutAttribute.Width，relatedBy：NSLayoutRelation.Equal，toItem：无，属性：NSLayoutAttribute.NotAnAttribute，事半功倍：1，恒：500）
    让squareHeight = NSLayoutConstraint（项目：self.square，属性：NSLayoutAttribute.Height，relatedBy：NSLayoutRelation.Equal，toItem：无，属性：NSLayoutAttribute.NotAnAttribute，事半功倍：1，恒：500）    self.view.addConstraints（[的centerX，centerY，squareWidth，squareHeight]）}
 

I have the following code to simply center a red square using AutoLayout constraints programmatically in my ViewController's view:

class ViewController: UIViewController {

    let square: UIView

    required init?(coder aDecoder: NSCoder) {
        let squareFrame = CGRectMake(0.0, 0.0, 500.0, 500.0)
        self.square = UIView(frame: squareFrame)

        super.init(coder: aDecoder)
    }

    override func viewDidLoad() {
        self.view.addSubview(self.square)
        self.square.backgroundColor = UIColor.redColor()
        self.view.backgroundColor = UIColor.blueColor()
        print(self.square)
        setupConstraints()
        print(self.square)
    }


    func setupConstraints() {
        self.square.translatesAutoresizingMaskIntoConstraints = false

        NSLayoutConstraint(item: self.view, attribute: NSLayoutAttribute.CenterX, relatedBy: NSLayoutRelation.Equal,
            toItem: self.square, attribute: NSLayoutAttribute.CenterX, multiplier: 1, constant:0).active = true
        NSLayoutConstraint(item: self.view, attribute: NSLayoutAttribute.CenterY, relatedBy: NSLayoutRelation.Equal,
            toItem: self.square, attribute: NSLayoutAttribute.CenterY, multiplier: 1, constant:0).active = true
    }
}

The resulting screen however only shows the blue background, no sign of the red square... Even when using the view debugging feature in Xcode it can't be seen.

If I comment out setupConstraints(), it works as "expected" with the original frame that I gave the square during initialisation.

By the way, both print statements have the exact same output: <UIView: 0x7ff1c8d3f3e0; frame = (0 0; 500 500); layer = <CALayer: 0x7ff1c8d04c00>>

How can this be when the square is nowhere to be seen?

Update: The issue remains when I am adding width and height constraints as suggested by @HaydenHolligan in setupConstraints():

func setupConstraints() {
    self.square.translatesAutoresizingMaskIntoConstraints = false

    NSLayoutConstraint(item: self.view, attribute: NSLayoutAttribute.CenterX, relatedBy: NSLayoutRelation.Equal,
        toItem: self.square, attribute: NSLayoutAttribute.CenterX, multiplier: 1, constant:0).active = true
    NSLayoutConstraint(item: self.view, attribute: NSLayoutAttribute.CenterY, relatedBy: NSLayoutRelation.Equal,
        toItem: self.square, attribute: NSLayoutAttribute.CenterY, multiplier: 1, constant:0).active = true

    // the following lines have no effect with respect to the issue mentioned aboove
    let sizeFormat = "[square(100@100)]"
    let size = NSLayoutConstraint.constraintsWithVisualFormat(sizeFormat, options: NSLayoutFormatOptions.AlignAllCenterX, metrics: nil, views: ["square": self.square])
    self.view.addConstraints(size)
}

解决方案

Try to change your setupConstraints func to this :

func setupConstraints() {

    self.square.translatesAutoresizingMaskIntoConstraints = false

    let centerX = NSLayoutConstraint(item: self.view, attribute: NSLayoutAttribute.CenterX, relatedBy: NSLayoutRelation.Equal,toItem: self.square, attribute: NSLayoutAttribute.CenterX, multiplier: 1, constant:0)
    let centerY = NSLayoutConstraint(item: self.view, attribute: NSLayoutAttribute.CenterY, relatedBy: NSLayoutRelation.Equal,toItem: self.square, attribute: NSLayoutAttribute.CenterY, multiplier: 1, constant:0)
    let squareWidth = NSLayoutConstraint(item: self.square, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1, constant:500)
    let squareHeight = NSLayoutConstraint(item: self.square, attribute: NSLayoutAttribute.Height, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1, constant:500)

    self.view.addConstraints([centerX , centerY ,squareWidth , squareHeight])

}

这篇关于围绕以编程方式使用自动布局一个UIView，使视图从上海华消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！