iOS7 Autolayout and UIImageview oversized

Question

Please see my answer below, where I have a working solution

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

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

[captionImageView setContentCompressionResistancePriority:1 forAxis:UILayoutConstraintAxisHorizontal];

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

I have a ViewController that loads and adds subviews in a for loop and everything seems to be working ok there.

Inside these sub views I am trying to use autolayout to achieve the following:

Add a UIImageView and make it the same width as the parent window
Load a UIImage into this and use UIViewContentModeScaleAspectFill to make sure the image loads nice and proportionally.
Load a UITextView beneath all this
Repeat this process in the for loop so they all stack up nicely on top of one another.

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

If I specify the constraint as follows:

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

Then it works ok, but this is not the ideal solution as I want the UIImageView to be flush with the width of the device, and it's bad practice to set a fixed width

If I specify the constraint as follows like this:

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

Then the UIImage with a size of let's say 960px will force the parent container view to be that size as well.

I have my custom view content being loaded into a scroll view, and so we have horizontal scrolling which is bad.

Note that I am using a UIView category to specify that view.translatesAutoresizingMaskIntoConstraints is set to NO.

#import "UIView+Autolayout.h"

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

The code for the custom view is below. Any ideas as to how I can ensure the size of my UIImageView does not stretch beyond the bounds of 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

Zigii Wong · Answer 1 · 2015-01-04T03:07:05.300

1

You can handle it in this way.

Assume ViewA's width is equal to the device window 's width.In this case, you can just add a UIView. And set it up with constraints likes the usual view you had handled above.

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

Hope this help.

Edit:

Cause I am not very sure it will work or not in the way that you comment to me. So I just showed the code how I deal with.

1.set up the viewA

_viewA = [[UIView alloc] initWithFrame:[UIScreen mainScreen].bounds];

2.Just handle it likes your UIImageView (in this case, captionImageView)

[self.view addSubView:_viewA];
[_viewA setTranslatesAutoresizingMaskIntoConstraints:NO];

3.Add it into NSDictionaryBinding

NSDictionary *dictionary = NSDictionaryOfVariableBindings(_textView, _button, _viewA);

4.Custom the VFL and assign it.

NSString *const KButtonHorizontal = @"|[_button(_viewA)]|";

edited Jan 04 '15 at 03:07

answered Jan 04 '15 at 02:27

Zigii Wong

7,766
8
51
79

Hi and thanks for the help. What I did was grab the main screen bounds and put the width in as imageWidth which so far seems to have done the trick. My solution doesn't solve the issue but sidesteps it in a way. Here is what I added. `code` CGRect superBounds = [[UIScreen mainScreen] bounds]; NSDictionary *views = NSDictionaryOfVariableBindings(containerView, captionImageView, captionTextView); NSDictionary *metrics = @{@"imageWidth": @(superBounds.size.width), @"imageHeight": @"160.0", @"margin": @"20.0"}; – matfin Jan 04 '15 at 02:43
I find it odd though, that even though I am pinning the width of a view to both sides of the parent view, meaning it should fit the size of the window, that it blows up like this. I still need to figure out how to control the size of the UIImageView using constraints. – matfin Jan 04 '15 at 02:47

score 1 · Answer 2 · answered Jan 04 '15 at 05:13

This is the tech note that explains how to constrain a scroll view: https://developer.apple.com/library/ios/technotes/tn2154/_index.html

A quick and easy way to prevent the scroll view content size from growing is to subclass the scrollview and override -(CGSize)contentSize to return the windows width and whatever super returns for height.

score 1 · Answer 3 · edited Jul 15 '15 at 06:19

I got this working by Subclassing UIImageView and overriding intrinsicContentSize() to return the screen size... less code ;)

class CustomImageView: UIImageView
{

// - MARK: UIView

    override func intrinsicContentSize() -> CGSize
    {
        // Return current screen size with width adjusted for frame
        let width = UIScreen.mainScreen().bounds.width - frame.origin.x
        return CGSize(width: width, height: frame.height)
    }
}

score 0 · Accepted Answer · answered Jan 06 '15 at 14:39

I would not necessarily call this a definitive answer, but I was able to get it working somewhat the way I wanted to, although the solution I went with might not have been 100%.

-- The answer provided by Henry T Kirk was very useful in describing autolayout with image views. I could not get this working 100% but I would say this is the most correct answer in that it follows best practice.

-- The answer provided by WorldOfWarcraft also works. Creating a new view that stretches to 100% the width of the device window, and setting the constraint of the UIImage based on that will stop it from stretching beyond its bounds.

The solution I went with was to create a new CGRect variable called windowBounds. Extracting the window width from that (windowBounds.size.width), I was able to add this to my metrics, and apply it to the visual formatting string horizontal rule for the imageView, thus correcting the constraint for its superview.

After doing some work to refactor the code for this view, I have come up with a much neater solution that works, and also solves another issue I had with placing a UITextView with variable string content. The code is below.

** FigcaptionView.h **

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

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

@interface FigCaptionView(){}
@property (nonatomic, strong) UIImageView   *figCaptionImageView;
@property (nonatomic, strong) UITextView  *figCaptionTextView;
@end

@implementation FigCaptionView

@synthesize figCaptionImageView;
@synthesize figCaptionTextView;

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

    return self;
}

-(void)loadImage:(NSString *)imageURLPath {
    //TODO
}

-(void)addContentViews {
    [super layoutSubviews];

    /**
     *  Set up and add the subviews to display the content
     */
    self.figCaptionImageView = [UIImageView autoLayoutView];
    [self.figCaptionImageView setBackgroundColor:[UIColor lightGrayColor]];
    [self addSubview:figCaptionImageView];

    self.figCaptionTextView = [UITextView autoLayoutView];
    [self.figCaptionTextView setScrollEnabled:NO];
    [self.figCaptionTextView setText:@"The digital atlas teaches the cartographic and cultural contents with a highly dynamic and visual method. The idea is based on the phenomenon of “cabinets of wonder” from the 16th and 17th century. At this time European discoverers collected during their expeditions various exotic objects and on the turn to Europe replaced the found pieces to a universal collection."];

    [self addSubview:figCaptionTextView];

    /**
     *  Then apply the constraints
     */
    [self autoLayoutAddConstraints];
}

-(void)autoLayoutAddConstraints {

    /**
     *  Any set up values that we need
     */
    CGRect windowBounds = [[UIScreen mainScreen] bounds];

    /**
     *  Dictionary of views and metrics
     */
    NSDictionary *views = NSDictionaryOfVariableBindings(self, figCaptionImageView, figCaptionTextView);
    NSDictionary *metrics = @{@"imageWidth": @(windowBounds.size.width), @"margin": @20.0f};

    /**
     *  Constraints for this view (Vertical and horizontal)
     */
    [self addConstraints:[NSLayoutConstraint    constraintsWithVisualFormat:@"H:|[figCaptionImageView(imageWidth)]|"
                                            options:0
                                            metrics:metrics
                                            views:views
    ]];
    [self addConstraints:[NSLayoutConstraint    constraintsWithVisualFormat:@"V:|[figCaptionImageView][figCaptionTextView]|"
                                                                options:0
                                                                metrics:metrics
                                                                views:views
    ]];

    /**
     *  Constraints for the caption image view to maintain ratio
     */
    [self.figCaptionImageView addConstraint:[NSLayoutConstraint     constraintWithItem:self.figCaptionImageView
                                                                attribute:NSLayoutAttributeHeight
                                                                relatedBy:NSLayoutRelationEqual
                                                                toItem:self.figCaptionImageView
                                                                attribute:NSLayoutAttributeWidth
                                                                multiplier:0.75f
                                                                constant:0.0f
    ]];

    /**
     *  Constraints for the caption text view - horizontal
     */
    [self addConstraints:[NSLayoutConstraint     constraintsWithVisualFormat:@"H:|[figCaptionTextView]|"
                                                                options:0
                                                                metrics:metrics
                                                                views:views
    ]];
}

@end

Incase you were also wondering, I have included the implementation for UIView+Autolayout

** UIView+Autolayout.m **

//
//  UIView+Autolayout.m
//  Anna Christoffer
//
//  Created by Matthew Finucane on 19/12/2014.
//  Copyright (c) 2014 Anna Christoffer. All rights reserved.
//

#import "UIView+Autolayout.h"

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

score -1 · Answer 5 · edited May 23 '17 at 10:30

-1

You can try:

[captionImageView setClipsToBounds:YES];

try it right after you set aspect mode...

this might help: Crop UIImage to fit a frame image

EDIT

I just said about clipToBounds because even using autolayout from interface builder i had problems with my images in AspectFill mode, they would not respect the bounds of the imageview. But seems like your problem has more to do with layout constraints.

Try these constraints (notice the - sign next to the superview denoted as pipe |), it just adds the default aqua space to the constraints, it's simple but may work:

[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]];

edited May 23 '17 at 10:30

Community

1
1

answered Jan 04 '15 at 02:13

josecostamartins

11
1
2

Hey. I gave that a try and it didn't work unfortunately. One other thing I tried was to add to the metrics the size of the captionImageViews frame (frame.size.width) but that returns 0, which in the autolayout world I would assume is correct (?) given it's meant to be the long sought after answer to messy code involving calculating frames and bounds... – matfin Jan 04 '15 at 02:26
I tried reading what was in that link too and it didn't solve the problem. From my understanding of autolayout, doesn't it work in such a way that the content size of the children (in this case the UIImage view) dictates the widths of the parent views, so if I have a large image with a width of 960, that pushes the UIImageView to be that width, which then in turns affect the container UIview the UIImageView is inside, which then pushes the container UIView width out and this passes all the way up to the parent scroll view? If that is the case, I need to tell my UIImageView to behave but how? – matfin Jan 04 '15 at 02:32
Clip to bounds has nothing to do with the issue. – Henry T Kirk Jan 04 '15 at 04:52

iOS7 Autolayout and UIImageview oversized

5 Answers5