iOS: Align UIImageView to top

Question

I've got a viewcontroller I'm using to load an image from the web. The image is usually going to be much larger than the viewport so I'm scaling it down and placing it in a UIImageView. The problem is it doesn't want to align to the top of the viewport. How would I fix this. Here's the code:

- (void)viewDidLoad
{
NSURL *imageURL = [NSURL URLWithString:[[self exhibit] image]];

NSData *imageData = [NSData dataWithContentsOfURL:imageURL];
UIImage *image = [UIImage imageWithData:imageData];

UIImageView *iv = [[UIImageView alloc] initWithImage:image];


[iv setContentMode:UIViewContentModeScaleAspectFit];
[iv setTranslatesAutoresizingMaskIntoConstraints:NO];
[[self view] addSubview:iv];
[self setImageView:iv];

NSDictionary *nameMap = @{@"imageView" : [self imageView]};

NSArray *horizontalConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-10-[imageView]-10-|"
                                                                         options:NSLayoutFormatAlignAllCenterX
                                                                         metrics:nil
                                                                           views:nameMap];
[[self view] addConstraints:horizontalConstraints];

NSArray *verticalConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-0-[imageView]"
                                                                         options:NSLayoutFormatAlignAllTop
                                                                         metrics:nil
                                                                           views:nameMap];
[[self view] addConstraints:verticalConstraints];

NSLog(@"%@", NSStringFromCGRect([[self imageView] frame]));
}

The log at the end shows that the UIImageView is the size of the original image size not the scaled down version. I'm assuming this is the problem, but I'm not sure how to fix it.

Well, the contentMode UIViewContentModeScaleAspectFit is the reason that your image view is the size of your original image. You can try switching to UIViewContentModeScaleToFill (or just delete the line where you set contentMode, since UIViewContentModeScaleToFill is the default). — geraldWilliam, Jun 20 '13 at 17:25
Yes, you're right. I guess I'm not totally sure what the issue is. You want your image view to be 0 px from the top edge of your superview? Or you want your image view to be the size of a scaled down version of your image? — geraldWilliam, Jun 20 '13 at 17:36
I'd like the image to be scaled down to fit within the view and be aligned to the top of the view. That make sense? — LoneWolfPR, Jun 20 '13 at 17:44
Are your autolayout constraints doing anything at all? I think you either want the view in your visual format language string to be [iv] or [_imageView]. Sorry for all the comments but I'm not really sure how to answer your question. — geraldWilliam, Jun 20 '13 at 17:52
I'm not using a .xib file. Everything is laid out programatically. — LoneWolfPR, Jun 20 '13 at 17:55
Im not sure either about the issue but have you seen this? http://stackoverflow.com/questions/11039943/ios-uiimage-aspect-fit-and-align-to-top — Gotschi, Jun 20 '13 at 18:09
I followed that and went to the link in the post. I couldn't make the suggestions there work. — LoneWolfPR, Jun 21 '13 at 17:43

score 0 · Accepted Answer · edited May 23 '17 at 11:52

I made another solution work. I modified this solution to work for me: What's the easiest way to resize/optimize an image size with the iPhone SDK?

I only need to modify the image if the screenwidth is less than 600px. I also know in advance the aspect ratio of the images I'll be using.

Here's my new viewDidLoad

- (void)viewDidLoad
{
NSURL *imageURL = [NSURL URLWithString:[[self exhibit] image]];

NSData *imageData = [NSData dataWithContentsOfURL:imageURL];
UIImage *image = [UIImage imageWithData:imageData];

if ([[UIScreen mainScreen] bounds].size.width < 600 ) {
    CGSize newSize = CGSizeMake(300.0, 140.6);
    UIGraphicsBeginImageContext(newSize);
    [image drawInRect:CGRectMake(0.0, 0.0, newSize.width, newSize.height)];
    image = UIGraphicsGetImageFromCurrentImageContext();
}

NSLog(@"%@",NSStringFromCGSize([image size]));

CGRect frame = CGRectMake(0.0, 0.0,image.size.width,image.size.height);
UIImageView *iv = [[UIImageView alloc] initWithFrame:frame];
[iv setImage:image];
[iv setContentMode:UIViewContentModeScaleAspectFit];
[iv setTranslatesAutoresizingMaskIntoConstraints:NO];
[iv setBackgroundColor:[UIColor redColor]];
[[self view] addSubview:iv];
[self setImageView:iv];

[[self imageView] setFrame:CGRectMake(0.0, 0.0, 300.0, 140.6)];


NSDictionary *nameMap = @{@"imageView" : [self imageView]};

NSArray *horizontalConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-10-[imageView]-10-|"
                                                                         options:NSLayoutFormatAlignAllCenterX
                                                                         metrics:nil
                                                                           views:nameMap];
[[self view] addConstraints:horizontalConstraints];

NSArray *verticalConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-0-[imageView]"
                                                                         options:NSLayoutFormatAlignAllTop
                                                                         metrics:nil
                                                                           views:nameMap];
[[self view] addConstraints:verticalConstraints];
}

iOS: Align UIImageView to top

1 Answers1