Unable to add top and centerX constraints programmatically

Question

let imageView = UIImageView(image: UIImage(named: "Loading"))
imageView.frame = CGRect(x: 100, y: 100, width: 200, height: 200)
imageView.center = self.view.center
self.view.addSubview(imageView)

let xConstraint = NSLayoutConstraint(item: imageView, attribute: .centerX, relatedBy: .equal, toItem: self.view, attribute: .centerX, multiplier: 1, constant: 0)
let verticalSpace = NSLayoutConstraint(item: imageView, attribute: .top, relatedBy: .equal, toItem: self.view, attribute: .bottom, multiplier: 1, constant: 100)
NSLayoutConstraint.activate([xConstraint, verticalSpace])

self.rotate(imageView: imageView, aCircleTime: 1)


let titleLabel = UILabel()
titleLabel.text = "Loading picker route"
titleLabel.textAlignment = .center
self.view.addSubview(imageView)


NSLayoutConstraint(item: titleLabel, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: self.view.frame.size.width).isActive = true
NSLayoutConstraint(item: titleLabel, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 44).isActive = true
NSLayoutConstraint(item: titleLabel, attribute: .centerX, relatedBy: .equal, toItem: imageView , attribute: .centerX, multiplier: 1, constant: 0).isActive = true
NSLayoutConstraint(item: titleLabel, attribute: .top, relatedBy: .equal, toItem: imageView, attribute: .bottom, multiplier: 1, constant: 100).isActive = true

Crash at last two lines with below report

Terminating app due to uncaught exception 'NSGenericException', reason: 'Unable to activate constraint with anchors <NSLayoutYAxisAnchor:0x2839a8540 "UILabel:0x115d12580.top"> and <NSLayoutYAxisAnchor:0x2839fc000 "UIImageView:0x115d10730.bottom"> because they have no common ancestor. Does the constraint or its anchors reference items in different view hierarchies? That's illegal.'

You don't add titleLabel to the view, you're adding imageView again. — James P
– James P, Commented Aug 31, 2021 at 8:00

Shehata Gamal · Accepted Answer · 2021-08-31 09:18:32Z

2

You need to add the the label

titleLabel.textAlignment = .center
self.view.addSubview(titleLabel)

plus these 2 lines

imageView.translatesAutoresizingMaskIntoConstraints = false
titleLabel.translatesAutoresizingMaskIntoConstraints = false

Edit:

let imageView = UIImageView(image: UIImage(named: "Loading"))
imageView.frame = CGRect(x: 100, y: 100, width: 200, height: 200)
imageView.center = self.view.center
self.view.addSubview(imageView)

let xConstraint = NSLayoutConstraint(item: imageView, attribute: .centerX, relatedBy: .equal, toItem: self.view, attribute: .centerX, multiplier: 1, constant: 0)
let verticalSpace = NSLayoutConstraint(item: imageView, attribute: .top, relatedBy: .equal, toItem: self.view, attribute: .top, multiplier: 1, constant: 100)
let width = NSLayoutConstraint(item: imageView, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 200)
let height =  NSLayoutConstraint(item: imageView, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 200)

NSLayoutConstraint.activate([xConstraint, verticalSpace,width,height])

self.rotate(imageView: imageView, aCircleTime: 1)

let titleLabel = UILabel()
titleLabel.text = "Loading picker route"
titleLabel.textAlignment = .center

self.view.addSubview(titleLabel)
 

imageView.translatesAutoresizingMaskIntoConstraints = false
titleLabel.translatesAutoresizingMaskIntoConstraints = false


NSLayoutConstraint(item: titleLabel, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: self.view.frame.size.width).isActive = true
NSLayoutConstraint(item: titleLabel, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 44).isActive = true
NSLayoutConstraint(item: titleLabel, attribute: .centerX, relatedBy: .equal, toItem: imageView , attribute: .centerX, multiplier: 1, constant: 0).isActive = true
NSLayoutConstraint(item: titleLabel, attribute: .top, relatedBy: .equal, toItem: imageView, attribute: .bottom, multiplier: 1, constant: 100).isActive = true

edited Aug 31, 2021 at 9:18

answered Aug 31, 2021 at 8:05

Shehata Gamal

101k8 gold badges75 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Code cracker Over a year ago

did you try the code i added in question?

AdPiscinam Over a year ago

I tested the edit, it works well : by centering horizontally and vertically the imageView and giving it width and height, there's no need then to add top/bottom anchors.

Collectives™ on Stack Overflow

Unable to add top and centerX constraints programmatically

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related