UICollectionViewCell with Dynamic height having the use of NSURL for Image downloading

Question

Hi, Currently, I'm busy with my one of the project having the concept of Dynamic UI like Pinterest

I need the UI like above image . For this, I have used UICollectionView and tried to give dynamic height for each and every cell. I couldn't get any success to achieve UI like this. I had also used some customized UICollectionView namely "PSCollectionView", "PSTCollectionView" etc..

In all examples, I found one common thing regarding images and their height. They all fetches images from local source and stores the height of images in local storage or directly fetches the height from the images where I need to fetch images from Web-server using NSURL and then I can give the height to each and every cell.. But how can I do this? Any idea about this ... Please let me know if you have any proper solution.

Reference images are given below.

enter image description here

from where are you getting the web services? I mean is this from a public source ? — Sharanya K M, Feb 12 '14 at 09:58
@Nilesh Have you get dynamic cell size? I also want to do same as you. But i also add up the label with that image. — Jagat Dave, Feb 08 '16 at 05:35

score 3 · Accepted Answer · answered Feb 14 '14 at 05:52

I would like to go with this approach for my existing project having dynamic images and one more thing you will get fastest response.

-(void)fillSizeArray
{
    for (int i=0; i<[self.arrGCCategory count]; i++)
    {
        NSNumber *width = [NSNumber numberWithFloat:200];
        NSNumber *height = [NSNumber numberWithFloat:200];

        NSString *urlString = [[self.arrGCCategory objectAtIndex:i] valueForKey:@"Photo"];
        NSURL *imageFileURL = [NSURL URLWithString:urlString];
        CGImageSourceRef imageSource = CGImageSourceCreateWithURL((__bridge CFURLRef)imageFileURL, NULL);
        if (imageSource) {
            NSDictionary *options = [NSDictionary dictionaryWithObjectsAndKeys: [NSNumber numberWithBool:NO], (NSString *)kCGImageSourceShouldCache, nil];
            CFDictionaryRef imageProperties = CGImageSourceCopyPropertiesAtIndex(imageSource, 0, (__bridge CFDictionaryRef)options);
            if (imageProperties) {
                width = (NSNumber *)CFDictionaryGetValue(imageProperties, kCGImagePropertyPixelWidth);
                height = (NSNumber *)CFDictionaryGetValue(imageProperties, kCGImagePropertyPixelHeight);
                NSLog(@"Image dimensions: %@ x %@ px", width, height);
                CFRelease(imageProperties);
            }
        }
        CGSize size = CGSizeMake([width floatValue], [height floatValue]);
        [self.cellHeights addObject:[NSValue valueWithCGSize:size]];
    }
}

#pragma mark - CHTCollectionViewDelegateWaterfallLayout

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    CGSize size = [[self.cellHeights objectAtIndex:indexPath.row] CGSizeValue];
    return size;
}

score 1 · Answer 2 · answered Feb 12 '14 at 09:54

1

I personally used this for that pinterest like layout :

https://github.com/chiahsien/CHTCollectionViewWaterfallLayout

answered Feb 12 '14 at 09:54

Rom.

2,800
2
17
19

1

Thanks for suggestion but I have already used it in my project .. currently , I'm working for variable height of images coming from web-server. – Nilesh Prajapati Feb 14 '14 at 05:46

score 0 · Answer 3 · answered Feb 12 '14 at 09:49

0

Use UICollectionViewDelegateFlowLayout method

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath;

answered Feb 12 '14 at 09:49

Mika

5,807
6
38
83

score 0 · Answer 4 · answered Jul 06 '16 at 17:47

MIght It would be late, But whom so ever is trying to get dynamic cell height in collectionviewcontroller for its customized cell or if any one facing flickering kid of issue, please make sure you are using sizeForItemAtIndexPath method from UICollectionViewDelegateFlowLayout

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath;

UICollectionViewCell with Dynamic height having the use of NSURL for Image downloading

4 Answers4