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 want to align the label to the left of the screen, and the button to the right of the screen. For some reason, my button only aligns to the left of my scrollview. I've pared down my code so that it's only these two labels and I can't understand why it won't align to the right.

HWScrollViewController.m (How I'm initializing the main scroll view)

- (void)loadView
{
    self.scrollView = [[UIScrollView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]];

    self.scrollView.delegate = self;

    self.view = self.scrollView;
}

HWListingDetailViewController.m

- (void)viewDidLoad
{
[super viewDidLoad];

UILabel *priceLabel = [[UILabel alloc] init];
UIButton *favouriteButton = [UIButton buttonWithType:UIButtonTypeContactAdd];

[priceLabel setTranslatesAutoresizingMaskIntoConstraints:NO];
[favouriteButton setTranslatesAutoresizingMaskIntoConstraints:NO];

[priceLabel setText:@"$125.00"];
[favouriteButton setTitle:@"Add to Favourites" forState:UIControlStateNormal];

[self.view addSubview:priceLabel];
[self.view addSubview:favouriteButton];

[self.view addConstraints:@[
    [NSLayoutConstraint constraintWithItem:priceLabel 
                                 attribute:NSLayoutAttributeCenterY
                                 relatedBy:NSLayoutRelationEqual 
                                    toItem:self.view 
                                 attribute:NSLayoutAttributeCenterY 
                                multiplier:1 
                                  constant:0],

    [NSLayoutConstraint constraintWithItem:priceLabel 
                                 attribute:NSLayoutAttributeLeft 
                                 relatedBy:NSLayoutRelationEqual 
                                    toItem:self.view 
                                 attribute:NSLayoutAttributeLeft 
                                multiplier:1 
                                 constant:5],

    [NSLayoutConstraint constraintWithItem:favouriteButton 
                                 attribute:NSLayoutAttributeCenterY 
                                 relatedBy:NSLayoutRelationEqual 
                                    toItem:self.view 
                                 attribute:NSLayoutAttributeCenterY 
                                multiplier:1 
                                  constant:0],

    [NSLayoutConstraint constraintWithItem:favouriteButton 
                                 attribute:NSLayoutAttributeRight 
                                 relatedBy:NSLayoutRelationEqual 
                                    toItem:self.view 
                                 attribute:NSLayoutAttributeRight 
                                multiplier:1 
                                  constant:5],

}

As you can see, the green price label is aligned correctly, but the red button is way off of the lefthand side of the screen. (I gave it 5 pixels of offset to show where it was.) So, why is the right side of the scrollview actually the left side? How can I properly align to the right of the screen? Where did I go wrong? This is driving me crazy!

Thanks for any help!

Final layout images: I'm hoping for the final layout to be something like this:

and I would expect it to look like this if rotated to landscape:

Answer 1

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