<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz83zz66zybsvhhoq7z72znkz122zz74zsz73zcz74z6z89zz88zz71zz77zsh1j">Creating collection views for iOS apps were pretty straightforward. A simple UICollectionFlowLayout would create flowing lists or grids of items. But things got a lot harder when the layout got a little more complex. A horizontal list within a vertical collection view required some extra tricks that every experienced iOS developer has inevitably used. </span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz83zz66zybsvhhoq7z72znkz122zz74zsz73zcz74z6z89zz88zz71zz77zsh1j">Hopefully, at WWDC19, Apple introduced UICollectionView Compositional Layout, along with Diffable Data Sources. Now we can create nested layouts via and creating these layouts are quite easy.</span></div>
<div></div>
<div><span class="thread-993820202719977629779995 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvlpz68z5z83zwz69zz70zz77zz71zz75zz75zz79zz65z4evqz70zwuz73z1z90z4z80z5fz89z7">We are going to look at these two new APIs today. First, we are going to create UICollectionView Compositional Layout object and then we&#8217;ll to feed the UICollectionView using UICollectionViewDiffableDataSource.</span></div>
<div></div>
<div>
<h2>UICollectionView Compositional Layout</h2>
</div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvlpz68z5z83zwz69zz70zz77zz71zz75zz75zz79zz65z4evqz70zwuz73z1z90z4z80z5fz89z7">When we are creating new UICollectionViewCompositionalLayout we need three things; Section, Group and Item. Section is same as before but here we have actually new two things here, Group and Item. Think Group as another UICollectionView that has multiple UICollectionViewCell. Lastly, Item is a UICollectionViewCell. Sections has Groups and Groups has Items. See below figure for basic understanding.</span></div>
<h5><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvlpz68z5z83zwz69zz70zz77zz71zz75zz75zz79zz65z4evqz70zwuz73z1z90z4z80z5fz89z7">Basic demonstration of Section, Group and Item inside UICollectionView Compositional Layout</span></h5>
<div>
<p><img class="alignnone wp-image-2705 size-full" src="https://ac.appcircle.io/wp-content/uploads/2022/05/YmM8_t1g.png" alt="Section and group" width="516" height="546" srcset="https://ac.appcircle.io/wp-content/uploads/2022/05/YmM8_t1g.png 516w, https://ac.appcircle.io/wp-content/uploads/2022/05/YmM8_t1g-284x300.png 284w" sizes="(max-width: 516px) 100vw, 516px" /></p>
</div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvlpz68z5z83zwz69zz70zz77zz71zz75zz75zz79zz65z4evqz70zwuz73z1z90z4z80z5fz89z7">Let’s create our first and fresh layout. </span></div>
<div></div>
<div><script src="https://gist.github.com/f10b1b48fa8d2ff69f7539b13ec29cb3.js"></script></div>
<div></div>
<div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvlpz68z5z83zwz69zz70zz77zz71zz75zz75zz79zz65z4evqz70zwuz73z1z90z4z80z5fz89z7">Above code snippet will produce below layout. Also at Line: 74, you will see </span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvlpz68z5z83zwz69zz70zz77zz71zz75zz75zz79zz65z4evqz70zwuz73z1z90z4z80z5fz89z7"><i>orthogonalScrollingBehavior </i></span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvlpz68z5z83zwz69zz70zz77zz71zz75zz75zz79zz65z4evqz70zwuz73z1z90z4z80z5fz89z7">property is equal to .</span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvlpz68z5z83zwz69zz70zz77zz71zz75zz75zz79zz65z4evqz70zwuz73z1z90z4z80z5fz89z7"><i>groupPaging. </i></span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvlpz68z5z83zwz69zz70zz77zz71zz75zz75zz79zz65z4evqz70zwuz73z1z90z4z80z5fz89z7">This property setup will make our layout scrollable by groups. </span></div>
</div>
<div></div>
<div><img class="alignnone wp-image-2707 size-full" src="https://ac.appcircle.io/wp-content/uploads/2022/05/svsiERoY.png" alt="Outer and inner group" width="1080" height="1080" srcset="https://ac.appcircle.io/wp-content/uploads/2022/05/svsiERoY.png 1080w, https://ac.appcircle.io/wp-content/uploads/2022/05/svsiERoY-300x300.png 300w, https://ac.appcircle.io/wp-content/uploads/2022/05/svsiERoY-1030x1030.png 1030w, https://ac.appcircle.io/wp-content/uploads/2022/05/svsiERoY-80x80.png 80w, https://ac.appcircle.io/wp-content/uploads/2022/05/svsiERoY-768x768.png 768w, https://ac.appcircle.io/wp-content/uploads/2022/05/svsiERoY-36x36.png 36w, https://ac.appcircle.io/wp-content/uploads/2022/05/svsiERoY-180x180.png 180w, https://ac.appcircle.io/wp-content/uploads/2022/05/svsiERoY-705x705.png 705w" sizes="(max-width: 1080px) 100vw, 1080px" /></div>
<div>
<div></div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz83zz66zybsvhhoq7z72znkz122zz74zsz73zcz74z6z89zz88zz71zz77zsh1j">Also we have other useful options for </span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvlpz68z5z83zwz69zz70zz77zz71zz75zz75zz79zz65z4evqz70zwuz73z1z90z4z80z5fz89z7"><i>orthogonalScrollingBehavior</i></span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz83zz66zybsvhhoq7z72znkz122zz74zsz73zcz74z6z89zz88zz71zz77zsh1j"><i>. </i></span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz83zz66zybsvhhoq7z72znkz122zz74zsz73zcz74z6z89zz88zz71zz77zsh1j">Let’s take a quick look of them.</span></div>
<div></div>
<div><span class="ace-all-bold-hthree"><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz83zz66zybsvhhoq7z72znkz122zz74zsz73zcz74z6z89zz88zz71zz77zsh1j"><b>Continuous</b></span></span></div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz83zz66zybsvhhoq7z72znkz122zz74zsz73zcz74z6z89zz88zz71zz77zsh1j">It removes pageable scroll behaviour and makes our group scrollable continuously.</span></div>
<div></div>
<div><span class="ace-all-bold-hthree"><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz83zz66zybsvhhoq7z72znkz122zz74zsz73zcz74z6z89zz88zz71zz77zsh1j"><b>ContinuousGroupLeadingBoundary</b></span></span></div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz83zz66zybsvhhoq7z72znkz122zz74zsz73zcz74z6z89zz88zz71zz77zsh1j">It behaves like both .groupPaging and .continues options. You can scroll the group continuously but when you stop scrolling your group will fit the screen like .groupPaging smoothly. </span></div>
<div></div>
<div><span class="ace-all-bold-hthree"><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz83zz66zybsvhhoq7z72znkz122zz74zsz73zcz74z6z89zz88zz71zz77zsh1j"><b>None</b></span></span></div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz83zz66zybsvhhoq7z72znkz122zz74zsz73zcz74z6z89zz88zz71zz77zsh1j">The section does not allow users to scroll its content orthogonally. In our case, all the groups that we created will be layout vertically inside its own section. </span></div>
</div>
<div></div>
<div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvlpz68z5z83zwz69zz70zz77zz71zz75zz75zz79zz65z4evqz70zwuz73z1z90z4z80z5fz89z7">This is all about creating UICollectionViewCompositionalLayout. Simple is that! </span></div>
<div></div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvlpz68z5z83zwz69zz70zz77zz71zz75zz75zz79zz65z4evqz70zwuz73z1z90z4z80z5fz89z7">So what’s next? Without data a layout is nothing for us. For the next step we will create and implement our UICollectionViewDiffableDataSource. But first let’s look at what it is:</span></div>
</div>
<div></div>
<div>
<h2>UICollectionViewDiffableDataSource</h2>
</div>
<div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvlpz68z5z83zwz69zz70zz77zz71zz75zz75zz79zz65z4evqz70zwuz73z1z90z4z80z5fz89z7">The classic and old way was using UICollectionViewDataSource. We were inheriting the protocol to our UIViewController and there were bunch of delegate methods for what cell to display, how many cells to display, which section to display the cells in, and so on.</span></div>
<div></div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvlpz68z5z83zwz69zz70zz77zz71zz75zz75zz79zz65z4evqz70zwuz73z1z90z4z80z5fz89z7">The modern and new way is UICollectionViewDiffableDataSource and it removes most of the logical work and gives us convenience. It allows us to write simpler, clearer and error free code.</span></div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvlpz68z5z83zwz69zz70zz77zz71zz75zz75zz79zz65z4evqz70zwuz73z1z90z4z80z5fz89z7">With this new approach we are just going to tell our modern data source to what </span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvlpz68z5z83zwz69zz70zz77zz71zz75zz75zz79zz65z4evqz70zwuz73z1z90z4z80z5fz89z7"><b>Section </b></span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvlpz68z5z83zwz69zz70zz77zz71zz75zz75zz79zz65z4evqz70zwuz73z1z90z4z80z5fz89z7">and </span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvlpz68z5z83zwz69zz70zz77zz71zz75zz75zz79zz65z4evqz70zwuz73z1z90z4z80z5fz89z7"><b>Item </b></span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvlpz68z5z83zwz69zz70zz77zz71zz75zz75zz79zz65z4evqz70zwuz73z1z90z4z80z5fz89z7">to display rather than the how many items to display.</span></div>
<div></div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvlpz68z5z83zwz69zz70zz77zz71zz75zz75zz79zz65z4evqz70zwuz73z1z90z4z80z5fz89z7">The new </span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvlpz68z5z83zwz69zz70zz77zz71zz75zz75zz79zz65z4evqz70zwuz73z1z90z4z80z5fz89z7"><b><i>diffable </i></b></span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvlpz68z5z83zwz69zz70zz77zz71zz75zz75zz79zz65z4evqz70zwuz73z1z90z4z80z5fz89z7">part is coming from that whenever you want to update your UICollectionView with new data source, the modern data source will calculate the differences between your old and new data and only will update different parts. This will reduce the amount of code you wrote and make your UICollectionView work high performance.</span></div>
<div></div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvlpz68z5z83zwz69zz70zz77zz71zz75zz75zz79zz65z4evqz70zwuz73z1z90z4z80z5fz89z7">As I mentioned above we need to create </span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvlpz68z5z83zwz69zz70zz77zz71zz75zz75zz79zz65z4evqz70zwuz73z1z90z4z80z5fz89z7"><b>Section </b></span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvlpz68z5z83zwz69zz70zz77zz71zz75zz75zz79zz65z4evqz70zwuz73z1z90z4z80z5fz89z7">and </span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvlpz68z5z83zwz69zz70zz77zz71zz75zz75zz79zz65z4evqz70zwuz73z1z90z4z80z5fz89z7"><b>Item. </b></span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvlpz68z5z83zwz69zz70zz77zz71zz75zz75zz79zz65z4evqz70zwuz73z1z90z4z80z5fz89z7">Let’s create them and let me explain the details.</span></div>
<div></div>
</div>
<div><script src="https://gist.github.com/9d47e7aeafbe5ddec462d5bf63c23066.js"></script></div>
<div></div>
<div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvlpz68z5z83zwz69zz70zz77zz71zz75zz75zz79zz65z4evqz70zwuz73z1z90z4z80z5fz89z7">Why our Section and Item is implementing </span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvlpz68z5z83zwz69zz70zz77zz71zz75zz75zz79zz65z4evqz70zwuz73z1z90z4z80z5fz89z7"><b>Hashable</b></span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvlpz68z5z83zwz69zz70zz77zz71zz75zz75zz79zz65z4evqz70zwuz73z1z90z4z80z5fz89z7"> protocol? To determine the changes between old and new data. Hashable protocol makes this possible. Functions that we created in Section class are needed for hashing and checking if two Section are equal to each other. </span></div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvlpz68z5z83zwz69zz70zz77zz71zz75zz75zz79zz65z4evqz70zwuz73z1z90z4z80z5fz89z7">Now it’s time to create actual UICollectionViewDataSource’s itself. See code snippets below.</span></div>
<h5><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvlpz68z5z83zwz69zz70zz77zz71zz75zz75zz79zz65z4evqz70zwuz73z1z90z4z80z5fz89z7"><br class="avia-permanent-lb" />Generating new UICollectionViewDataSource</span></h5>
<script src="https://gist.github.com/ab34372ecbd11fc25ee5187d0a981afe.js"></script>
</div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvlpz68z5z83zwz69zz70zz77zz71zz75zz75zz79zz65z4evqz70zwuz73z1z90z4z80z5fz89z7">We defined two </span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvlpz68z5z83zwz69zz70zz77zz71zz75zz75zz79zz65z4evqz70zwuz73z1z90z4z80z5fz89z7"><i>typealias</i></span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvlpz68z5z83zwz69zz70zz77zz71zz75zz75zz79zz65z4evqz70zwuz73z1z90z4z80z5fz89z7"> for making our code more readable and clean. You can ask </span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvlpz68z5z83zwz69zz70zz77zz71zz75zz75zz79zz65z4evqz70zwuz73z1z90z4z80z5fz89z7"><i>What is Snapshot anyway? </i></span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvlpz68z5z83zwz69zz70zz77zz71zz75zz75zz79zz65z4evqz70zwuz73z1z90z4z80z5fz89z7">NSDiffableDataSourceSnapshot is basically stores your </span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvlpz68z5z83zwz69zz70zz77zz71zz75zz75zz79zz65z4evqz70zwuz73z1z90z4z80z5fz89z7"><b>Sections </b></span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvlpz68z5z83zwz69zz70zz77zz71zz75zz75zz79zz65z4evqz70zwuz73z1z90z4z80z5fz89z7">and</span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvlpz68z5z83zwz69zz70zz77zz71zz75zz75zz79zz65z4evqz70zwuz73z1z90z4z80z5fz89z7"><b> Items</b></span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvlpz68z5z83zwz69zz70zz77zz71zz75zz75zz79zz65z4evqz70zwuz73z1z90z4z80z5fz89z7">. You can think of it as reference for your modern data source.</span></div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvlpz68z5z83zwz69zz70zz77zz71zz75zz75zz79zz65z4evqz70zwuz73z1z90z4z80z5fz89z7">Also we must create a SupplementryView for our sections. It’s simple as above code snippets shows. </span></div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvlpz68z5z83zwz69zz70zz77zz71zz75zz75zz79zz65z4evqz70zwuz73z1z90z4z80z5fz89z7">Are we done yet? Nope. We need one last thing to implement. We must apply our Snapshot to our modern data source. How we are going to make it happen? See below code snippet.</span></div>
<div></div>
<div><script src="https://gist.github.com/2feb2068bfea865a6c7d1e1219e3075d.js"></script></div>
<div></div>
<div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvlpz68z5z83zwz69zz70zz77zz71zz75zz75zz79zz65z4evqz70zwuz73z1z90z4z80z5fz89z7">We defined our </span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvlpz68z5z83zwz69zz70zz77zz71zz75zz75zz79zz65z4evqz70zwuz73z1z90z4z80z5fz89z7"><b><i>sections </i></b></span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvlpz68z5z83zwz69zz70zz77zz71zz75zz75zz79zz65z4evqz70zwuz73z1z90z4z80z5fz89z7">as a class variable and using it applied our snapshot to data source. Every time you update your </span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvlpz68z5z83zwz69zz70zz77zz71zz75zz75zz79zz65z4evqz70zwuz73z1z90z4z80z5fz89z7"><b><i>sections </i></b></span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvlpz68z5z83zwz69zz70zz77zz71zz75zz75zz79zz65z4evqz70zwuz73z1z90z4z80z5fz89z7">just call </span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvlpz68z5z83zwz69zz70zz77zz71zz75zz75zz79zz65z4evqz70zwuz73z1z90z4z80z5fz89z7"><b><i>applySnapshot </i></b></span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvlpz68z5z83zwz69zz70zz77zz71zz75zz75zz79zz65z4evqz70zwuz73z1z90z4z80z5fz89z7">method and voila! you successfully updated your modern data source.</span></div>
</div>
<div></div>
<div>
<h2><b style="font-size: 28px; letter-spacing: 0px;">Summary</b></h2>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvlpz68z5z83zwz69zz70zz77zz71zz75zz75zz79zz65z4evqz70zwuz73z1z90z4z80z5fz89z7">In this article you learned how to implement UICollectionViewCompositionalLayout and UICollectionViewDiffableDataSource to your new project as modern ways. You can challenge yourself with different types of layouts.</span></div>
</div>
<div></div>
<h2>Where to Go From Here</h2>
<p>You can check Apple&#8217;s official documentation: <a href="https://developer.apple.com/documentation/uikit/uicollectionviewcompositionallayout">https://developer.apple.com/documentation/uikit/uicollectionviewcompositionallayout</a></p>
<p>Also you can watch WWDC19 video about Collection View Layouts: <a href="https://developer.apple.com/videos/play/wwdc2019/215/">https://developer.apple.com/videos/play/wwdc2019/215/</a></p>
<p>Apple also has a Diffable Data Source video: <a href="https://developer.apple.com/videos/play/wwdc2019/220">https://developer.apple.com/videos/play/wwdc2019/220</a></p>


Save time, reduce costs and increase developer productivity now.

Modern Layout on UIKit with UICollectionView Compositional Layout

Related Posts

Secure and Simplify iOS Code Signing with Appcircle

What is Xcode Cloud, and Why Consider Alternatives?

Automate Your Mobile Code Reviews with Danger CI

Deploy iOS and Android Apps to AWS Device Farm and Run Tests

Modern Layout on UIKit with UICollectionView Compositional Layout

Related Posts

Secure and Simplify iOS Code Signing with Appcircle

What is Xcode Cloud, and Why Consider Alternatives?

Automate Your Mobile Code Reviews with Danger CI

Deploy iOS and Android Apps to AWS Device Farm and Run Tests

Subscribe to Appcircle Circle