DC iOS: SwiftUI 2.0: Flexible Layout Design

hey everyone thanks for coming dc ios uh this is your first time here welcome we meet every second tuesday of the month um last month we couldn’t make it but this month we have craig here with us um craig did you get a chance to look at the new iphones i know you’re saying that you could get a chance to watch the event right i definitely did yeah so did you decide which which one you’re going to be picking out you said the pro max right pro max um can we ask our audience to scott do they have a poll that we can we can run yeah all right everybody so um yeah so let’s say what phones do you all want to look at or would you look at buying oh numbers are rolling in let’s see max right now is winning out pro max some people aren’t getting any some folks grabbing their droids i guess they don’t like that new iphone at all well i would have guessed a certain someone but they just joined the meeting so they have not voted for android yet there it goes cool so looks like uh most folks are going to be sticking with the current phone that they have i think i’m in that category as well um with the max coming in a second pro max um iphone pro coming in at third oh let me let me vote and then we can push that over cool so we got obviously maybe i can uh share that yeah i don’t think co-hosts can vote but we can just tell you up there all right i know in my heart that it’s 13 tied all right so yeah none even now can everyone see the results in front of them it’s just me i i put it out for everyone now oh perfect cool cool cool so people definitely excited about it it was um i know the the other thing that they released today was the homepod mini so 100 bucks a lot more affordable than the last one so hopefully that gets more traction um other than that we do have another conference happening in the dc area well i guess it’s gonna be virtual but um ios kmtc will be will be happening so that’s that’s definitely exciting um in fact craig you’re going to be speaker there right yes sir yeah so we have um can you tell us about what you’re presenting there um so my talk is is the mindset of a swift ui developer and my goal is really to kind of uh break down the differences between a ui kit design and a swift ui design and how you approach it differently i feel like a lot of people are trying to take a ui kit and convert it to swift ui and i feel like there’s a different approach and you have to kind of know that otherwise you’re going to be kind of disappointed in the fact that you’re not getting what you’re looking for cool um yeah that’s definitely going to be a talk that we’re excited about and i added the link to uh iowa dc to the chat so if you guys want to go on there and uh purchase a ticket all the proceeds are going to women of code um i know android summit just ended up happening last week and they were able to raise about uh ten thousand dollars i want to say around there for a woman who codes so um yeah definitely going to be doing that here with with uh iowa dc um and craig i know you you probably published a few books already i think you have like three out and then you have a fourth one right on the way right can you tell us a little bit about your your new book sure um so the new book is swift ui projects it is covering um six apps uh to watch to iphone to ipad um and it covers design as well as the backend or data side of things um i wanted to kind of have something different so a lot of people like paul will cover a lot of the things that um are just basic but i like to talk about or cover things that are like okay i want to do form but i want it to look like this and can i get it to do this and this and this it’s kind of um just a different approach and um and i i try to go through why i do something and and hopefully you know also bring in more than just developers for the book gotcha and have your your past three books have they all been um ui related they have been so my first book which is the same book since ios 10 and actually the guy that took over

pretty much is using the same format it’s one app for the whole book um and you basically build out the app in the beginning and then uh each chapter after that is like a new feature like um like an add-on so like uh messages and maps and different things like that but um this one the newer one i like because like i got to do so many different things and i didn’t i wasn’t stuck on the same one for 16 chapters it’s awesome um and you’re currently working right now at is that fan reach yes and and who do you like i think you you said you build apps for the nba mls and enderphile nfl nhl chl um most uh most sports teams except for mlb um they pretty much have their own little thing going on but yeah we um sports that’s what i usually stick to so i put two sports apps in the book so that’s kind of where it comes from my inspiration on that but yeah i um i’m a big sports uh fanatic lakers fan so i’m happy right now and uh yeah so we you know that’s that’s what i do every day watch sports and encode it so you’re living life yes right now today um definitely on a high with the lakers nice um well i’m glad lebron is over there i’m a cleveland guy so big big fan of him and wherever he goes um was going to ask you are you using swift ui in um in in those apps yet or not no no we can um i’m using it now as uh we have it’s primarily ui kit um i brought it in for uh we built out i built out an audio player so i brought that into the swift ui i’m sorry the ui kit app and then i’m currently working on a separate project that i’m just starting but should be in the store towards the december time that i’ll be doing all on swift ui awesome um and i know you were just recently on a podcast can you tell us a little bit about uh that podcast a little bit oh sure um so friends with code i was on recently with and we talked about all things really um just like how i became a developer and and how i got into this business and just my journey here and why i do the things i do with helping out others um so it’s it’s long but uh i enjoyed it one of the i’ve done a few here and there but that one i really enjoyed doing yeah i i was a big fan of it i definitely listened to it i also added the link to the chat down there for anyone interested to take a look and listen to that and learn more about you um let’s see what else so i think that’s that’s all i had question wise um so i guess without further ado i know you have a your presentation that you prepare for us today with ui uh oh flexible design so i kind of move the rings to you and well a good thing do we want to ask the second question now or do we want to ask that later um sure yeah we can we can ask i know the presentation here is about sophie why so we want to just ask the audience um have you guys got the message of ui yet are you an expert did you just dabble with it um do you not care are you more of a flutter person i feel like uh if it was a flutter person they’d probably be at the flutter meet up and anyone that checks expert gets to do the rest of this talk just right now looks like we already got we got three folks now but not stopping now that they’re uh they have that requirement and i think i know who our one flutter vote is or is larry in here the same person who voted for android uh now i’m thinking if larry’s in here larry’s the head the organizer for the dc flutter meetup so i’m sure he would be gone yeah uh so yeah it looks like right now most people dabble with it it’s about 61 that’s good yeah so you got a lot of new folks in here that want to learn about um you know they have some experience with it but you know definitely want to learn more uh about 28 uh that that have not tried at all um and six percent so through people that are saying they’re experts so uh if you need assistance on any questions yeah i’m sure they’ll be able to help you out um yeah let me hand it over to you and then yeah you can all right it’s hard to talk sounds good let me get my screen going all right everyone see screen just so i yeah okay perfect all right so uh i’m gonna kind of say a couple of things i saw some people coming in late so i might cover a couple of things i wasn’t expecting the talk at the beginning so

i would have shortened up my slides but um so a little about me if you haven’t heard already i do uh ios apps for sports teams nhl chl mba nfl um currently on my fourth book called swift gy projects um at the end of this talk i will give a coupon for amazon link to buy the book um it’s projected to be out by november um i just turned in five chapters that were grammar checked and reviewed and then i’ve got two more to turn in tonight and then four to work on this weekend so it should still roughly be around november 10th um and then if i can get a couple of people to do testing on it before i do my final like thumbs up i’m gonna hopefully do that um i’ve got a bunch of volunteers that are have been trying to uh help me out i just haven’t gotten to that stage yet but um the idea of this book is um it’s to cover watch iphone and ipad um so just to give you an idea i’ve been doing swift ui i was at wwc last year um and when i go there i like to like build stuff and learn so the day that i was there i was literally doing i created a design and then the whole week i would just go back and ask questions to the devs so that i could understand different things and so um i took a little bit of a break maybe about a month or two and then packed uh the editor for pact as a good friend of mine was like poking me to see if i wanted to write another book and i had the time i didn’t want to um i’ve worked here’s some of the iphone apps that i’ve done designs for and done in swift ui and here are some of the ipad apps and these two actually are in the book that you will see but um my so my experience is a little different than most no i don’t have any swift ui apps in the store but i’ve dealt with it a lot and i feel like i can answer most questions especially if it’s design related um and i feel like the best person if you are looking for someone on the combine side is donnie he’s the one i recommend even in the book he’s just really good i learned a lot from him um that i didn’t really know um the book that i do doesn’t go in heavily into combine because i feel like that’s a whole nother topic in a whole nother book so i just cover strictly swift ui state uh binding and all of that stuff in my book yeah incredibly i just want to toss that in here as well um we’ll be doing a raffle for craig’s book at the end of the meetup um dc i also will be reversing two of them and giving it to two attendees today um yeah so excited to get those up to people and then hopefully they can help you out with some of that testing that you’re asking for awesome thank you all right so here’s uh one app i did um i did some workshops and i still do them for tri-swift world and um i actually pushed um did this was the first one that i put out and um it sold out fairly quickly probably within two hours and was backed up for a month on people um wanting to take the course so i pulled it from tri swift i’m doing a new one that’s on theater on booking of movie tickets and i know last i heard from natasha there’s one seat available for this thursday and basically this one is going to turn into a mini course that’s going to be online available from beginning to end four to six hours and i’ll cover everything from design blank project to uh app so if you’re interested um the my site’s called design swift ui dot io i’ll have the email sign up and i’ll have more information in the coming weeks as soon as this book gets off my plate so today’s talk i’m going to look at three different things we’re going to look at a design i i wanted to treat this i felt like a talk that just had slides was kind of boring so i’m gonna code um and do it through here so you know bear with me i don’t expect any problems but i have final project so if there’s anything we’ll skip through and i’ll just go to the final project and you can see it through there but um this we’re basically going to look at three different things a featured section browse channels and movie detail and let’s look at each one of those and so you guys can get a better idea so here we’re going to look at how we can lay out a featured section for a tablet and then a slightly different one for an iphone and this is all orientations then we’re going to look at um how we can do different things with

um with the grids and make them go in different orientations based on device as well and then we’ll also look at a movie detail and how that can be utilized um to work with an adaptive layout in the book um i do a sports news app that is on the ipad and i go through prototyping first and i find that that’s the easiest thing to do before you bring in anything i just use shapes and i make sure everything is is going where i need it to when you’re dealing with images they’re a little different because images have to scale and depending on the scale and the ratio they work weirdly so i always recommend that you bring in the image you’re gonna do because what will happen is you’ll you’ll prototype and then you’ll go to you’ll end up bringing it into the app and then realize that you still have work to do um and you’ll see that here as as i go through all right so now it’s time for code and again if you have questions um i’m gonna i don’t expect this to go 45 minutes or so i feel like that’s way too long so um there you guys want plenty of time to ask questions i will push this code up that you can look at so you guys can um see it um it might not be up right away but i will share a link um and get it to you guys as soon as possible i just i didn’t have enough time beforehand to get it up somewhere all right so um one thing that i’ve um doing these workshops for the last i would say five to six weeks with tri swift a lot of mine have been based on design and i kind of come with a different approach but um one thing that i like to do is take all my color assets and put them in their own asset folder um just something i learned and i liked it it’s something i do in the book as well and i have this utilities folder that you’ll see and it has theming in it and that is uh scaled fonts and custom fonts and all of that all work so if the user um changes the scale of their font it also scales now i didn’t acquire i didn’t actually cover or do anything on scaling um it should naturally do it um but i didn’t focus on it so if you try you know scaling fonts and it doesn’t quite work that’s because i just didn’t get to that part of it so the main thing that we’re going to do is we’re going to work on let’s let me pull up the deck again and let’s look at the first thing that we’re looking at so here we’re looking at featured movies and there’s there with switch ui there’s a few different ways you can do this and i and if you have different ways once you get the code please reach out to me on twitter and share it with me because i i’d love to see the different ideas and um i learned even a couple of things from someone online the other day um his name is is slipping me right now but again uh if you have another way to do this this is great but i find that this is the best way to accomplish this particular task of getting a primary image with kind of thumbs now these don’t scroll but if i wanted them to scroll you could just simply add a scroll view to them so let’s let’s start there and give me just a second so i can get all my like stuff set up and things out of my way so um right now featured list the only thing that’s really working in this particular app is um i created a simple scroll view and i didn’t really think that needed to be covered so we have this navigation that opens and closes for ipad and we have a scroll view so that’s all that’s in here and then everything else we’re going to add or i’m going to add and you’re going to watch me add it so the first thing we’re going to do is we’re going to put featured list into watch now so i’m going to say featured this view is going to get added and let’s just look at it it should appear with just text that says feature list view just so we know that it’s there so here feature list view is there i’m going to command click inside and jump into this particular view and i’ll make it a little smaller so you can see um actually one more thing i’m gonna also update this watch now

to be um to have all the colors that it needs just in case and then back to featured list all right so the first thing that i decided to do with this particular layout is use what’s known as an h stack so for the those of you that are sort of kind of understanding that um an h stack is just it displays in horizontal a v stack displays vertically and the z stacks stacks on top of each other with the z index so um i would say that and even in the book the z the z z-stack is my favorite because i can stack things make overlays push things to the right push things to the left do a lot of the things that were really a pain in the ass when you were dealing with um ui kit and so it’s this is kind of why i say you look at the power of what switch ui can do versus what ui can do and there’s so many things that you can do that’s just to me great um so i’m going to put an h stack here and add our images so okay so we have um an h stack that has a primary image and um and in in swift ui anytime we deal with images and you want them to be resized we always have to use the resizable modifier now i’m going to add a couple more modifiers to this to help us out because right now as you can see it’s just being stretched and it looks like what it looks like i won’t say the real word i was going to use so now um i’m adding a couple more things and so this should make it look a little better now we’ve got a a frame and a min width and min with min so whenever you’re dealing with frames um you can set the the width the height um of something now i would use those sparingly and making sure so for here i’m saying i want a width but i want minimum to be 550 and then it could be anything else after that higher than that um we also have max with um and then uh those work really well with doing things that you want to do i’m pretty sure i used it in here too um and then the aspect ratio is set to 69 so basically i wanted to stay in the 69 aspect ratio i wanted to fit the screen and then layout priority basically says whatever other layouts are going on in here this image has priority so it’s the primary image in my app so it’s going to stay as priority so using layout layout priority helps here and then you see that i have some padding horizontally and that basically just gives me a little bit of padding on the left and on the right that’s equal and that’s all that’s doing there so now i’m going to go to my next step and i’m going to add my thumbnails and so as you can see right now it’s not looking too hot everybody’s kind of doing whatever they want and so we need to kind of add some extra things here so let’s add a couple of more modifiers and i’m gonna put the same modifier on all three images hit save and now right now it looks pretty good um the only thing that’s kind of weird is it’s not really constrained and so this is the kind of thing uh in the book that i talk about where when you’re dealing with um preview um try to not use tr try to not use um the the device you can do fixed layout in this case it’s not that big of a deal but it is a lot harder to see if you’re if you’re doing what you’re supposed to do when um if your preview is huge and so here it’s showing like that it’s bleeding out here and here and really what we want is all three to stack in them to be even but i know it’s right so i’m not worrying about it all right sorry my laptop’s trying to run away so now um let’s let’s kind of look at this on the ipad and see what we have and what’s going on so um i’m it’s getting it’s doing exactly what i was what i wanted wanted it to do it’s giving me these thumbnails and aspect ratio of really i’m not having one but it’s giving me a contact mode of fill i’m telling what the minimum width is going to be and i’m telling it to align

center now that’s just basically where the uh image is going to be focused on so if all your images were kind of left justified you can you can say leading or if it’s trailing here i just pick center um and i did that for each one of these and then the clip shape is basically giving the rounded corners that you’re seeing on on there and the the benefit of all of this is now if i resize my screen everything goes with it in scales now there are little hiccups like you’ll see sometimes this scroller sometimes takes a second to realize that the screen has been resized and then it resizes itself as well um but overall it does exactly what i want and i’m not worried in regards to it breaking anything and if i go ahead and rotate same thing everything works and then i’m gonna take it and go to the iphone and i’m not even gonna waste your time because it’s gonna look like crap um and that’s so that’s where we where we land um a lot of you are familiar with size classes and that is the one way that we can manipulate um how we do different things in different views now most people think you can only manipulate a couple of devices but you actually have a little bit more if you use horizontal and vertical together so let’s look at a slide and and i can explain a little bit better so this uh screen is a little small so i apologize for the text but i’ll read it out so um if we’re looking for if your vertical is regular and your horizontal is compact um we’re gonna be basically on an iphone portrait or ipad one third split view all right if you’re looking if it’s vertical compact and horizontal compact and we’re looking at pretty much all of the smaller devices um no maxes no pluses all of the smaller devices are going to cover this particular area and then if you’re doing vertical compact horizontal regular then we’re looking at all larger iphones when uh that these are covered in and then finally vertical regular horizontal regular is basically no multitasking and it’s just full screen ipad or mac os so we have like we can target a few different things in a few different areas that we want and that’s what we’re going to do next so first thing i’m going to do is clean up some of my code and move things around so i’m going to take this entire bit of code that i have right here in the body and get rid of it or i’d cut it out and then i’m going to create call a variable called um featured what was that side all right so feature site is now moved over and i’m just gonna add it back here and now now we can just move i’m gonna start adding some new stuff and i’m gonna explain what i’m gonna do so i wanna add another layout in here where i can do this um or i can put the thumbnails on the bottom rather than on the right so we can accomplish this by um using size classes and again i’m gonna first just get all of the stuff ready and then i’ll show you how we’re gonna get there so um here we’re gonna create what’s known what i call oops that’s not the one i wanted we’re going to create a header all right so same thing as we did before this main one is going to be our nav link this is the one that’s going to go to the detail page when you click on it and then what we want to do is create our content so content goes next and now we separated these out if i was doing this in production i i would do the same thing here but i wanted you guys to kind of see uh start with this side first so um this is probably the preferred way of doing it in more smaller chunks then the larger chunks but as you work more with switch ui you’ll start to see uh what works for you and how you do it um so here i have a header and i have content and now what i would like to do is put all of this into what we can call feature under so we’ll do that now so here is basically combining these into one so we have feature under which is in a v stack and we’re putting the header above and then we’re displaying the

content um horizontally now the trick that i did here is when you use group group just groups them together and then i could technically take this and do a v-stack and take all of this out of here um so like this here can go away and then i can say this is content and now that is sharing the same code i’m not and these things are being different but i’m not going to do that i’m going to keep this code here um and i’m going to use that um and and also their their images are slightly different in one view than the other which is the other reason why i’m keeping them separate but i just wanted you to understand that i used group here so now the parent can manipulate the direction in which the content goes and that’s why how i’m doing that and then um feature side is in here but let’s um go ahead and add our size classes um and get those in and i love when i hit the wrong key i’m not used to my keyboard okay so now we have our two size classes horizontal and vertical and then the next thing we’re going to do is go back to looking at vertical like we just like i showed earlier so i’m going to add there so now our body has preview is going to go away because now it doesn’t really know what it wants to do and here i have the vertical clasp which again as i broke each one of these down these are in the same order i broke them down earlier but this one would basically cover a portrait iphone and one third ipad the next one covers um all of the smaller iphone devices the third one covers all of the larger iphone devices and then the last if statement covers ipad no no multitasking and then mac so now we can go ahead and distribute it differently we’re going to say f14 and now i’m going to put feature under for the portrait and um one-third ipad i’m going to use it again for small and large iphones and then for the ipad is the only one that i’m going to use feature side and that’s how that works so now when i run this on the ipad we still won’t have any differences it’ll still look exactly the same as it did before but now actually it’s running iphone first so we can look at iphone first come on it’s caught in there there we go the suspense boom and so it’s all jacked up because it’s live code and that’s what usually happens so uh this is not the way it’s supposed to be displayed and did oh i know why because i changed this is what happens when you when you go on a tangent and you shouldn’t have let me run that again at least it was minor okay so here so now we have exactly what we’re looking for so i can scroll through i have my my main image it goes to the detail my little thumbnails down below they do what they’re supposed to do my scroller still works and now i have the iphone the way i want you’ll also notice on the ipad i had maybe like seven continue watching whereas on the iphone i’ve only displayed four so again using size classes to do that and when i rotate now this doesn’t fill the screen which i believe is a bug um but it’s not that big of a deal for me and then it shows the thumbnails here and again there shows a few more thumbnails when you go to um landscape and we’ll go back to there okay so now i know that this works i already know iphone works but i’ll show you that one just to be sure and then we’ll move to the next layout ipad air third gen and run it and this also the code is set up for i um for mac os but i haven’t actually run it on mac os so it probably won’t run but it does run on ipad and the code structure is very similar to what you would do um with a mac os ipad app thing so if you’re looking for that it’ll get you started so here you can see everything still works um on all of that is is where we wanted um

so um if you have questions on this please just say uh featured uh the featured section i’m gonna move to the next one just so that i can do all of them and then you can ask any questions after that but that’s the first section that we have so the the next thing that i want to cover is um this little horizontal grid view and it and it may seem like okay this is pretty easy but it took me a little time to come up with a solution for it in the way that i wanted when i first did the design um and trying to find the deck and let’s move next so here we have um the tablet layout kind of lays out um going um it fills the screen and then whatever’s left it continues down to the next one um and that was the original design plan uh this is going to do a little different just because again the more you play with it the way with switch ui works then you learn how these work i find that um working with circles are more of a pain in the butt than like squares um these will grow in in size a larger and smaller um i probably could do like some framing on them but i it’s fine it works and it does what i uh ultimately it come it came out pretty well for what i wanted to accomplish so that’s all that matters so as you can see here i have two different like backgrounds one black dark gray and then a lighter gray and all i did was i took two shapes and i um combined them together to make the background um i have a special utility in the project that basically allows you to do cornered rounded corners on specific size on specific sides it’s something you can’t do with apple apple either does all corner radius or no corner radius and this one you can say i want the top left and the bottom left to be corner radius i want the top right and the bottom right to be corner radius and then i just basically took the spacing of a stack and pushed them together so that they work and that’s what you’re going to see next so let’s um jump into the code and check that out and i am i supposed to be done at five or take the time that you need yeah there’s no there’s no hard cut off for you okay just making sure so horizontal grid view i don’t have a ton of stuff so i have everything set up here all my logos are here and so the first thing that i want to do is um create my h stack and have no spacing and so this is where i’m going to add my background and do all the things that i want to do so step two um we’re going to create a z stack and now um let’s look at our preview and just kind of see where i’m at right now and so here you can see that i have the top left and the bottom left are giving the rounded corners and and this is what i mean by z stack and being so flexible doing this in ui kit would have taken forever and literally this is like six lines of code and i’m almost done um i love it if that doesn’t convince you then um i’ll show you where the android meetup group meets and you guys can talk about it there um i’m just kidding all right so well we’re moving on to here so oops a little extra and now i’m adding text on top of the rectangle so here i’m i’m basically using and this is the custom font that i use for the book um and i go more into detail in this i even blogged about this at some point on medium but basically i use um a custom font and it allows me to really do like fly through when it comes to doing text um i just type custom font and then bold and then the size and um because i’m not a designer per se that does like um titles headers subheadings um this class is actually set up for that but i use custom um like all through the book um and the book you get more right now i literally just use custom because that’s all i ever use but if you’re if you have a designer who does like a lot of that and creates a style sheet sort of for your apps uh this will also work for the for that as well um just the way apple does with theirs all right so we have this and now we need to add another grid and we’re going to put that right here sorry another rectangle and so now we have our we have our second rectangle and again the spacing is set to zero so that’s why you’re seeing

um no gap in between there’s a little one but it’s not going to be seen when we get there and then finally we’re going to add the grid all right so now again this is taking up whatever room it has and so as the content or as the area minimizes these will grow these will kind of go down to the size that they need to be um i added oops added an extra number there all right so now we’re going to go back to watch now and let’s look at what this looks like i don’t know why my shortcuts are not working weird okay um watch now here so we’re gonna add browse right underneath browse view and we’ll let previews do its thing so right now browser doesn’t have anything and so let’s go into browse view and update so what i did was i basically created a helper class and this is how i’m able to control the direction in which i want it to go so you’ll see how i do it in just a second but browse view is here we’re going to add our variables for our horizontal classes then um inside of this variable or inside of the body we’re going to add all of them and here you can see so i have horizontal grid i’m telling the max width is 150 and i’m get i’m setting the title of the font size of the title and of the subtitle and i’m doing that for each of the views i didn’t do anything for the larger iphones but you can mess around with that when you get the files um and as far as i’m concerned it it’s fine um but now when i hit resume it’s not going to play because i’m using this this class here but if i go back and run it on the ipad you’ll see that we now have it working so now there’s a little padding i should probably add to the bottom of that scroll because it’s cutting right at that edge but you’ll notice that as i rotate um the the grid just changes and that’s one of the biggest features in the new v grids and lazy grids is that the grids will will dynamically adjust to your content and that’s great um but they don’t oh they don’t all do orientation as well so if i oh where am i going there i’m in the wrong orientation there all right so that’s that and then here so now you can see that they’re slightly bigger when they come into this this one and then let’s run on the pro max you’ll see the same things um but the layout will be different and obviously we have less room to go um horizontally so now we’re gonna go vertically with it and that’s where we’re here so again um using size classes they do give you some ability to target some things but you just have to recognize what you can target and what you can’t and there’s even more stuff you can do there’s more complicated things with um geometry reader that’s way beyond stuff that you like that most people care about like it this is just i want to kind of i wanted to find things that were just simple things that i could do so i tried not to go more technical with design and and make it more about just using the things i had to to adjust my my views so that’s browse view and i’ve got one more and it won’t take me that long um and then we can in this talk so we’re going to do the detail view let’s look at that one real quick before we jump into it the silence kills me i’m so used to people like talking and so it’s always hard to do these kind of uh presentations when no one’s you can’t hear anyone so i have to be harder to do like this than in person yeah no in person’s easier because i can see people’s faces and i can see like oh i’m not getting it you’re crazy or oh i got it yeah that makes sense so when you’re just talking and no one’s saying anything and there’s no reaction it’s hard to like right right that’s what i’m saying it’s definitely easier to do it in person for sure and that is just a quick reminder you people can be leaving questions in the chat as we go on so that way we don’t have to like that way we can address them all at the end but that way if people think of questions on the spot you can feel free to drop them in the chat too

please and don’t be afraid to ask i mean there’s probably like three other people that want to ask the same question and you all are afraid so just ask i don’t bite at least not on uh tuesdays and not through zoom so you’re good yeah and you can also mark uh there’s a yes button if you do have a question and we cannot mute you uh towards the end to ask you a question in person that would have any follow-ups as well you can you can ask those awesome all right hopefully you guys are getting something out of this and then this is the last view and design and basically the idea is i want the the image to expand the entire screen and there is still a bug and i’m pretty sure if i used some other things i could tweak out a couple of the minor issues that i see but overall for this to just be kind of like a prototype it really is close to being where i wanted to be so um i wouldn’t be too mad at it again knowing that it only took me maybe a day or so to get to this point um i honestly to me it’s great um so here we have an ipad that’s in landscape and portrait and you can see like over on the left side we have a sub menu and then on the right we have a grid and then as it um gets less space the grid condenses down and this again is a feature with iphone i mean with uh swift ui’s lazy grid v grid and horizontal grid so that comes kind of there as long as you know how to set it up and then the text as well as it pushes in it’s just going to keep making the lines go deeper and then push the rest of the content down um until i probably tell it to to stop or because it’s just a description it’s not that long um and then on the um iphone the layout is slightly different i think i i think i’ve actually moved season three and the text um above the image grid and i didn’t do it this way but it’s really not that hard to switch it out um and still work so that’s that is um what we’re gonna do next and let’s jump into that now so um as we saw earlier if i click on on the main image it goes to detail and so it’s already set up for us all we have to do is just get it to work so first step is my we have our z stack and we have our background um and this is something um that again i said can be done differently so right now i’m using a z stack and then a color but let’s say that i wanted if i’m not mistaken i can do this as well so i can do dot background color dot base background dot um edges ignore dot all and then do text and then so here and if i hit resume i should get the same look that i had with the the way that i was that it was just coded um again this is this is why i really like um search ui it’s it’s pretty flexible and i there’s things i don’t even think about this is something i saw someone do recently and i was like oh i didn’t even think about that and this is a z stack so i’m always thinking of stacks because anything like colors they’re just views so you can put them there it’s not rendering let me go back let’s say to an h stack instead um and now it’s not really doing what i was expecting so i’m gonna do go back to my original code um and then hit save and now we’re there so i’m going to delete text and we’re going to go to the step 1 which is we’re going to add a scroll view firstly and then um inside of the scroll view i’m going to add some more uh stuff for like our image and other things we need so we’ll say d2 so here we just have an image um we have an a title or a text view and then um what i did what in almost all my designs if you’ve seen any of them you know i’m like a fan of um bold and uh light next to each other um and so i just put those into an h stack now if you ever had to do this in in ui kit it was such a pain to have to do an attributed attributed label and then a custom font for this one and that one and literally i did it in three lines four lines of code and um i can create a little helper view and use it

literally in every app i do so again if you don’t understand the simplicity of this this is great to me um and then foreground is basically the color now foreground can be done in different ways right now i’m doing it on the particular this particular title but let’s say i wanted foreground i wanted the text to be blue and the title to be blue i don’t have to go here and then say this is baselight gray and then um i’m sorry this is blue and that’s blue i can actually take this one go to the parent and now append it and um hold on and now i can turn both of them into the colors of the color i want so if you have a if you have like seven or different seven different labels or text views that you need to change all at the same time you don’t have to put them on each individual one you can just get them wrap them in a container and then give it to the container the color you want or if and then if you want like specifically in this case i want the text to be gray so i can override the parent and give it gray which is what i did here so even though i’m telling it that i want all to be foreground blue um this is gonna get ignored because i’m telling i’m saying ignore what the what the parent is saying don’t tell your kids um and you know make sure that you um obey the they kind of just obey their own rules in that case so i’m gonna undo before i forget and then wonder why it’s jacked okay so next step is we’re gonna just create a little four each that’s going to create all the little season items uh in here so we’ll do here and this is three i believe yep all right so this is our i’m sorry this is our like little menu that’s being created and again this looks jacked and i don’t know i’m sorry that this is on this should not be on the iphone because uh we’re gonna have to make changes for the iphone so let’s look at it on here all right much better and then the next step is step four we’re going to do so i created um we do have dividers and you can um with dividers they go horizontally so you can use those but the problem with them is you cannot give them color um if i wanted they go horizontally but you can use um rotation and 3d rotation and rotate them to be up and down but because they didn’t do color i just decided to take a rectangle give it a width of 1 and make my own um again flexibility um all right so now we’ll add the next step which which is this time we’re going to add a label a v stack that’s going to hold our title for our episodes so here we are there and then the final thing we want to do is just add our grid and once we do that we are good so we can say the six all right so let’s go through this and see what i’m doing here and then you kind of understand because we didn’t really break down grids today so here i’m doing a lazy grid and i’m saying that i want it to be adaptive and that the minimum is 175 but the maximum is 220 i don’t want it to exceed that um and then the spacing is ten so that gives there’s two spacings there’s the one with uh horizontally and then one vertically so as you mess with your numbers you’ll start to see so right now um i’m not even quite sure this one so we’ll do like 20 here and so that’s like this is kind of down the middle of the grid and then if i do 20 here that’s the horizontal um spacing there so that’s basically what the two spacings do here we’re running a four each um the id is basically saying self um and instead you need to have something unique since i’m not doing this with dynamic data i just every one of these is going to be unique so i just kind of did it that way i’m creating this image using a z stack with um this little episodes one two three it’s kind of doing an overlay on top of the image and that’s on doing and repeating and now if i run this on the ipad um like i really didn’t do anything special in this particular view and that that was kind of why i left it for last is because now i can show you that oh like the amount of work

it was to get this here it wasn’t much um let me see okay there we go so here it basically works if i rotate you see the grid adjusts if i close there you see that it just there and um this right here is a i just didn’t add a spacer so i could take a little spacer here and push this up to the top so that it it fits in this area um and i just didn’t do that in this particular one or for the ipad i would probably take season one and then this one and move it down here and then do something different when it’s on an iphone but again i just uh you should be able to understand where i’m coming from and then like i said there’s a slight bug on this one and it might be just um i don’t really know i haven’t really looked into it but this can be easily fixed in in a way that it expands the entire screen and i just didn’t um focus on it because it really wasn’t as important but again i just wanted to show you that you can make flexible layouts if you take the time um some of this is just uh trial and error so i kind of had an idea in my head of what i wanted to do and then i prototyped instead of like trying to build the entire app out i just basically um went to each view until like i got what i was looking for and then i kind of tweaked my layout and then the same thing and then you’ll learn like the more layouts you do then you’ll learn okay i can’t do this i can do this um because i needed to be flexible and even after today with now they’re showing minis and um they got the huge um ipad uh phone now that you can use that i want so like all of these are going to be different in different sizes and you want you want your your layout to kind of be flexible so um hopefully that was helpful um i am actually done i don’t have anything else um but i was i tried to keep that as short as possible and get through all the code but um yeah that is how i deal with flexible layout in swift ui and what some of the things that i do as far as um making my designs work sweet thank you for that yeah we had a bunch of people on on um on twitter asking questions around so if you i said make sure to direct them to your talk but hey if there’s anyone here that um that has questions um i didn’t see any coming in the chat so if that’s one place to do it another place is just to mark a yes on your zoom and it will go ahead and unmute you so you can ask your question in person and then obviously any follow-up questions you might have for that thank you phoenix thanks steve i’m just like running through anyone uh anyone got any questions come on i got i’m here ask me anything it doesn’t even have to be related to what i talked about uh you can ask me anything in regards to swift ui if i don’t know it i won’t i will refer to the other three experts in the room yes um match geometry uh you know what i it was one of my favorite things and then it ended up being everyone’s favorite thing and then i everywhere i turn everyone was doing it so it was kind of one of those things where i’m like and no thank you so um i don’t there’s so many tutorials online that you can learn match geometry effect um it’s a great feature um i will teach it in my in my workshop and and i’m sorry in my um online video course but um it’s great if you if if you haven’t heard about it basically it um apple makes it really easy for you to go transition from one view to another so let’s say you’re going from a list view and then you want to go to a detail view which i could have done here so i could have animated the small image to the large image and you basically give it a starting point and ending point um a la it’s very similar to action script 3 and flash yes i used to do that and it would animate through to the last it would do all the animation in between and all you had to do was set those points and it’s the exact same concept but you can do it with a ton of different things and there’s a ton of stuff online so jack yes match geometry effect is great and it does have some headaches using it um i haven’t used it a ton just because um again everyone used it i didn’t even put it in the book because it just didn’t make any sense um literally there’s so much stuff online before it um how do you like handling transitions from one view to another segways or viper um

i’m actually a huge viper fan like i heart viper so much um i liked it in swift i love it in um in this one i haven’t done a viper app yet um even though i do have a personal project and it will probably be structured in viper um so i would say viper you still have navigation views um and nav list and all of that is in swift ui but i find that you can still use it and um that’s probably once i’m able i have some free time i’m gonna play with doing setting up a like a template for viper just so that i can use it and i’ll probably share it with everyone and franklin has his hand raised so i i went ahead and muted him frankly i was going to him next go ahead franklin i don’t know what you’re doing i’m doing my man how are you doing i’m doing good okay now to add only one question but now i understand two questions so the first one is really at environment the horizontal size class could you go back to that code where you where you injected the environment variable and the size classes it should be private no i’m not asking that question now why are you doing the guess for mac os because it doesn’t have size classes right mac os does i honestly i can’t answer that question because i don’t do mac os but if you if there is no mac os you can do an if statement that would uh not include the these lines for mac os but i’m pretty confident they do and then and then the second question is the is with the viper is very applicable to shift ui uh viper is applicable to anything it’s just uh it’s just a structure anything that’s really reactive um all of those work so mvvm viper they all work together um i’m sorry not work together but they all work on that same principle um so yeah you can do it i’ve seen already from like last year people have blog posts on viper and swift ui and honestly i just haven’t had i’ve been working on this book since october of last year so i have not had a chance to mess with it but it is like i like i said i i love the structure of viper i like the um having a temp like not a template but just a set of i like things that i have to do every time it makes that it makes it easy for me when i come back in three months that it’s the same structure i’m i’m not like trying to think what was i thinking at that time or whatever um and a viper has that consistency to me so um yeah there’s stuff out there and i’ll try to find the one one or two articles that i found on vipre that i thought that i thought were really good yeah and craig i could ask you that the macros doesn’t support a horizontal size class or vertical size class natively but you can easily add them um using like defining your own environments and objects in there there you go yeah yeah i haven’t done any mac os stuff but um basically you just cover um anything that’s ipad without any like um whatchamacallit uh where am i multitasking is gonna be the same thing you see on the ipad i mean on the mac um no problem thank you uh do you find anything more difficult to do switch your eye related relative to i can’t i mean they’re off the top of my head no but um honestly i tried so like my friend would like oh i want to put two buttons in a list and i’m like then don’t use a list or don’t use two buttons i’m like just change your thinking sometimes you you like you if you’re trying to copy something you’re doing and it’s not working then go an alternative way with it um try a different ux um i haven’t honestly i haven’t i don’t have anything off the top of my head of like if i feel like something doesn’t work you can always bring in ui kit like um they they have that ability so apple kind of thought of that and was like well if you you don’t like the entire library of swift ui you have ui kit to to drop in and then when they make the update then you just remove that particular class from your project and add the newer version to it um but no i don’t have anything that’s more difficult honestly i find that this is way easier i think interactions i didn’t really cover that but observable objects states and bindings um that takes so much logic from having to deal with the headache of that in your head i mean in your projects and it just makes it super simple like literally um interactions are probably dead simple now once you get the concept of state and binding

you can roll any app out the door in in no time and then you combine that with i don’t mean the pun not intended but if you combine that with combine and like api calls and that kind of thing i’m telling you uh you’ll see you’ll wonder why you’re even doing ui kit when you go back because you have to do so much to get it going and i find that i can prototype an app in literally a couple of days fully function like with fake data um and then i’ve done in class where i’ve used um this app called uh macoon and i’m able to even make my own api and use that and use it with combine and and get it get it rolling too so yeah man there’s you there’s always a way around it if you’re stuck on something hit me up on twitter and i’ll give you a solution and if i can i’ll find one um but i as of right now no i haven’t i have it in i haven’t really found anything i try to use everything in swift ui um at all costs unless i literally can’t and apple’s like yeah you have to use it like i don’t even like using list um from swift ui because list is basically built on top of table view and it comes with a lot of crap where you can just use scroll view and an h stack and you don’t have to deal with the drama so i don’t really use list a ton i just use a scroll view with a h stack or a v stack sorry if that didn’t answer your question but off the top of my head i don’t have anything that’s more difficult in swift ui um that’s honestly i don’t think there is really the code is so much simpler everything is is more streamlined um i mean you literally can do what you can do in a collection view and switch ui in like five minutes or less anyone else questions come on there’s got to be i got one more right here from joshua has stand up yeah so i i’m asked the question about swift ui uh being more difficult to uiket so um i recently kind of messed around with ui and i completely agree i think it’s much easier to set up stuff than using uh state and all that good stuff yes i guess one thing i didn’t have to address in my little example i was using was persistence so like table views they added nsfetch results controller and all that good stuff there’s there’s that is it so that’s still like a nice um plugin there so no they don’t have that and festive results controller but the lazy grids and lazy v-stacks and all of those kind of react the same way i have to look them more into that though um but i mean that isn’t something that would scare me away from using it um nsfetch results controller so uh i know they have stuff plugged in with core data in particular um that’s really easy you can use that but they’re you’re referring to a different one that i’m thinking of or the one from core data no no yeah it was that i i think that was yeah that was my main question like is sweet do i got any nice plug-ins for core data yeah like yes so somebody just posted um fetch result is an equivalent for swift ui and literally you use that with an observable object and it pulls your data and does um all of that for you so i’m actually i wrote core data chapter and i used old school method but my editor was like hey you should use the new stuff which is what he’s posting and i’m literally editing that chapter now and i i just started like learning all of that so what he just posted at fetch results will actually be in the book and i do a core data chapter and a cloud kit chapter um in the book where you work with both so um yes ad fetch result is your equivalent for search ui nice that’s yeah that’s what i was curious about thanks you got it thanks jason cool do you have any more questions for anyone well i hope i didn’t bore you guys to death and i really tried to make sure that that wasn’t a boring 45 minutes so hopefully you guys got out of it and again i will post the um the spit it out the project file that i showed um the end result i will post that in a github repo that you guys can pull down and just kind of browse through it and um check out tri-swift world like i said i have a talk thursday where we do movie ticketing seats and i know that there was one seat available and i may be doing like two more before the end of the year and then that’s it um and then i’m probably gonna stay focused on my stuff outside of tri-swift but um there’s tons

and tons of like really good workshops and things that people are doing um between donnie doing classes um daniel steinberg doing classes um pretty much the people you would expect they’re all every week somebody’s doing something and and it’s 50 bucks um and if you have a problem with that just reach out to natasha and she can help you yeah awesome and then we also do have um the book giveaway we’re doing today so lyra i think you have our winners hi um so i just picked two random attendees to take home the craig’s book with you and those are craig stroman and jose vazquez so if you guys would please send me your email privately we’ll get those to you jose awesome and anyone that gets a free book they’re not allowed to give one star reviews i’m just kidding i appreciate you know you guys you know raffling it off and and purchasing and i’m not a big person on reviews so um i don’t really look at them good or bad just because i really want to live through the day and people are just mean in general so i just stay off of um off of them and i don’t want to get my head blown up either so i just don’t look at good reviews either but um you guys uh i really do appreciate you guys having me and um you know hopefully you guys like the book and it does what you’re you’re looking to do it’s going to be probably different than most of the books you’ve purchased because it’s a little design more design heavy than most but i feel like that’s i enjoy doing design stuff and if it looks good then i want to do it i really can’t stand the little ugly little apps that look like you know apple’s default stuff so yeah yeah we’re obviously you know happy to have you on here as well it’s a different great presentation we had probably one of the biggest showings that we’ve had at dc ios uh since we started here um and i just wanted to share the book here with with everyone if you didn’t if you didn’t win it today it is available on amazon um i know craig you had a discount you said for folks here yes so um uh bitly bit bit dot lee swift ui projects that’s the link it’s going to take you to amazon and then the code is 25 swift ui um that’s on the actual book not the ebook so if you’re in us if you’re in a country that doesn’t do shipping there then you’ll have to go through um pac’s website and to get the book book or the ebook um but the discount is for the actual book and that staircase is going away god it’s ugly um and i also want to add that this presentation as well will be available on our uh deaf community youtube channel uh subscribe to it we’re always posting every talk we get on there and not just for uh dc ios but for the dc flutter meetups so dc android meetups and any other meetups that might fall under uh the dc deaf community we also do have our website up the uh and that is a place we can keep update with what uh different meetups are coming out um sign up for our newsletter if you if you can and then um volunteer to speak is button up here on the top to volunteer to speak we’re definitely looking for a speaker um for for uh next month um as as craig could could vouch i i i hound people to try and that’s the best um so i’ll post the link in there as well and yes um to answer just went away the scott that is a virtual conference so all the classes are online 10 people per class all done through zoom so take the chance join uh if you’re not on the newsletter she does almost every week now she’s every other week it’s somebody it’s somebody different or something different so um and some of it’s you ai and some of it’s like just other things it’s not all like switch ui but i would say majority of the talks are related to what was in ios 14 yep i just dropped the link there in the chat as well i’ve actually attended one previously and it’s another plug for ios dev cam some speakers who present a tri-swift world you may or may not see at ios dev cam there you go again thank you guys yeah thank you so much as well um and we’re looking forward to hearing from you uh your next presentation at uh iowa dc happening that’s the 30th i believe for that one so yes um for that too thanks so much i don’t know what i’m talking about yet so i got to start working on that doc

awesome well thanks again uh thank you everyone else on a call for joining us um like i said we’ll try to be here again next second tuesday next month which i believe is november 10th if my mind is around anyway double check that yeah that’ll be november 10 yes cool all right thank you everyone thank you everyone