# UICollectionView Custom Layout Tutorial: Pinterest

**URL:** <https://forums.kodeco.com/t/uicollectionview-custom-layout-tutorial-pinterest/733>\
**Category:** 🎓 Courses & Articles\
**Created:** [February 28, 2016, 8:02pm UTC](https://forums.kodeco.com/t/uicollectionview-custom-layout-tutorial-pinterest/733 "2016-02-28T20:02:39Z")\
**Posts on this page:** 13\
**Page:** 3

<div class="post-metadata">

**Author:** ![eduaal](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/eduaal/32/69422_2.png) [@eduaal](https://forums.kodeco.com/u/eduaal)\
**Post date:** [June 19, 2017, 5:28pm UTC](https://forums.kodeco.com/t/uicollectionview-custom-layout-tutorial-pinterest/733/46 "2017-06-19T17:28:40Z")

</div>

Hello, using the example would be possible to make it appear as the image?  
[![](https://i.stack.imgur.com/iWfCb.jpg) ](https://i.stack.imgur.com/iWfCb.jpg)

---

<div class="post-metadata">

**Author:** ![hkmoca](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/hkmoca/32/70136_2.png) [@hkmoca](https://forums.kodeco.com/u/hkmoca)\
**Post date:** [July 12, 2017, 4:57am UTC](https://forums.kodeco.com/t/uicollectionview-custom-layout-tutorial-pinterest/733/47 "2017-07-12T04:57:22Z")

</div>

did ya got any answer on this? i want to do someting similar

 ![](https://raywenderlich-com-v3-forums.s3.amazonaws.com/original/3X/1/2/12f7cf32a8ecb1d8df20df40f6fa1644cea85da3.jpeg)

---

<div class="post-metadata">

**Author:** ![nikhil1414](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/nikhil1414/32/70165_2.png) [@nikhil1414](https://forums.kodeco.com/u/nikhil1414)\
**Post date:** [July 13, 2017, 10:13am UTC](https://forums.kodeco.com/t/uicollectionview-custom-layout-tutorial-pinterest/733/48 "2017-07-13T10:13:02Z")

</div>

I have downloaded final project and tried to run in Xcode 8.3.2. Initially it has asked me to convert it in Swift 3.0 so I have converted it and resolved few syntax errors. Now project is running but not loading the collectionview. The cellForItemAtIndexPath method is not getting called. Any one please suggest.

override func collectionView(\_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) → UICollectionViewCell

---

<div class="post-metadata">

**Author:** ![lguerra10](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/lguerra10/32/70363_2.png) [@lguerra10](https://forums.kodeco.com/u/lguerra10)\
**Post date:** [July 22, 2017, 11:46pm UTC](https://forums.kodeco.com/t/uicollectionview-custom-layout-tutorial-pinterest/733/49 "2017-07-22T23:46:57Z")

</div>

If you control the database, you can keep in the database the height of the image ( I would also keep the width) so that when you download the annotation you get also the height that you need to build the frame of the image.

---

<div class="post-metadata">

**Author:** ![mdraggon](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/mdraggon/32/81494_2.png) [@mdraggon](https://forums.kodeco.com/u/mdraggon)\
**Post date:** [September 9, 2017, 7:41am UTC](https://forums.kodeco.com/t/uicollectionview-custom-layout-tutorial-pinterest/733/50 "2017-09-09T07:41:49Z")

</div>

Has anyone got it to implement with pagination? This tutorial is nice, but it **fails** to convey things such as downloading objects from the internet and i**nserting more cells into the layout (in the bottom for example)**. Has anyone achieved this? If so, please enlighten me.

---

<div class="post-metadata">

**Author:** ![cokodude](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/cokodude/32/81494_2.png) [@cokodude](https://forums.kodeco.com/u/cokodude)\
**Post date:** [September 22, 2017, 9:17pm UTC](https://forums.kodeco.com/t/uicollectionview-custom-layout-tutorial-pinterest/733/51 "2017-09-22T21:17:19Z")

</div>

For everyone that’s having trouble updating the UICollectionView with new cells, add this to your Layout subclass to empty the cache when the layout is reloaded:

```
override func invalidateLayout() {
    super.invalidateLayout()
    cache.removeAll() // Empty the cache from the tutorial
}

```

---

<div class="post-metadata">

**Author:** ![mdraggon](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/mdraggon/32/81494_2.png) [@mdraggon](https://forums.kodeco.com/u/mdraggon)\
**Post date:** [October 12, 2017, 5:26pm UTC](https://forums.kodeco.com/t/uicollectionview-custom-layout-tutorial-pinterest/733/52 "2017-10-12T17:26:09Z")

</div>

Isn’t that inefficient? Because now It will have to make a brand new layout for what was already there **and** the new cells. Is there no way to reuse whats already there?

---

<div class="post-metadata">

**Author:** ![shogunkaramazov](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/shogunkaramazov/32/108826_2.png) [@shogunkaramazov](https://forums.kodeco.com/u/shogunkaramazov)\
**Post date:** [October 14, 2017, 2:23pm UTC](https://forums.kodeco.com/t/uicollectionview-custom-layout-tutorial-pinterest/733/53 "2017-10-14T14:23:25Z")

</div>

@anon89822885 Do you have any feedback regarding all of this? Thank you - much appreciated! :]

---

<div class="post-metadata">

**Author:** ![awaisfayyazbp](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/awaisfayyazbp/32/108688_2.png) [@awaisfayyazbp](https://forums.kodeco.com/u/awaisfayyazbp)\
**Post date:** [January 11, 2018, 6:43am UTC](https://forums.kodeco.com/t/uicollectionview-custom-layout-tutorial-pinterest/733/54 "2018-01-11T06:43:39Z")

</div>

I have added this method inside my custom layout class but with no success.  
My app is crashing at  
guard cache.isEmpty == true , let collectionView == collectionView else {  
return  
}

Any help would be much appreciated.

---

<div class="post-metadata">

**Author:** ![shogunkaramazov](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/shogunkaramazov/32/108826_2.png) [@shogunkaramazov](https://forums.kodeco.com/u/shogunkaramazov)\
**Post date:** [January 11, 2018, 11:44am UTC](https://forums.kodeco.com/t/uicollectionview-custom-layout-tutorial-pinterest/733/55 "2018-01-11T11:44:56Z")

</div>

@anon89822885 Can you please help with this when you get a chance? Thank you - much appreciated! :]

---

<div class="post-metadata">

**Author:** ![chirag](https://s3.amazonaws.com/cdn.raywenderlich.com/community/forum-assets/noun-game-ghost-878668.png) [@chirag](https://forums.kodeco.com/u/chirag)\
**Post date:** [March 22, 2018, 1:07pm UTC](https://forums.kodeco.com/t/uicollectionview-custom-layout-tutorial-pinterest/733/56 "2018-03-22T13:07:29Z")

</div>

Hi for me this is working :-

step 1 :-  
**Existing code**

> fileprivate var cache = UICollectionViewLayoutAttributes

**Remove fileprivate**  
var cache = UICollectionViewLayoutAttributes

step 2 :-  
**Write down below code when you want to reload collectionview -**  
let layout = self.collectionView?.collectionViewLayout as? PinterestLayout  
layout?.cache.removeAll()  
self.collectionView?.reloadData()  
layout?.prepare()  
step 3 :-  
Enjoy 😄

---

<div class="post-metadata">

**Author:** ![shogunkaramazov](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/shogunkaramazov/32/108826_2.png) [@shogunkaramazov](https://forums.kodeco.com/u/shogunkaramazov)\
**Post date:** [March 22, 2018, 1:15pm UTC](https://forums.kodeco.com/t/uicollectionview-custom-layout-tutorial-pinterest/733/57 "2018-03-22T13:15:39Z")

</div>

This tutorial is more than six months old so questions are no longer supported at the moment for it. Thank you!

---

<div class="post-metadata">

**Author:** ![shogunkaramazov](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/shogunkaramazov/32/108826_2.png) [@shogunkaramazov](https://forums.kodeco.com/u/shogunkaramazov)\
**Post date:** [March 22, 2018, 1:15pm UTC](https://forums.kodeco.com/t/uicollectionview-custom-layout-tutorial-pinterest/733/58 "2018-03-22T13:15:43Z")

</div>



[Previous page](https://forums.kodeco.com/t/uicollectionview-custom-layout-tutorial-pinterest/733.md?page=2)
