CODEWITHSUNDEEP
iosswiftautolayoutios-autolayout
nburk
nburk

Reputation: 22731

Centering a UIView programmatically using Autolayout makes the view disappear from superview

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.

enter image description here

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

Upvotes: 2

Views: 1023

Answers (1)

Oleg Sherman
Oleg Sherman

Reputation: 2802

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

}

Upvotes: 6

Related Questions