CODEWITHSUNDEEP
iosobjective-cuicollectionview
casillas
casillas

Reputation: 16793

Image fits into UICollectionView Cell

I am using collectionview to display the products where I fetched from the server. However images does not fit into the collectionview cell. I wonder is there a way of fixing it?

NSURL *url = [NSURL URLWithString:@"http://www.myURL/productAll.php"];
NSURLRequest *request = [NSURLRequest requestWithURL:url];
[NSURLConnection sendAsynchronousRequest:request queue:[NSOperationQueue mainQueue] completionHandler:^(NSURLResponse *response, NSData *data, NSError *connectionError) {
    NSError *myError = nil;
    id res = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingMutableLeaves error:&myError];        
    items = [[NSMutableArray alloc] init];
    for (int i=0; i<[res count]; i++) {
        NSString *arrayResult = [[res objectAtIndex:i]objectForKey:@"image"];            
        NSData *data = [[NSData alloc] initWithBase64EncodedString:arrayResult options:NSDataBase64DecodingIgnoreUnknownCharacters];
        UIImage *captcha_image = [[UIImage alloc] initWithData:data];
        [items addObject:captcha_image];
    }
    [collectionView reloadData];
}];

Here is the collectionView cell design, imageView dimension matches with collectionView cell. enter image description here

Here is what user sees:

enter image description here

Here are the extra information from ImageView

enter image description here

enter image description here

cellCollectionView

enter image description here

Upvotes: 2

Views: 2194

Answers (2)

Bagrat Kirakosian
Bagrat Kirakosian

Reputation: 455

First of all, modern Apple devices get various sizes. It's not 2010 anymore when you design only for one screen. Move to Autolayout.
Secondly, below you can find a very detailed explanation of how to do all the proper Setup.

  1. Click on your image view
  2. Click on the pin constraints button
  3. Put down the constants(same as margins) and select/highlight the red connectors box-to-numbers
  4. Uncheck "Constraints to margins" checkbox
  5. Click add 4 constraints button
  6. Be Sure your image view mode is Aspect Fill
  7. Don't forget to check important "Clip subviews" checkbox, unless you will see enlarged images over each other

Detailed explanation for adding constants

Detailed explanation for Image View setup

Upvotes: 4

Gil Sand
Gil Sand

Reputation: 6040

Do not use frames, ever.

It's 2015, use autolayout.

Create your classic custom cell, put an imageview there and put it's top, left, right and bottom constraints to the edge of the actual cell.

Don't forget to link your outlet imageview to your .h file and set it's image when creating the cell.

Boom, you're good to go, your image will always fill the space of the cell.

You'll probably need to set clip subviews to true on your cell if you have rounded corners.

Thought in your case, just showing an imageview in the cell should be fine without constraints if your cell has the exact same size as your imageview in your protocell, and of course that your imageview takes the whole protocell.

Upvotes: 0

Related Questions