IOS7 Autolayout and UIImageview oversized

See my answer below where I have a working solution

I have completely rewritten the code so it is much smaller and tidier and achieves the same results

Update. It looks like the size of the internal content of the UIImageView adjusts when the large image is loaded, which throws its layout and makes it twice the width of the device window and scroll. I need to figure out how to fix this. The code below made a small change and reduced the width of the UIImageView, but did not allow me to set it to 100% of the window width.

[captionImageView setContentCompressionResistancePriority:1 forAxis:UILayoutConstraintAxisHorizontal];

      

        
        
        
      

    

I have the following setup for my views and my problem is that the image inside the UIImageView is pushing the width of its containing view to the width than the device window.

I have a ViewController that loads and adds a subview to a for loop and everything seems to be working fine.

Within these submenus, I am trying to use autostart to achieve the following:

• Add UIImageView and make it the same width as the parent window

• Load the UIImage into that and use UIViewContentModeScaleAspectFill to make sure the image loads nicely and proportionally.

• Load UITextView underneath it all
• Repeat this process in the for loop so that they all stack well on top of each other.

I am using a constraint in the Visual Formatting Language to try and set the size of the UIImage view to be the width of the parent view, which I want to be the width of the device window.

If I specify the constraint like this:

[containerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[captionImageView(320)]|" options:0 metrics:metrics views:views]];

      

        
        
        
      

    

Then it works fine, but it is not a perfect solution as I want the UIImageView to be flush with the device width and it is bad practice to set a fixed width

If I specify the constraint like this:

[containerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[captionImageView]|" options:0 metrics:metrics views:views]];

      

        
        
        
      

    

Then UIImage with let say size 960px will force the parent container view to be the same size.

I have a custom viewable content that loads into a scroll view and so we have horizontal scrolling which is bad.

Note that I am using the UIView category to indicate that view.translatesAutoresizingMaskIntoConstraints is NO.

#import "UIView+Autolayout.h"

@implementation UIView (Autolayout)
+(id)autoLayoutView {
    UIView *view = [self new];
    view.translatesAutoresizingMaskIntoConstraints = NO;
    return view;
}
@end

      

        
        
        
      

    

Below is the code for the custom view. Any ideas as to how I can ensure the size of my UIImageView doesn't extend beyond the device window?

//
//  FigCaptionView.m
//  
//
//  Created by Matthew Finucane on 18/12/2014.
//  Copyright (c) 2014 The App. All rights reserved.
//

#import "FigCaptionView.h"
#import "UIView+Autolayout.h"

@interface FigCaptionView(){}
@end

@implementation FigCaptionView

-(id)initWithData:(NSDictionary *)viewData {
    if((self = [FigCaptionView autoLayoutView])) {
        self.figCaptionData = viewData;
    }

    return self;
}

-(void)layoutItems {
    [self setBackgroundColor:[UIColor redColor]];

    /**
     *  The container view for everything
     */
    UIView *containerView = [UIView autoLayoutView];

    /**
     *  Setting up the caption image
     */
    UIImageView *captionImageView = [UIImageView autoLayoutView];
    [captionImageView setContentMode:UIViewContentModeScaleAspectFill];

    /**
     *  Grabbing the image (not yet the right way to do this)
     */
    dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
    UIImage *image = [UIImage imageWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:@"http://placekitten.com/960/240"] options:0 error:nil]];

    dispatch_async(dispatch_get_main_queue(), ^{
        captionImageView.image = image;
    });
});

    /**
     *  Setting up the caption image
     */
    UITextView *captionTextView = [UITextView autoLayoutView];
    [captionTextView setText:@"Sample paragraph text will go in here. Sample paragraph text will go in here. Sample paragraph text will go in here. Sample paragraph text will go in here. Sample paragraph text will go in here.Sample paragraph text will go in here"];

    /**
     *  Adding the container view
     */
    [self addSubview:containerView];
    [containerView addSubview:captionImageView];
    [containerView addSubview:captionTextView];

    [captionTextView setBackgroundColor:[UIColor blueColor]];


    /**
     *  Dictionaries for autolayout: views and metrics
     */
    NSDictionary *views = NSDictionaryOfVariableBindings(containerView, captionImageView, captionTextView);
    NSDictionary *metrics = @{@"imageHeight": @"160.0", @"margin": @"20.0"};

    /**
     *  Setting up the constraints for this view
     */
    [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[containerView]|" options:0 metrics:metrics views:views]];
    [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[containerView]|" options:0 metrics:metrics views:views]];

    /**
     *  Container view constraints
     *
     *  The first constraint is the one that might be causing me trouble.
     */
    [containerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[captionImageView]|" options:0 metrics:metrics views:views]];
    [containerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[captionTextView]|" options:0 metrics:metrics views:views]];
    [containerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[captionImageView(imageHeight)][captionTextView]|" options:NSLayoutFormatAlignAllLeft metrics:metrics views:views]];


    for(UIView *view in self.subviews) {
        if([view hasAmbiguousLayout]) {
            NSLog(@"OOPS");
            NSLog(@"<%@:0x%0x>", view.description, (int)self);
        }
    }
}

@end