iOS: ImageView filled with a picture

Question

I have a table that contains the path to the picture, saved on user's library. Then, I pass this path to a View that contains just a imageView. I want to fills this ImageView with the picture. Like WhatsApp (when you click on a profile's picture). But, my picture it's always cropped or distorted. I tryed different ways to do this, but I didn't find the best way:

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.navigationController.navigationBar.translucent = NO;

    UIImage *picture = [UIImage imageWithContentsOfFile: self.picturePath]; //I passed this path from the previous View
    UIImageView* imageView = [[UIImageView alloc] initWithImage:picture];

    CGRect screenRect = [[UIScreen mainScreen] bounds];

    imageView.frame = CGRectMake(0, 0, screenRect.size.width, screenRect.size.height);
    imageView.contentMode = UIViewContentModeScaleAspectFill;

    [self.view addSubview:imageView];
}

Original Image, I want to show this Original (I want something like it)

My app My app

Can you maybe show screenshots of what it looks like, and better describe what you're expecting it to look like? — Mick MacCallum, Feb 25 '14 at 11:55
This might help: http://stackoverflow.com/questions/7838699/save-uiimage-load-it-in-wrong-orientation — Mick MacCallum, Feb 25 '14 at 12:08
This is good! Can helps me, but doesn't solve the problem. I already tried to rotate the picture. — Lücks, Feb 25 '14 at 12:10
Could you make a mock up of what you would like the result to be, given the example image above? — Rudi Angela, Feb 25 '14 at 12:32
@RudiAngela I want something like the first picture, or like WhatsApp — Lücks, Feb 25 '14 at 17:11
You cannot get what is on the first picture simply because it is not the same aspect ratio as a phone's screen, not even in landscape mode. In such cases you either make the image a bit bigger than the phone screen so that it fills it in both dimensions and crop it to screen size, or you make it fit entirely, but then get black bars in one dimension. So which of the two do you prefer? — Rudi Angela, Feb 26 '14 at 14:29

score 2 · Answer 1 · answered Feb 25 '14 at 11:59

2

If your image is cut , the reason is you are using a higher resolution image in a smaller container and instructed your imageview to fill , using this line imageView.contentMode = UIViewContentModeScaleAspectFill;

Change it to imageView.contentMode = UIViewContentModeScaleAspectFit;

answered Feb 25 '14 at 11:59

Rukshan

7,902
6
43
61

I did this and now the image is small. – Lücks Feb 26 '14 at 12:13

score 1 · Answer 2 · answered Feb 25 '14 at 12:23

I think @whitewolf09 is right and his method will solve your problem. But i suggest you to look into MGImageUtilities that will be very useful for different cases where you can crop images maintaining aspect ratio to fit inside your image view's frame.

Just #import "UIImage+ProportionalFill.h"
UIImage *image = [[UIImage imageWithContentsOfFile:filePath] imageScaledToFitSize:imageView.frame.size];

That's the very useful category for image resizing and may help you in future.

score 0 · Answer 3 · edited Mar 16 '16 at 13:09

I think the reason it is being clipped is that you are creating the image view with a picture THEN setting the frame and probably the picture is bigger than the frame so it is clipping it. Also try changing the aspect to: 'UIViewContentModeScaleAspectFit' Try this:

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.navigationController.navigationBar.translucent = NO;

    UIImage *picture = [UIImage imageWithContentsOfFile:self.picturePath]; //I passed this path from the previous View
    UIImageView* imageView = [[UIImageView alloc] initWithRect:CGRectMake(0, 0, screenRect.size.width, screenRect.size.height);];

    CGRect screenRect = [[UIScreen mainScreen] bounds];

    imageView.image = picture;
    imageView.contentMode = UIViewContentModeCenter;

    [self.view addSubview:imageView];
}

iOS: ImageView filled with a picture

3 Answers3