Swift: How to UICollectionView Compositional Layout (List, Grid, Two Column Examples)

Рет қаралды 6,652

Күн бұрын

UICollectionViewLayout / UICollectionViewDiffableDataSource
In this video we take a look at the UICollectionView Compositional layout. We build x3 different views from scratch. Hook them up to a Diffable Data Source. And go over the mechanics behind how this layout implementation works.
Source code
github.com/jrasmusson/swift-a...
Twitter
@jrasmusson
Courses
Level Up in Swift
www.udemy.com/course/level-up...
Level Up AutoLayout
www.udemy.com/course/level-up...

Пікірлер: 36

@Eugene.Berezin 4 жыл бұрын

THANK YOU! It’s the best explanation I’ve ever seen our there for the compositional layout! Im planning on implementing it here soon. Your video helped a lot to figure out the difference between item, section, group and layout!

@swiftarcade7632 4 жыл бұрын

Great to hear Eugene. So glad it helped out. Best of luck with your project!

@h.t.4846 3 жыл бұрын

love the drawing you got to explain how item, group, section work. Thanks so much!!!

@swiftarcade7632 3 жыл бұрын

Welcome H.T. Was confusing for me too until I saw it on paper. Cheers.

@peetafunkadelic 3 жыл бұрын

Oh god, I must admire you for not going for click bait videos related to SwiftUI in 2020/2021. Really appreciate that somebody with understandable English is doing high-quality UIKit videos. I just skimmed through some of yours and you got new subscriber! Now something I will definitely use, CollectionViews and Core Data. Looking forward for every topic you are about to cover in the future. Stay safe Jonathan!

@peetafunkadelic 3 жыл бұрын

Btw, thanks for being pure code, no Storyboards. Thanks no. 2, for your hint for some retro grooves :D

@swiftarcade7632 3 жыл бұрын

@@peetafunkadelic Awesome Petr. You are very welcome. I will eventually get into SwiftUI. But like you, I still need to know and understand UIKit because... well it is what we need today for the job. Thanks for the comment. All the best.

@peetafunkadelic 3 жыл бұрын

@@swiftarcade7632 Exactly, I work for small company as wannabe iOS dev and we have all of our apps in UIKit and I realised that it is still better to get familiar with such a basic APIs like DiffDataSource for Collection/TableViews.

@rasheshbosamiya1482 3 ай бұрын

Excellent thank you for sharing

@saifcodes 4 жыл бұрын

Amazing. Enjoying every single video you post. ✅💯👍👏

@swiftarcade7632 4 жыл бұрын

Cheers Saif. Thanks again for the suggestion.

@MarkizBoneco Жыл бұрын

Thank you very much. Very useful video as usual.

@48kozzy78 4 жыл бұрын

perfect explanation, thank you for your time and effort

@swiftarcade7632 4 жыл бұрын

Very welcome Muhammend. Thanks for the like.

@user-zp9gd6cc7q 5 ай бұрын

thanks, great tutorial 💖

@abdouett3676 4 жыл бұрын

Thank you for this awesome tutorial.

@swiftarcade7632 4 жыл бұрын

Glad it was helpful!

@sunnyjunne9765 3 жыл бұрын

it was extremely useful for me! Thanks a lot!

@swiftarcade7632 3 жыл бұрын

You are most welcome Sunny. Thanks for dropping by!

@edwincreator2855 4 жыл бұрын

Thank you!

@swiftarcade7632 4 жыл бұрын

You're welcome!

@manuelalvarez394 3 жыл бұрын

This Video It´s so great, but... how do you implement the delegate to didSelect items? Thank you!!

@swiftarcade7632 3 жыл бұрын

Hi Manuel, It's been a while since I looked at this, but wouldn't it be some kind of protocol delegate? Similar to UITableViewController?

@JustAlexV 4 жыл бұрын

Yeah, AMAZING explanation between all of them! But how could I fetch second item from a section using Snapshot?

@swiftarcade7632 3 жыл бұрын

Great question. I will have to try this and get back to you.

@romancebula1263 2 жыл бұрын

Hi Jonathan - as always, brilliant explanation - there is only one thing that could make this tutorial 100% complete ;p could explain how to update layout (and change number of items) while rotating an iPad ? It'd help a lot of devs ;)

@swiftarcade7632 2 жыл бұрын

Hi Roman. Thank you for the comment. So it sounds like there are two things that occur - and each can happen independently of the other. The number of items could change (via network call or any other event). And then the layout needs an update. What you could do is hook into whatever changes the number of items, and then when a change occurs, for an auto layout update (i.e. setNeedsLayout()). That might do what you are looking for. Thanks for the comment. Let me know how it goes. Will try to do something like this in an upcoming video. Cheers - Jonathan.

@romancebula1263 2 жыл бұрын

@@swiftarcade7632 Thanks for swift :) response. Unfortunately in my case setNeedsLayout() doesn't help as items gets resized properly after second rotation on iPad - first rotation changes number of items in a row however width of items stays unchanged until second rotation (last item in the row gets cropped by the right bound of the screen) Thanks again !

@swiftarcade7632 2 жыл бұрын

@@romancebula1263 Hmmm. Very interesting. Another thing you could try is to hook into the iPad rotation events, and see if you are able to trigger another layout after that. Not sure if that would help, but may be work experimenting and trying. That's a tricky one!

@jasondhindsa6774 3 жыл бұрын

What software are you using to make those images you have in your markdown files?

@swiftarcade7632 3 жыл бұрын

Adobe illustrator.

@Waasys 4 жыл бұрын

Goof studd

@swiftarcade7632 4 жыл бұрын

Yhank tou.

@alexeyshimanovich6548 3 жыл бұрын

Layout starts from 18:06

@swiftarcade7632 3 жыл бұрын

Thanks Alexey.

@rajanmaheshwari Жыл бұрын

Hi, With flow layout I would use the UIScrollViewDelegate to get the desired behavior: func scrollViewDidScroll(_ scrollView: UIScrollView) { guard self.scrollView == scrollView else { return } collectionView.contentOffset.y = scrollView.contentOffset.y } How can I use the same with the compositional layout? contentOffset is zero always and setting that to anything is not making changes in the collection view