How to build a UICollectionView like the App Store

in this video I'm going to show you how to produce gorgeous collection views just like those in the App Store or using awesome new features first introduced in iOS 13 we've got lots to get through so let's get straight to it now you might wonder why do a whole talk about collection views particularly because UI collection view was introduced way back in iOS 6 a long time ago in fact I was in the audience at dub dub DC 2012 and give you an idea of how old they are this is the screenshot they used to demonstrated look at that beautiful wood grain effect and the gloss on that iPad Apple showed us screenshots like this one so you can create amazing layouts which in retrospect we can all agree we've never seen in a real app ever then you'd go home and try collection briefs yourself and inevitably make something like this look at this big black gap in the middle and you'd wonder how the heck you get rid of it so you'd Google how can you censor a UI collection view then you Google some more why is it so freaking hard to censor a UI collection view and it turns out with non-trivial so after various amounts of maths and/or copy and pasting code from my site or stack overflow you end up with something like this so unless bad still not great though at the same time apples creating beautiful collection views like this one when I press play on this you'll see it goes from days to months while moving the collection view it's absolutely gorgeous what is back boom look at the way even retains inertia it's worth watching more than once just to see how beautiful this thing is look at that gorgeous or like this this is the App Store on the left there we have big hero images neatly centered then on the right we have these scrolling groups of three and below that also a table and more layouts so it's easy to feel like we mere mortals are living in a different world and we'll never make something quite as nice as Apple then came dub dub DC 19900 I totally stole the show and Swift UI is absolutely awesome trust me I love it but Swift UI does not support collection views so along with many other things we also got what I like to call UI collection view 2.0 the collector view you always dreamed of I should say Apple aren't actually calling it that in case you're wondering anyway massive improvements - you might collect review so how does that fit into the plan for this talk well I'm gonna try and answer the question can I use the new collection view features to recreate the app store in about 45 minutes now there are some limitations here I know Amit and clear up front first up we're not going to make the whole app store just the collection view segments second I don't have apples actual code and so this is meters comparing a device with my code visually to see more or less how they've size things and third I'm going to say time with lots of shortcuts you'll see magic numbers you'll see guesswork and so forth I've managed the iphone 11 Pro max only let's give me a ton of code in this video I'll explain it as I go so you can understand it but it's all gonna be on github for you to pull apart and clone and fork and reuse and enhance to support other devices and much much more okay let's get into our code I've started off with a simple example project for us to work with it's a simple app you can see it here on the right in the simulator there's an apps tab that is a games tab there's our K tab and this search tab and they're all empty they do nothing special in the code for this if you go to Xcode you'll see we have the default app delegate and we have the default seen delegate I think special there below that we have apps view controller we have our first piece of custom code not a lot maybe 12 lines or so in there this thing grab some JSON from the app bundle and decode it into an array of app store sections it defines a collection view property then in viewdidload it creates a collection view using a UI collection view flow layout filling our views bounds it adds authorizing masks of flexible width and flexible height to the collection view filter screen then gives a default background color and add it to our view you the Arcadia controller and the games you controller and the searcher controller are all completely empty in section we have one of our data types a swift struck called section it has the idea to section the type title subtitle and an array of apps inside the app store section as per app Swift that's our second struct has an ID int a tank line name subheading image and whether it has in-app purchase or not below that contains bundle Dakota what Swift this is a health professional ad for projects like this one this starts off by saying as a method called decode in bundle it decodes any kind of decodable item from a file name in our bundle it starts by finding the URL for that file in the bundle otherwise it will fatal error it'll crash out we couldn't find the file it'll convert that file to a data instance and then decode that to the type we asked for and then send it back so as fatal errors will crash your app if any of those steps fail but of course this is a JSON file in our app bundle we've confirmed it's there we confirm it's readable with your firm that contains what we expect that's the point of it being in our app bundle so I'm quite happy having these fatal errors in here after that we have our app store Jason you'll see here at the top this is an app store section it's a featured type has no title or subtitle below that are it's a rev items is one it's featured called strokey you'll never stroke the same way again as heading one with image has some eye ApS then there's lots more items in this section 2 3 4 5 6 7 8 9 10 and then our next section a medium table title C and dark mode these apps are easy on the eyes which has its own items inside of it ok let's go and write our first piece of code in apps new controller directly below this collection view I'm going to add a new property will write var data source is a UI collection view before data source generic of a section and app and this disability' source is new in iOS 13 and it's a class that let us manage data in a collection view using snapshots we'll get on to what snapshots are shortly but for now what matters is this thing knows about our data you can see it has our apps or sections and section in the collection view and app store item as an item in the collection view so it knows by our model it'll say hey here's your app what do you want to do with it which is a really nice way of working as you'll see okay back in our code again the first thing I want to do is make a new Swift file to store a protocol this protocol will be called a self-configuring sale and it be used for all the collection view cells in our program so we'll say there's a protocol called self-configuring cell it has two requirements one is a reuse identifier string and one is a method called configure with some sort of app and all the cells in that app store collection view will conform to this protocol which means we can deaky one of them and we can have a configure itself with an app so that's our base protocol self-configuring cell we can now add another type cocoa touch class a new class called featured cell sub classing UI collection view cell they'll press next and create a new project and this class will conform to that cell configuring cell protocol that has two requirements one of which is it has to know what it's reuse ID is so I sign it here as a property we'll call it featured cell and now this cell here this is gonna store one of those big sliding image titles used in the App Store as you can see we have a small blue title saying featured then a big white text saying medit Opia then a big gray text below it saying sit back and relax so we can code that as properties we're to say this thing has a tagline label and a name label and a subtitle label and an image you to configure one of these things we're going to override the built-in initializer that comes with UI cable view cell subclasses which is init frame so I'll say override init frame sees direct and immediately call super init frame passing it on up they will say our tagline font is a UI font metrics default scaled font for UI font system font of size and approximately I think it's 12 with the weight bold then tagline dot text color is dot system blue now the reason we have UI font metrics default scale font here is because we want to support dynamic type but that type does not let us configure the exact weight of fonts we want and so I've said this is about a 12-point bold font but scale it up or down to match the dynamic type settings after text color we're using system blue this is a new iOS 13 dark mode or wear color we're not using the old iOS 12 or 11 or 10 blue but there's new lighter blue it's got much more green in it it's about 48 to 52 percent green depending a light mode or dark mode next up we have our title this is going to be a name font we used first part of size title to our text color I'll use label this is another new iOS 13 color because what it means is we'll get dark text in light mode and light text in dark mode so it always stands out on the background behind it next up is our subtitle so I'll say subtitle or font is UI font or referred size for textile title to again then name a text color equals secondary label now second label is also either white or black but it adds some amount of transparency which we'll look at gray in our example here because a dark background or light background behind it but if you have red or blue in the background you get a little bit the background color seeping through next up is our picture so we'll say our image shoe has a slight bit of corner rounding to it about five points it Clips itself to the bounds and it has a content mode of scale aspect fit now the clips the bound here is required so that our corner radius gets applied but here I've got sort of half-baked chunky filler images they don't quite fit you won't see it see well that's ok you get the point and now we can put these things together we'll make a statue to hold them all with you I static view arrange sub views using tagline name subtitle and our image you this is going to have custom or layout constraints so I'm going to turn off Tomic are we saying tam it quite a lot in this talk but it's short for translates advertising mask into constraints Tomic what's our art amic is false so you can do constraints by hand and who is going to flow vertically top the bottom what are the axis is vertical then add that to our content view now for the author level constraints this thing needs to fill the screen the full width and height available so we're gonna add some custom constraints will say NS layout constraint don't activate an array of and we'll say that our stack view has a leading anchor with a constraint equal to our content views leading anchor then I'll just copy and paste that several times we'll say the training out of the stack view is a training anchor the content view that top anchor top anchor and bottom anchor bottom anchor like that and we'll add one more small tweak here we'll say that our stack view has custom spacing of 10 points directly after the subtitle which I think more or less visually matches the way the app store actually looks okay so that's our featured cell defined now going to define the configure width app method this will assign the tagline our apps tagline upper casing it it assigns the name text our apps name then the subtitle text to our app subheading and the image you I'm going to use UI image named the app image yes of course this should come from a server somewhere but here I was baked them into the app project and finally because we have a custom initializer we must also implement the required initializer for coder so I'll say required in it coder NS coder inside the elders do fatal error not happening so we're not going to support creating these things from a storyboard right okay that finished our featured cell let's go ahead and start using this thing back in apps viewcontroller.swift we can scroll down and add a new method here this will configure any kind of self-configuring cell their genotype their cells in Figure an app and an index path and return that thing configured so it's generic over any kind of self and biggering cell we can say configure a featured cell for example we'll pass in the app to user this thing and the index path so we can DQ this thing from the collection view and send back the fully configured cell that was requested so inside there we'll start by saying to our collection view go ahead and DQ a reusable cell of that type and we can use the reuse ID of our cell type because it has one for sure an index path plus an index path do a typecast if that fails the fatal error unable to DQ that cell type I should never fail once that's done we'll go ahead and configure the cell with the app loads asked for and send it back so again I'm happy to have fatal error here if we're asking to DQ some kind of cell that doesn't exist that's a fundamental logic error and should never happen and so now we can use that we'll set up here register that cell type with our collection view for it we use ID so it knows how to create and reuse those featured cells next up we'll make a new method down here called crate datasource this will say our datasource is equal to a UI collection view visible datasource jamendo a section and app passing in our collection view inside it so as you can see it literally owns our collection view it knows how to work with it and this is a closure so inside they will say give me the collection view and the index path and the app to work with so it literally hands us the app to work with it'll say okay here's an app what you want to do inside there we're gonna figure out which section type we have by switching on its index path section type and then for any kind of thing we'll let's call like a bigger method with featured cell itself and the app and your next path meaning right now no matter what always use the featured cell for this type of cell will add more to those shortly further down we're going to say there's none any method called reload data it's like a new variable called snapshot which is an NS this will data source snapshot again generic over section and app this is also new in iOS 13 and it's a class that holds all the data in our collection view visible or otherwise so what we do is we fill this thing with all our app store sections and all our App Store apps in those sections applied it in one single snapshot and give that to data source and it was shown in the table view when we want to make changes or make a new snapshot add or remove things from there freely and then apply that snapshot okay let's go back to our code again there's our snapshot we you now say go ahead and append all our sections to that snapshot and then for all sections we have append their items to the snapshot using that section and then finally apply that to our data source which in turn will show in the collection view and finally we can now scroll up to viewdidload and call those two methods create edit source and reload data boom and with that now we can press command R to build and run our code and see how this thing looks there we go just like the AppStore and more or less so obviously we are quite a long way from the actual app store and that's okay what I've done so far is answer the question how do we manage the data in our collection view as you've seen the answer was a UI collection view difficult data source the next question is how do we manage how data should be shown and right now we still have the answer UI collection view flow layout would give us that lovely woodgrain book shop effect we had earlier in our app that means having a sort of white grid thing it's quite messy and so we replace UI collection view flow layout with another important iOS 13 class UI collection view compositional layout and this thing gives us four major new types to work with NS collection layout size NS collection our item and s collection layout group and NS collection layout section the NS collection layout part that doesn't change so let's focus on what remains size item group and section size that's actually pretty easy that's how big something should be the remaining three they are more complex here is Apple's App Store again if we streamline the UI and focus only one part of this that part there then remove the sort of outline of the iPhone and imagine this part of the screen stretching off to the screen and it Scrolls through that's what it looks like behind the scenes on this layout hostile world that is one NS collection layout item the three vertical items that's one layout group the whole thing that's one layout section so we have one or more loud items going into a layout group one or more layout groups go into layout section and one or more layout sections going into a compositional layout okay back in our code again let's try and use a collection view compositional layout here back in xcode i'm going to scroll down and make some space like a new method here call crate featured section pass the in section to use and it returned an NS collection layout section inside there we'll start with the NS collection layout size to define an item size how big is one item in our section as you can see it takes a waste dimension and height dimension and these are wonderfully flexible things for now we'll see our width dimension is equal to fractional width of 1 and height fractional height of 1 what that means is our item will take up the full width and full height of its parent which remember is a group okay let's now wrap that layout size inside an NS collection layer item passing in that size and that is our item as I said earlier those items then go into a group we can say let layout group size how big our group should be this will be another NS collection layout size and for the width dimension now I'm gonna say fractional with one again fill its parent for the height though we'll use a different height I'll say dot estimated 350 I think this group will be 350 points high it's an estimate we can then wrap that group inside an NS collection layout group so I'll say layout group equals a new layout group I'll say it's a horizontal group using that size I have to decide it it's an array of our layout item after groups come sections so we'll say let layout section equals an NS collection layout section with that group and then just send that section back to be used okay so that's a method that creates one section in our entire layout we're now going to write a second method called create compositor layout will say func create compositional layout as a return a UI collection Buhl out inside there will say make a new collection view compositional layout let's initialize that actually takes a closure Italy passed in sexual index to work with and the layout environment and that's really useful because this closure will be called whenever the layout environment changes so if they go between portrait and landscape for example this closure will get called again and we can change the way our collection view looks inside they'll fit with section we're in then switch the type again and for all section types at this point waters call create featured section using that section so you always create our featured type for what users think I'll do one small change here I'll add a configuration for our layout and give this thing the intersection spacing of 20 and assign that to our layout configuration and then send it back okay that's our section configuration done and our layout configuration done so now you can scroll up to find viewdidload way way way up here and here's we create our flow layout I replace out with a call to create compositional layout our new method and when that code runs now we'll start to see our app coming together boom there's our big design so we can scroll through to see how they look really nice so as you can see these things are scrolling vertically which was it really our plan we wanted a horizontal scrolling if we go back to Xcode and scroll back down to create a featured section you'll see the reason it fills the screens because our layout group size has a fractional width of one it'll fill the width of the whole section we want this thing to scroll horizontally and so I'll say that our section has orthogonal scrolling behavior now orthogonal means this section should scroll at right angles to our main collection view so our main collection view Scrolls vertically this section will scroll horizontally and you can see there are various options here continuous group paging and more let's look at how these things work here is how continuous scrolling works and I swipe it'll move through and they slow down and stop naturally when I release my finger regular UI scrollview behavior next we have continuous group leading boundary here when I swipe and release they will snap to make sure that will decelerate so the item stops just the beginning of the section like that every single time exactly right it's absolutely gorgeous then we have group paging as we scroll it will snap to one page at a time for our session so it always stops just in that left edge like that then we have group paging centered the same behavior but now the items are stored in the middle like that so are signing to the left it snaps in the middle and finally we have paging this will page by exactly one width of the whole collection view which in this case will cause our views to get further and further off the screen I shouldn't think you'll want to use this quite so much in our code we want the orthogonal scrolling behavior of group paging centered that matches the AppStore nicely now if we run the code again we should start to see some scrolling boom like that it's going through horizontally now orthogonal into the parent scroll view now one thing the app saw does very well is it shows you a little bit of the picture ahead and behind the current item giving you a hint there's more to come and move on through already we can get the same result by changing our fractional width from one down to a magic number naught point nine three like I said at the beginning I'm quite happy using these magic numbers Here I am literally just looking at the app store on my phone and compared it to the screen and kind of getting as close as I can in a short amount of time if we run the code again now you can see at that little hint of things before and after as we swipe through it looks much better but notice how there's no spaces between our items they butt up directly against each other we can fix that by going back to our code again and say that our layout item here has some content in sets using NS directional edging sets the values I'll say as top of zero leading of five bottom of zero and training of five push things away leading twenty minus five points and now we ran again we hit this effect pretty much just like the App Store we can now to swipe through and see items on the left and right edge beautifully like that okay that's what the app store again is one thing that they do which I haven't done if i zoom up really close you might just about the others see it if this sort of gray line there let's actually attach those scrolling cells so we can go back to our code and add that thing in in Xcode we'll go back to our featured cell then scroll way up to the I initializer and they can new view here called separator it's a simple UI view with a zero frame a new better staying at Amica false we can modify the constraints and then say it has a background color of quaternary label that is the most transparent kind of label possible that still uses white or black color for the text but now use lots of transparency so it's barely visible we can then scroll down and add that thing to our stack view before timeline I'll put separator here and it will also add that to our NS layout constraints I'll say that our separator has a height anchor using the constraints exactly equal to one ten points because the spacing after that to match the AppStore and there we go there's our scrolling separator looking nice even better Keurig used somatic colors and system colors when we enabled dark appearance and settings we'll find that our app looks great in dark mode as you can see here okay so at this point we've kind of look close enough on that first section it's not identical it's not designed to be it's close enough on to this second section here and what you'll find is this will reuse all the same concept and much of the same code you've seen already and it'll also give you a better idea of why those NS collection layout groups are so useful to have so back in our code again let's go to Xcode and I'll make a new subclass of UI collation view cell called a medium table cell then press next then press create and millicent could form to the same self-configuring cell protocol we had before course that means adding a reason to fire but now and call this thing a median table-cell now for the left of this item it's gonna have a picture a large white title and a smaller gray title on the right a get button I'm not gonna make all the App Store buttons here but I will at least do one quick one so we can say we have a name label here a subtitle label we have an image you and we have a Buy button using UI button type custom then we'll go ahead and override the same initializers before in it with frame then call super init frame inside there was that unnamed font to be the preferred font for textile headline and give it a label text color for our subtitle this has the preferred font of sub-headline and secondary label text color then for our image will say that image you again has some rounding more this time and I'll clip the bounds after by button I'm going to use a UI image the system name of iCloud door and the arrow down for state normal now this thing UI image system name allows us to load one of the 1500 icons apples rioted with SF symbols it's really really nice when you do icons then like our first stack view there are two this is the in a stack view this is a stack view of our name and our subtitle you where's thingo vertically stacked one above the other and then make our out of stack view the outer stack you'll be another UI stack view using image view and are in estate view and the buy button will toughest amick so you can do constraints by hand and we'll add that to our content view so constraints on a load of boring Chris Reitsma afraid we'll do ns now constrain activate what's that our leading anchor to be equal to the caller views leading anchor and then copy and paste that a few times we'll say trailing anchor and trailing anchor then top pocket and top anchor I'm not gonna do bachmeier here it'll just resize down to fit next lab that could figure with app method so we'll say funk can figure with app app give the app's name to our text apps up heading to our subtitle and again use UI image named so it loads image from the bundle into the image view all that required initializer will do required an encoder and s coder fatal error just know this allows storyboards entirely so that's our medium table cell and now back in apps you control dots Swift we can register that with our collection view we'll say up here boom our collection view don't register medium table cell itself for ID medium table cell but reuse ID okay so the collection view now knows how to create and reuse medium table cells next up we'll go down to our Creator source and we'll say if you're loading a medium table style section then call configure with medium table cell and the app and the index path otherwise the default are featured sell now for lair of the sting we'll start making a new method called crate medium table section again returns an NS collection now section but inside there the layout is more complex first up our item size is going to be an NS collection out size with the width dimension being a fractional width of one but for the height dimension we want to have three of these things and vertically in our group so I'll say the height dimension should be a fractional height of not 0.33 one third of the parent we can wrap that inside NS collection in our item like before and then give it a same inset as before so it matches the first featured cell tower 0 5 0 5 after the item comes the group to make a new size for that hour will be the same magic numbers before 93% of its parent and for the height I'll give this thing a fractional width of not 0.55 now many folks see that and get very confused why have I just tried to provide a width to a height parameter well think of it like this if we had a container of stuff an item inside there we could say make this thing fill half the width of its parent by saying our width is half the parents with like that but if we wanted to square what would we say for its height well it turns out we can actually just say use half the width again and it will correctly use that for its height now here using fractional width for the height dimension is not the best idea but it's too cool not to show you I couldn't resist anyway at our group size we can now define a layout group this will be a vertical layout group because these things stack into threes vertically I'll say it's vertical using our group size and our single layout item as it so items we can wrap that in a collection layout section we haven't seen the same orthogonal scrolling behavior as our previous section group paging centered and then send it back and finally up with make our layout I'll say for a medium table make sure and call self create medium table section for that section and now you can see how that looks okay there's our section it kind of works though ideal though as you can see some things are stretched what's happening is these views are inside a stack view and a stack view wants to fill its space with content and so in this case it will pick the worst possible things stretch our picture what we want instead is to stretch nothing that can be stretched the text label that can be stretched and have some whitespace quite happily so back in our code we can return to medium table cell and then scroll up and finally make our views and below this Buy button here we're gonna say that our image view has content hugging priority of default hi horizontally a same for our button has hugging priority hi for its horizontal axis this means it refused to stretch those two things horizontally and instead prefer to stretch for remains to the label and now you'll see this layout looking much much better it's not perfect though look at the way we have spacing between the title and subtitle a big gap there doesn't look great again quite easy fix we can go back to our stack view and say down here that our outer stack view has a Limon of dots enter don't stretch it just enter it for an again now that problem solved looking better it's still not perfect though look at the way there's no gap between the picture and the text when you fix that to back in our code scroll down a little bit I'll see our stack view has a spacing off ten points let's push these two things apart so you look better on the screen boom really nice in fact that's more or less sections made but let's look at the app store again notice this thing here see it in dark mode where's that well that thing is a section header which media has to appear before the section and not scroll as we swipe through we can do that thing too back in our code I like a new class this is in a sub class UI collection reusable view I'll call this thing a section header as well as sales this is going to have a reef identify er so we name these things nicely in code I'll say it's a section header and for its content we're gonna say either the title and a subtitle both UI labels of course have to override our old friend in it with frame calling super init frame inside there we'll add our separator it's another UI view with frame zero will turn off hammock for separator and give it the same quaternary label had with the other separator and in fact that whole code is identical to the featured cell next up our title text color is going to be dot label and our font is going to be a scaled font for UI font system font of size 22 with a weight bold then for subtitle text color I'll be the secondary label for our constraints will then wrap those in a stack view using the separator and title and subtitle make sure this thing has Tanic turned off and goes vertically then add as a subview for constraints it's another rare bottle our constraints we'll do our separator has a height anchor equal to exactly one stack views leading anchor goes right into our leading anchor and then training anchor training anchor table anchor top anchor and so forth so it's pin to all edges of the parent view this time though I'll add a minus ten to the bottom anchor to put a little bit up from the bottom as before we'll have custom spacing after separator of just ten points and then we're going to turn off in it with coder so we can't make this thing from storyboards will say required of net coder fatal error stop trying to make storyboards happen now you can use that we can go to apps you controller again scroll to our cells and add collection view register this time we'll choose for supplement review of kind that one it our section headed our self and the kind had to be UI collection view dot element kind section header with ID our ID boom so now knows how to create and reuse our section header classes now back we made our medium table will teach us thing how to handle section headers down here after our scrolling behavior I'll say the section header size using another NS collection out size for the width I'll say the same magic number and 0.93 but for the height this time I'll say 80 points is my estimate it's about 80 point high then we'll wrap that in an NS collection layout boundary supplementary item using our size and our element kind but the alignment are say top and I can attach that to our layout section by using the array of our layout section header and now way back up we made our little source here there we go this thing here we make our a source here please add to this a supplementary view provider which we've given a collection view a kind and index path and it's our job to turn that into a section header so first steps easy enough we can go ahead and DQ our section header from the collection view all the kinds asked for with our brief ID for their next path and type-cast section header if that fails just return nil now return nil in this context actually also crashes your code use never return nil from this closure but that's okay there should always be a section header now to get a section itself rather than read the index path I'm going to use a slightly different approach so you can see how we can get out sections from our snapshot directly so below that I'll say guard let first app equals self the data source but item identify for that index path else return nil so find the item ID in this case an actual app instance that matches the index path that was chosen what is a first app in the section if that fails return nil crash the app should never happen then we'll use that to read our section we can say self but later SawStop snapshot thoughts section and a defier containing that item so we can say here's my app item which section owns that we can go the other way now if that fails return nil next we'll say has this thing got a title or not if session title is empty return nil again should never happen but it's worth having it in there testing purposes now we can say our section headers title is our sections title and a subtitle is our section subtitle then send that header back to be used by a collection view and now if we run the code again this thing should be coming together boom there's a title and you'll see it is not scroll it stays fixed as if things below it scroll perfect okay so that gives us the second section all done now this third section I hope should be really easy for you you almost right in the co for yourself get the same thing again back in our code we're trying to Xcode again and make another new class it'll subclass do I collect if you sell again called a small table sell like the others this will conform to the same self configuring cell protocol which means it has to have a reuse ID I'll use small table cell for its properties I'm going to add a name label and an image you image you and then over I the same initializer as before in it frame calling super init frame the name font will use your wife on preferred font a textile title too and pets color is label the image you say has corner radius of five and clips to its bounds then wrap those things stat for you again which there's another UI stack view with the image you and the name will turn off hammock for the stack view and add it to our content view for it autolayout constraints are activate another array this tires me stack views leading anchor heel to our content views leading anchor then copy and paste that so we can say top anchor and bottom anchor okay there are our constraints next let's have the configure with app method so we'll say that our name text is our apps name and our images image is another you aim is named of the apps image again learn from the bundle again it's five testing purposes and finally our friend init coder I'll do another fatal are saying how many times I have to tell you this isn't supported you we can now go back to our app your controller again scroll up the viewdidload and find our collection view and register that cell type register small table cell for it's for you tidy you I'll be good anti data source and add that as a case for our data source his small table can figure that kind of cell with the app and the index path and whisk all right to the bottom ladder final method here called great small table section it's a return another NS collection layout section for the sighs I'll say this thing has a width dimension of fractional width of one but for the height ask there's not point two and that's because we have five of these things going vertically her item size goes into an NS collection allow item with the item size Tango's look using a fractional width of our magic number 93% and a height dimension of estimated 200 points it's about that high I can then go to a vertical layout group with that size and our single item inside after the group come to section it's like a new layout section using NS clashing out section and our group layout group but this thing needs to have headers just like the medium table section so rather just have more code in here what I'm going to do is scroll up and find the code in the previous method so I'll select it all like that and then cut it to my pasteboard I can then replace that with a call to a new method called create section header which we now scroll down and create and I'll say funk creation header return to the NS collection layout boundary supplementary item they just paste all the code from our paste board into there and return it back to the caller and now we can go ahead and take those three lines the create section header and use it and pass it back I had pasted that into great small table section and a bit of cleanup and boom we're done that thing now knows how to create section headers just like medium table section so now I'm going to scroll up to where we make our layouts and say if you have a small table call create small table section using the section and now we can build them on our code and see how it looks so not bad you can see it's a bit warped but you'd fix that pretty easily back in our code for a small table cell we'll find where our stack views made and say this stack view has to have the alignment of dot Center as spacing of 20 points you now okay getting there hopefully there we go looking better now see those images are aligned right to the left of the screen that's because we haven't got the orthogonal scrolling behavior of group paging centered here because this thing won't scroll so Ryan using that will instead apply some custom in sets we can go back to apps you can't rollout swift scroll right way down so we find our create small table section boom and say here is Gary's custom insects for our layout item I'll do n sets equals NS Direction alleging sets using top zero leading 20 bottom zero trailing zero and that matches how the App Store actually looks so now it should get boom absolute perfect copy of the categories listing okay let's wrap up given how fast this video was we've come pretty close the goal wasn't to be exactly the same the goal was to get close enough in a short period of time but even though it done a lot of work what you're seeing is only the very very tip of a much bigger iceberg these conditional layouts are incredible you lose so much more than to create advanced layouts they're just beautiful beautiful things I highly recommend you watch these two talks from double-up DC 19 advances in collectionview layout which is Session two one five and advances in UI data sources Session two twenty both of which are done by this chap here who is Steve Breen on twitter at underscore underscore pre no he worked super hard on D technologies this year to release them for us to use and love go on Twitter on Twitter go and tell him how amazing these things are these folks deserve our preciate and love so what was your favorite new feature in iOS 13 is it the collection views Swift ey or something else let me know in the comments below and don't forget to subscribe to my channel and make lots more videos like this one about Swift and Swift UI all designs help you build your skills as a developer you

Channel: Paul Hudson

Views: 30,036

Keywords: ios, swift, uikit, uicollectionview, compositional, layout, flow, collection, view, UICollectionViewDiffableDataSource, UICollectionViewCompositionalLayout, ios 13, app store

Id: SR7DtcT61tA

Length: 50min 2sec (3002 seconds)

Published: Wed Oct 16 2019