# Video Tutorial: Custom Collection View Layouts Part 1: Pinterest – Basic Layout

**URL:** <https://forums.kodeco.com/t/video-tutorial-custom-collection-view-layouts-part-1-pinterest-basic-layout/6941>\
**Category:** 🎓 Courses & Articles\
**Created:** [March 4, 2016, 12:34pm UTC](https://forums.kodeco.com/t/video-tutorial-custom-collection-view-layouts-part-1-pinterest-basic-layout/6941 "2016-03-04T12:34:10Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![micpringle](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/micpringle/32/104997_2.png) [@micpringle](https://forums.kodeco.com/u/micpringle)\
**Post date:** [March 4, 2016, 12:34pm UTC](https://forums.kodeco.com/t/video-tutorial-custom-collection-view-layouts-part-1-pinterest-basic-layout/6941/1 "2016-03-04T12:34:11Z")

</div>

Learn how to implement the basic Pinterest layout.

 
* * *
 This is a companion discussion topic for the original entry at [https://www.raywenderlich.com/3987-custom-collection-view-layout/lessons/2](https://www.raywenderlich.com/3987-custom-collection-view-layout/lessons/2)

---

<div class="post-metadata">

**Author:** ![p3tom](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/p3tom/32/81494_2.png) [@p3tom](https://forums.kodeco.com/u/p3tom)\
**Post date:** [March 13, 2016, 11:52am UTC](https://forums.kodeco.com/t/video-tutorial-custom-collection-view-layouts-part-1-pinterest-basic-layout/6941/2 "2016-03-13T11:52:54Z")

</div>

Thanks for the great video and your detailed explanation.

I have slighlty improved the given code for myself:

- using guard statements to improve readability and prevent the “pyramid of doom”
- I’ve extracted the random color generation from the controller to the data model (its now a lazy initialized property).

🙂

---

<div class="post-metadata">

**Author:** ![benzai](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/benzai/32/81494_2.png) [@benzai](https://forums.kodeco.com/u/benzai)\
**Post date:** [March 18, 2016, 11:54am UTC](https://forums.kodeco.com/t/video-tutorial-custom-collection-view-layouts-part-1-pinterest-basic-layout/6941/3 "2016-03-18T11:54:24Z")

</div>

I’m trying to use collection view not with a UICollectionViewController, but just with a UIViewController conforming to UICollectionViewDataSource and UICollectionViewDelegate. I’ve setup everything manually (setting the data source and delegate of the collection view in the storyboard).

When I got to the final step of this tutorial and wanted to initialize PinterestLayout in viewDidLoad, I get an error Use of unresolved identifier ‘collectionViewLayout’. Can you help me figure out what I’m doing wrong? Maybe I need to conform to another class?

If this is not a best practice to _not_ use UICollectionViewController also please let me know. 😄 I learned this approach from table views.

---

<div class="post-metadata">

**Author:** ![benzai](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/benzai/32/81494_2.png) [@benzai](https://forums.kodeco.com/u/benzai)\
**Post date:** [March 19, 2016, 2:42pm UTC](https://forums.kodeco.com/t/video-tutorial-custom-collection-view-layouts-part-1-pinterest-basic-layout/6941/4 "2016-03-19T14:42:26Z")

</div>

Update: After the initial frustration of not knowing how to proceed. Today I tried again and it now works! I discovered I need to setup an IBOutlet to the collection view, so I can do:  
`let layout = myCollectionView.collectionViewLayout as! GridLayout`  
I’m really glad I got it to work, now I can continue experimenting with custom layouts. Thanks for the great videos so far!

---

<div class="post-metadata">

**Author:** ![phantom59](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/phantom59/32/102075_2.png) [@phantom59](https://forums.kodeco.com/u/phantom59)\
**Post date:** [April 15, 2016, 10:53am UTC](https://forums.kodeco.com/t/video-tutorial-custom-collection-view-layouts-part-1-pinterest-basic-layout/6941/5 "2016-04-15T10:53:03Z")

</div>

Hi, I used the concepts in 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](https://developer.apple.com/library/ios/samplecode/CollectionViewTransition/Introduction/Intro.html#//apple_ref/doc/uid/DTS40013415) 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?

---

<div class="post-metadata">

**Author:** ![phantom59](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/phantom59/32/102075_2.png) [@phantom59](https://forums.kodeco.com/u/phantom59)\
**Post date:** [April 16, 2016, 12:09am UTC](https://forums.kodeco.com/t/video-tutorial-custom-collection-view-layouts-part-1-pinterest-basic-layout/6941/6 "2016-04-16T00:09:13Z")

</div>

Hi,  
I guess I found another twist to all this … The Apple doc states that you must implement layoutAttributesForItemAtIndexPath() as in:

> Every custom layout object is expected to implement the layoutAttributesForItemAtIndexPath: method.

As in:  
` override func layoutAttributesForItemAtIndexPath(indexPath: NSIndexPath) -> UICollectionViewLayoutAttributes? { return cache[indexPath.item]; }`  
This was not implemented in the tutorial. Adding the implementation of this also eliminates the crash.

FYI.

---

<div class="post-metadata">

**Author:** ![giguerea](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/giguerea/32/81494_2.png) [@giguerea](https://forums.kodeco.com/u/giguerea)\
**Post date:** [August 4, 2016, 2:38am UTC](https://forums.kodeco.com/t/video-tutorial-custom-collection-view-layouts-part-1-pinterest-basic-layout/6941/7 "2016-08-04T02:38:06Z")

</div>

will this video series will be converted to swift 2.2 or later, I would like to give it a try

after converting it to swift 2.2 I got compile error and I am not able to execute the project

thanks

---

<div class="post-metadata">

**Author:** ![jacksongan](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/jacksongan/32/50783_2.png) [@jacksongan](https://forums.kodeco.com/u/jacksongan)\
**Post date:** [December 16, 2016, 1:14pm UTC](https://forums.kodeco.com/t/video-tutorial-custom-collection-view-layouts-part-1-pinterest-basic-layout/6941/8 "2016-12-16T13:14:49Z")

</div>

Hi, can you provide updated Swift files based on Swift 3? I download the projects but failed to compile due to errors. Thank you.

---

<div class="post-metadata">

**Author:** ![olams](https://s3.amazonaws.com/cdn.raywenderlich.com/community/forum-assets/noun-game-ghost-878668.png) [@olams](https://forums.kodeco.com/u/olams)\
**Post date:** [December 25, 2016, 10:01pm UTC](https://forums.kodeco.com/t/video-tutorial-custom-collection-view-layouts-part-1-pinterest-basic-layout/6941/9 "2016-12-25T22:01:39Z")

</div>

you can run the code in “legacy mode”. Just go to “Build Settings → Use Legacy Swift Language Version” You have to fix a couple of compile errors though

---

<div class="post-metadata">

**Author:** ![mpasumarthi](https://s3.amazonaws.com/cdn.raywenderlich.com/community/forum-assets/noun-game-ghost-878668.png) [@mpasumarthi](https://forums.kodeco.com/u/mpasumarthi)\
**Post date:** [January 18, 2017, 5:14pm UTC](https://forums.kodeco.com/t/video-tutorial-custom-collection-view-layouts-part-1-pinterest-basic-layout/6941/10 "2017-01-18T17:14:57Z")

</div>

Can we have an updated version of the Custom CollectionView Layout series with the new overridable methods. The overridable methods mentioned in this video are not available in the latest version of swift.

---

<div class="post-metadata">

**Author:** ![lancy98](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/lancy98/32/110937_2.png) [@lancy98](https://forums.kodeco.com/u/lancy98)\
**Post date:** [December 24, 2019, 9:32am UTC](https://forums.kodeco.com/t/video-tutorial-custom-collection-view-layouts-part-1-pinterest-basic-layout/6941/11 "2019-12-24T09:32:20Z")

</div>

3 items in the row does not contain equal leading and trailing space. Why does the section inset add unequal leading and trailing spacing for the first item? Explanation is not clear.

---

<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 14, 2020, 12:01am UTC](https://forums.kodeco.com/t/video-tutorial-custom-collection-view-layouts-part-1-pinterest-basic-layout/6941/12 "2020-01-14T00:01:19Z")

</div>

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