UICollectionView Custom Layout Tutorial: Pinterest

Hi.
Is there any way to make the first one full width? As one column and others as two/more?
Best, Patryk

Hi, I used the concepts this tutorial in my app. The app would occasionally crash complaining that there weren’t enough attributes. According to the definition of layoutAttributesForElementsInRect() And the tutorial you’re suppose to return the attributes that are within the rect and that’s what I was doing.

I did some research and found an Apple example Collection View Transitions where it returns the entire array of cached attributes. This collection view has items beyond the size of the device so I would have expected that it return only a subset of the attributes.

I changed my app to return all cached attributes (ignoring the rect) and now everything works fine.

Any idea why, apparently sometimes, all cached attributes are needed?

Thanks.

Try ratio for image :D. That’s the key!!

I am Loading The Data From The Api For The First Time I m Getting 20 Counts in Array And the Data gets filled in the Collection View Very Perfectly.

While trying to reload data when user reaches the end of the first 20 counts the reload collection view returns 40 counts but the data doesn’t gets filled in for the second twenty please let me know if there is some prob in the class or from my side in the code.

As I Have Tried up many different solutions for Reloading the Collection View But none of them are getting Worked

i m calling the below func when users get on 19 indexpath so as i can load another data to display.

func reloadData(response:NSDictionary){

    if(response.valueForKey("success")?.boolValue == true){
        isCallable = false
        pageIndex = pageIndex + 20
        arrData.addObjectsFromArray(response.valueForKey("data") as! NSMutableArray as [AnyObject])
        NSLog("ARRAY DATA == >%@",arrData)

// dispatch_async(dispatch_get_main_queue(),{
// collectionView.reloadData()
// collectionView.layoutIfNeeded()
// });
NSOperationQueue.mainQueue().addOperationWithBlock({
self.collectionView.reloadData()

        })
    }
        
    else{

          CommonNSObject.showAlert("FAILED TO LOAD DATA")
        
    }
}

I am Loading The Data From The Api For The First Time I m Getting 20 Counts in Array And the Data gets filled in the Collection View Very Perfectly.

While trying to reload data when user reaches the end of the first 20 counts the reload collection view returns 40 counts but the data doesn’t gets filled in for the second twenty please let me know if there is some prob in the class or from my side in the code.

As I Have Tried up many different solutions for Reloading the Collection View But none of them are getting Worked

i m calling the below func when users get on 19 indexpath so as i can load another data to display.

func reloadData(response:NSDictionary){

if(response.valueForKey("success")?.boolValue == true){
    isCallable = false
    pageIndex = pageIndex + 20
    arrData.addObjectsFromArray(response.valueForKey("data") as! NSMutableArray as [AnyObject])
    NSLog("ARRAY DATA == >%@",arrData)

// dispatch_async(dispatch_get_main_queue(),{
// collectionView.reloadData()
// collectionView.layoutIfNeeded()
// });
NSOperationQueue.mainQueue().addOperationWithBlock({
self.collectionView.reloadData()

    })
}

else{

      CommonNSObject.showAlert("FAILED TO LOAD DATA")
    
}

}

Hello,

Is it possible to match the height for the rows ?
So for example if let’s say column 1 calculated height is 50px, and column 2 is 60, I want to keep them both at 60, and add padding to column 1.
I tried to do this with auto layout but I couldn’t get the first column to match the height the second one.

Hello, thanks for great tutorial! It just works perfectly.

The only thing that I noticed when the number of cells is changed, it crashes.
I have tried to debug and sow that the problem was the array of caches which will cache also the UICollectionViewLayoutAttributes.

My solution was to add:

@interface PinterestLayout : UICollectionViewLayout
…
- (void)invalidateLayout
{
[self.cache removeAllObjects];
[super invalidateLayout];
}
…
@end

// call to reload the collection view
[self.collectionView.collectionViewLayout invalidateLayout];
[self.collectionView reloadData];

Sorry for Objective-C :slight_smile:

Has anybody been able to use this pinterest layout with async api calls? Like Alamofire? I’ve been having trouble when it reloads the data. And also the cells that are supposed to load after the second pagination is not returning back. Looks like alot of people are having a similar problem with async calls and using this layout. I think we should have the OP chime in on this issue with some support. Would really appreciate the help if we knew why this isn’t working.

Could this be something wrong with the datasoure?

Cheers!

2 Likes

For me same issue can any one help me out

Does anyone know what the class UIImage+Decompression.swift is doing?

extension UIImage {
var decompressedImage: UIImage {
UIGraphicsBeginImageContextWithOptions(size, true, 0)
drawAtPoint(CGPointZero)
let decompressedImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return decompressedImage
}
}

It looks like we are redrawing the image, and the only thing we’re doing is specifying that there’s no transparency and no scaling. Can anyone tell me if/why this was required in the project?

Would be interested to know on how to use this layout where I mage is downloaded from web. Do I need to call invalidate layout?
Invalidate Layout

1 Like

am also trying to find a solution. no luck. did you manage to do it? if so, how? :slight_smile:

1 Like

Do anyone know how to add a supplementary view for a header of the custom collectionView layout?

Nice tutorial! Very helpful

Hey guys, thanks for the great tutorial :slight_smile: I notice it has been updated for swift !

That’s awesome, but is an objC version still available ? In order to smoothly integrate it in an older project that doesn’t have any Swift in it

Thanks in advance !

Just wanted to say that this article save my day or probably three or four days. Anyway, thank you very much!

I was using this layout, and had it working at one point, but now it crashes inside the line in the file AnnotatedPhotoCell.swift:

imageViewHeightLayoutConstraint.constant = attributes.photoHeight

It says that imageViewHeightLayoutConstraint is nil, even though the constraint appears in my storyboard and as an outlet in the AnnotatedPhotoCell class. Any idea what might be causing this?

Has anyone managed to use that example with images from URL?
And if so how?
Thanks!

did you transfer this to UICollectionView? will you please send your file here im having trouble with mine. Thank you in advance jose

Had the same problem; Given that you can customise the appearance of each cell giving them the size and position, I made the first cell as the header, bigger and in the center of the collection and then I moved all the other following cell down.
Hope I helped