Auto Layout iOS 7 - Can't align right of subview to right of UIScrollView

Question

I am programmatically building a view and using autolayout, no interface builder at all. In a custom ScrollView controller, I am adding a UILabel and a UIButton as subviews. I w

Answer 1

You don't have enough constraints for the button. Actually, you haven't got enough constraints for the label either, but that won't necessarily stop your button aligning to the right of the screen.

You always must have constraints which specify how a view behaves in both horizontally and vertically. Usually this means a minimum of four constraints - x, y, width and height. If you don't, iOS will guess for you and chances are it'll be wrong. You'll probably notice a few warnings get thrown up in the Xcode console.

For this problem, it really depends on exactly how you want your view to look, but the simplest solution is to just set a width constraint for the button. You can do that like this:

[NSLayoutConstraint constraintWithItem:favouriteButton 
                             attribute:NSLayoutAttributeWidth  
                             relatedBy:NSLayoutRelationEqual 
                             toItem:nil 
                             attribute:NSLayoutAttributeNotAnAttribute 
                             multiplier:1.0 
                             constant:64.0];

Where 64.0f if the width of the button.

If you want the button to be to the right of the label and share the same width (ie, each taking up 50% of the screen), you can do this:

    [NSLayoutConstraint constraintWithItem:favouriteButton
                                 attribute:NSLayoutAttributeLeading
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:priceLabel
                                 attribute:NSLayoutAttributeTrailing
                                multiplier:1.0f
                                  constant:0.0f];

    [NSLayoutConstraint constraintWithItem:favouriteButton
                                 attribute:NSLayoutAttributeWidth
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:priceLabel
                                 attribute:NSLayoutAttributeWidth
                                multiplier:1.0f 
                                  constant:0.0f];

All the above two constraints do is set the trailing edge of the label to the leading edge of the button and then says that both views must be the same width.

You should also really add height constraints to both views (or top and bottom constraints). I know you've got a vertical centering constraint, but that doesn't specify its size. iOS may work it out by content height, but chances are it'll throw up warnings in the console.

Answer 2

The number of constraints is not an issue. Both UILabel and UIButton will determine their size based on their intrinsicContentSize and since you have constraints for the position, it should have all the information it needs for layout.

However, when it comes to autolayout, UIScrollViews behave in a unique way. The best description comes from this technical note. There are two options available including examples, but heres a summary of each.

---

Mixed Approach

You just need to add a UIView to the UIScrollView then add and position all your subviews in the UIView. This requires you manually setting the frame of the UIView and the contentSize on the UIScrollView.

This is probably the easiest to use with the layout your trying to achieve. However, if the contentSize can change, you'll have to manually calculate and update the size.

---

Pure Auto Layout Approach

This option uses your autolayout constraints to determine the contentSize of the UIScrollView. This requires constraints going to all four edges of the UIScrollView and can not rely on the size of the UIScrollView.

This option is tougher to use since you need to make sure you have enough constraints. In your case, you'll run into issues because there are no constraints to the top and bottom of the UIScrollView and there are no constraints that can be used to determin the width of the UIScrollView. However, this option is amazing when you have to deal with dynamic content as it will resize the contentSize as needed.

---

Personally, I would go with the Pure Auto Layout Approach. It's ability to handle dynamic content sizes makes the extra constraint setup worth it.

If you post what you want the final layout to be, I'll update my answer to reflect that.

---

Update

Based on the images you posted, this is the way I would organize the subviews using the Pure Auto Layout Approach. The main difference is that the UIScrollView is now a a subview of the UIViewControllers view.

- UIView                                            (self.view)
  - UIScrollView                                    (scrollView)
    - UIView                                        (contentView)
      - UIImageView, UIButtons, UILabels, etc.

scrollView needs constraints so its edges are 0px from self.view.

contentView needs constraints so its edges are 0px from scrollView and that its width equals self.view. This is so the contentSize of the scrollView updates when you rotate the device.

Next just position all your images and labels the way you want. The label will need to be constrained to the left and right so it can calculate its height. The important thing to note is contentView will determine its height based on the constraints for its subviews, so you will need constraints "linking" the top and bottom of the contentView. A simeple example would look like this.

• contentView top to imageView top
• imageView height == some value
• imageView bottom to label top
• label bottom to contentView bottom