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.

Answer 1

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;
}

Answer 2

I personally used this for that pinterest like layout :

https://github.com/chiahsien/CHTCollectionViewWaterfallLayout

Answer 3

Use UICollectionViewDelegateFlowLayout method

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

Answer 4

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;