Width and Height NSLayoutConstraints on UIImageView not working

Question

I am setting the .Width and .Top NSLayoutConstraints on a UIImgeView instance inside my View Controller's updateViewConstraints() . In the XCode visual debugger i can see the constraints are actually set, but for some reason they are not being used (?) they appear un (content size) and are greyed out. When i output the constraints using NSLog i can also see they are set, but somehow the image stays the original size ... What does this mean?

constraints in parent: [<NSLayoutConstraint:0x7b379590 UIImageView:0x7af897b0.centerX == UIView:0x7b37d2e0.centerX>, 
                        <NSLayoutConstraint:0x7b36e3d0 V:|-(0)-[UIImageView:0x7af897b0]   (Names: '|':UIView:0x7b37d2e0 )>]
constraints in view: [<NSContentSizeLayoutConstraint:0x7ae892b0 H:[UIImageView:0x7af897b0(301)] Hug:251 CompressionResistance:750>, 
                      <NSContentSizeLayoutConstraint:0x7ae834e0 V:[UIImageView:0x7af897b0(365)] Hug:251 CompressionResistance:750>]

Code that sets the constraints :

/// Image view with the character + ellipse
@IBOutlet weak var charImageView: UIImageView!

override func updateViewConstraints() {
      super.updateViewConstraints()
      charImageView.widthLayoutConstraint?.constant = 301.0
      charImageView.heightLayoutConstraint?.constant = 365.0
}

The extension i use to get widthLayoutConstraint and heightLayoutConstraint

extension UIView{
  /**
   Gets the width layout constraint defined as the NSLayoutConstraint whose first item is self and first attribute is Height
   */
  var heightLayoutConstraint:NSLayoutConstraint? {
      get{
          for constraint in constraints {
              if  constraint.firstItem as? UIView == self &&
                  constraint.firstAttribute == NSLayoutAttribute.Height
              {
                  return constraint
              }
          }
          return nil
      }
  }

  /**
   Gets the width layout constraint defined as the NSLayoutConstraint whose first item is self and first attribute is Width
   */
  var widthLayoutConstraint:NSLayoutConstraint? {
      get{
          for constraint in constraints {
              if  constraint.firstItem as? UIView == self &&
                  constraint.firstAttribute == NSLayoutAttribute.Width
              {
                  return constraint
              }
          }
          return nil
      }
  }
}

This is how the layout constraints are added initially using IB. As you can see they are added for the Compact Width size Class, which i am using when i see the problem (iPhone4S simulator).

The constraints are already added via IB and i am updating their constant with code. The debugger shows clearly that the constant IS IN FACT UPDATED but somehow the image gets drawn in the original size.

Answer 1

Grey color constraints show that these constraints are exist but not installed in your views.

Refer below image:

1. Select grey constraint
2. Open attribute inspector
3. At bottom you can see Installed option
4. If it is uncheck then enable this by clicking check mark
5. This will install selected constraint in your view

Update:

You can add width constraint using below code:

self.addConstraint(NSLayoutConstraint(
        item: charImageView,
        attribute: .Width,
        relatedBy: .Equal,
        toItem: nil,
        attribute: .NotAnAttribute,
        multiplier: 1.0,
        constant: 301.0))

You can update constraint value using my other answer:

Update constraint's constant value programatically