Advanced Swift: Making Programmatic Auto Layout Easy through Extensions

hey what is going on everyone and welcome back to the channel hope you are doing well today and I hope your slip development skills are getting better with each day that you practice now in today's video I wanted to go over a couple of the more advanced techniques that I utilize to make my programming job a lot easier so as a lot of you are probably aware when we are trying to lay out our views programmatically things can become a little bit tedious so today's video will see how we can solve that problem really really easily but before we get into that let me give you a demo as to the application we're gonna be building out for today's video and so here we have in the iPhone 10 simulator the profile screen that belongs to the tinder application that I may or may not use every other day so we have this application with a somewhat complicated layout on the top portion of this screen here and at the very top left we have a bigger image that is kind of the size of twice of these thumbnails on the right side and then we have this bottom row at the very very bottom here with these three images which if you think about it it's not too difficult to build out but as you can imagine typing out all the auto layout constraint code can typically become a little bit tedious and frustrating as a programmer to actually do so I'm gonna show you how to create some expansions just to make our jobs go by a lot faster so let's dive into Xcode and see exactly how we can do this alright so here we are inside of Xcode I have a brand new a single view application created called easy anchors LBT a we have a view controller class that does absolutely nothing instead of the viewed at load if you run this bit of code you get nothing but a white screen inside of your simulator alright so that's pretty much the basic setup that we have here and the way I want to actually illustrate how to create these advanced extensions for Auto layout is to actually create some kind of view instead of view too low to spam the entire view of our simulator so the way I'm going to do that is to first create some kind of read view and let's just instantiate it with the UI view constructor of empty and let's see first property to set is the background color equals to Dodge red and then the next thing you have to do is to actually add this view into your view controller with ads sub view and let's just add in this red view now obviously because we haven't specified a frame or the auto layout constraints when you run this bit of code you're not gonna see your red view anywhere so why don't we go ahead and use some auto layout and here's where I'm going to go through the tedious process of setting up all of our constraints as well as the property of red view translates Auto resizing mask into constraints we actually have to set this property to false every time Anna as a lot of you are probably aware this enables auto layout and now I want to fill up the entire simulator with my red view and I'm going to use the top anchor which is up there the leading which is the left and then the trailing anchor which is the right and then the bottom which is obviously at the bottom so let's do the red view first or the top anchor first rather with a top anchor then the strength equal to some kind of anchor this is going to use the views top anchor like that and then finally a red view dot leading anchor constraint and you'll see that this is quite tedious and repetitive after a while but nonetheless we just have to do it and trailing anchor constraint to the that's the views trailing anchor like that and then next we say rid view dot bottom anchor constrained to yet again the views and bottom anchor like that alright so you think you're kind of dead right but because we are inside of code we have to activate these constraints with is active equals to true and I'm just going to copy and paste that that that you can use an S layout activate constraints if you want it to but that's how I'm going to set up my views instead of viewed at load and the moment I run this application you should be able to see the read view completely fill up the entire screen all right so that's the basic approach that we want to use to set up our views in Auto layout and I would like to make this entire call using just one function alright so how do I collapse this entire bit of code well I'm going to create an extension on UI view which is what red view is an instance of so let's say extension on UI view down here and let's create this extension function or method wherever you want to call it and let's name it anchored like that so whenever you have an extension method on a class your instances let's say red view where are we read if you we can call anchor which is this bottom method over there so the question now is of what exactly do wants to deal with this anchor method well I'm going to include all these calls in this simple method over here and let's see how do we want to do this first well why don't we automatically call translates Auto resizing mass into constraints equals to false every time we call this anchor method all right so now I want to actually punch in these parameters as the first four parameters of this anchored method so what I mean is I want to set something like the top as my NS laid out axis see why X is anchored and then I'll put you leading as an S layout x-axis anchor and then the bottom which is going to be the NS layout y axis anchor and the trailing which is the right anchor to be an S layout x-axis like that alright so with those four parameters what we can do is every time we call this method we'll just anchor it this entire views left top or trailing at bottom to these anchors as the parameters so in other words I'll say top anchor and then I will constrain it just like what we did previously with the top like that and we'll activate it with Eagles to true and then we just go through this dance of constraining all these anchors together and with leading like that I believe this is going to have to be called leading anchor instead is active Eagles to true finally if we say bottom anchor dot you bottom anchor at constraint bottom from the forever list above active vehicles to true and then trailing anchor constraint let's see equal to the trailing anchor that is this guy over here and if I don't Lee you specify that last property as active equals to true all right so with all that kind of established inside of my method right there I can now eliminate all of these calls to just be commented out replace this anchor method call like that with those four anchors that belong to the views top leading trailing and bottom so let's just say we want to use the safe area guide instead so safe area layout guide on top anchor let's use the views of leading views same area guide bottle instead view dot I don't know if trailing anchor and try to run this code now and you'll see that the red view should fill up this entire thing of our application but instead of filling up the top and bottom we've used the safe area layout guide so that's kind of where the edges are for the top and then the bottom over there okay so now that you can kind of see how we reduce a lot of code by using this one anchor call let's try to establish some way to introduce some padding for our read view let's say on the left side and also on the right side and the way I'm going to do that is to modify my anchor method inside of the extension by including a final parameter at the very end and I'm going to see call this padding like that and I will allow this guy to be of type UI edge in sets and by default I'm just going to give it a value dot zero which means that the top left right and bottom are all going to be the values of zero okay so the way I'm going to use this padding variable with this parameter is to include it inside this constraint call and basically all these anchor calls they come with a another method called using this constant guy over there so let's just type it out with constant of padding on top like that and then for leading you pretty much do the same thing with padding dot left and the tricky part about the bottom and trailing is that you have to use the negative value so what I mean is constant like so padding dot bottom you want to make sure you hit the negative sign which is showing up there and finally for the trailing you do the same thing I've constant of negative padding dot right like that alright so let's get rid of the placeholder method color right there and because we've defaulted this padding parameter to be done zero you don't actually have to fix this with anything but if you wanted to include left of let's say 60 and right of 16 all you have to do is punch in the last parameter of padding like that and say dot e knit with the top of zero left of 16 bottom of zero and the right of 16 so running this you'll introduce some padding for the views that you are anchoring inside of your view controller all right so that's exactly what we have if you wanted to add top and bottom padding you can just fill in these values here and there as well okay so good stuff and now what I really want to do is to actually address the implementation of this UI and I want to anchor this view that's all the way on the top right somehow and let's just say for this example sake that the width and height of this view is 100 by 100 well I'm going to actually modify this and green method again to include another parameter at the very end called the size and this will be of type 2 CG size like that and I will have a default value of dot 0 as well for this size parameter and this means that your size has a width and height 0 as default alright so how am I going to use this size parameter inside of this method well the way I'm going to do that is to check if size dot width equals equals C not equal 0 that means I'm actually passing something as this size parameter I'm going to say with a guru dot constraint equal to some kind of constant and this constant is going to be the signs dot with like that and remember you always have to activate your constraints with the is active property and just like the size we will check the height if it's not equal to 0 we'll say hi to anchor dot constraint equal to the size dot height and is active equals to true like that okay so you can build your project you can render it again you'll get your review with the padding like what we had before and now what you have to do is for this anchor method you can say science at the very end and specify dot in it for your CG size class and you can give it 100 and 100 and attempt to run this bit of code but because your constraints are kind of contradicting each other you will get this huge warning at the bottom telling you that the height of 100 is conflicting with the entire height of 812 that you specified with the top C the top and the bottom which is stretching all the way up and down like that and then the height of 100 pretty much is conflicting with it so that's the problem that we actually have to and the way that you do this is to make your anchors that you pass into this huge anchor method you want to actually make them optional so I'm going to specify the top the leading as optional like that the bottom optional Andy trailing as optional as well so the one thing that's kind of annoying when you do this is that you actually have to unwrap your top anchor with either the force unwrapped like that but that's not really that safe so I'm going to say if flat top equals top and let's just cut and paste that in there so we're basically checking if all these parameters that you're passing in is actually something and then we will actually perform the anchoring so if is that we just cut that in there and why don't I do this two more times if let bottom equals bottom and let's say if let trailing equals trailing and then we will move this inside of that method there move this inside of the last one there and we should be okay all right so the question is what does this allow us to do well I won't like to place my view in the top right corner over there right now and the way I will do that is to comment that and while I'm here I'll just blow away all these commented out code or lines look good now let's say a read view anchor and I'll use the bottom one that includes the size and so because these parameters are now optional I don't have to pass in anything if I don't want to so for the top I will use the view save your guide dot top the leading because that's the left I'll use nil bottom of this nil as well trailing will be the views and let's just use the safe area guide dot trailing anchored and the padding we will say dot and knits the top again we'll use zero or whatever your one left bottom is zero the right I'll use a padding of or 16 doesn't really matter let's use an it with an height of 100 and 100 so this is going to place my red view so that the top of it is anchored to the right side which is or the top is at the top the trailing is on the trailing of the view which is the right side of the view and then the width and height is 100 like that okay so good job I hope you're still with me but you know this anchoring method allows us to make our auto layout tasks much much easier without having to fiddle around with too much of the constraints that we type out manually and most of that you can mess up because it's really easy to you know not activate something or forget a call all right so where do we want to go from here well why don't I show you how to place this view in the middle right there right below the red view and I'm going to construct a blue view call it blue or UI view blue view background color equals dot blue all right so you actually have to add all of these views like that before you perform the auto layout constraint code and you can do this or you can use a red of you you know comma blue view use a for each loop instead which is what I prefer to use and we use view to add sub view of dollar sign zero which represents one of your items instead of your array so that means we can eliminate that and that you know makes your code a lot cleaner in the long run and finally let's use the blue view and anchor it inside of our abuse about and again I want to anchor it right there underneath the top right view so let's use this call again and the top anchor is going to be the bottom of that so I will say red view dot bottom anchor the leading I'm going to use nil the bottom is going to be nil the trailing is going to be the red visas trailing so pretty much the red views trailing on the right side so let's say a red vue d'en trailing and the padding I am going to use either dot zero let's see what that will give us and this you need to initialize with let's say 100 and 100 yet again so obviously there are some drawbacks to this approach and I'll address them as we go along here and basically here is what we have if we wanted to punch in some space above the blue we can use the padding of dot and knit and the top let's say 12 the rest of these values we'll just use the value of zero and that will introduce a little bit of gap and some breathing room between our elements instead of our Dubai which is always nice to have okay so the last final view that I would like to draw out is this larger view on the left so this top left image and I'm going to use a green view this time so red blue and green one of my favorite colors of the spectrum let's see green view done background color echos dotted green and the nice thing about this array for each loop is that you can just include your view directly in your array and you know this loop takes care of the sub view adding it for you so really really easy to do now the green view is going to be on the left side like that so let me try to anchor this with our anchor call and I don't think I need the size so I'm just going to make this call over here so anchor top is going to be the views top or even let's see a red view dot top anchor leading is views a safe area guy leading anchor the bottom is the bottom of this view so what I'm going to use is the blue views bottom so blue view dot bottom anchor the trailing so the trailing is actually the right anchor and the trailing is going to be over there so this we will try to use red view leading anchored so the trailing anchor is going to be right there it's going to be trailed at the Reds leading view which is the left of the red view so that's kind of how you can think of it finally I think I need a padding value of that in it let's see where are you there you are right there let's see zero for the top left I'm going to use twelve bottom zero and right of twelve so plate my green view will be placed to the left of the red of the blue and have the correct width and height and that's pretty much how you would construct your auto layout for this type of UI right there and so let me address some of the drawbacks to this approach right now and one of the kind of major issues with your layout is that let's say you want to increase your read views width or height by some kind of value right you want the layout to automatically readjust itself so that the green view isn't too big or large and the blue view should match the size of the red view so the way you would do this is to actually configure your red views that you don't hard-code the height value to 100 so I'm going to change the height to zero and go back to the good old constraint code let's see height thank you constraint and I'll constrain it equal to some kind of dimension now you can use either this multiplier column which is totally valid or just use this equal to call so this is going to say red viewed with anchor and make sure to activate your constraints like that and so again if you let's say modify the width 250 now the red view is going to have its height change to 50 as well because that's the way the constraints are currently working and you can kind of see that your view seems to be adjusting itself but not all that perfectly so how do you go about fixing this well the blue view actually needs to be configured so that its width and height it's also matching exactly what the red view is so let's change the blue views the size parameters over here to actually not use any constant width and height anchors at all so let's remove that so I'm going to say blue view dot with a cur constraint to some kind of dimension and let's use red views with anchor like that is active equals to true and for this last the height anchor you can constrain it to a couple of different things for it to work I'm going to say blue views height a career and say is active equals to true and writing this code again a lot or most of the views inside UI are is pretty much now dependent on the 50 value of this whiffed guy so one thing that's not working is this really needs to be constrained to the I like that and let me change this to 1:25 instead so 125 and now because I've changed the width of the red view everything's going to be up here a lot larger so the width and height of the blue view is just matching exactly what does the red view okay so hopefully you guys are still with me the last thing I want to talk about is that you can actually be very creative with the way you write your extensions so that you actually compose them together so what I mean is that let's say I want you to actually eliminate this call right here of width and height and actually all these is active calls I can include another extension methods down here let's just say function anchored and because the width and height really belongs to a size I'm going to anchor size to some kind of view like that and let's just make these two calls in here instead so with you know with anchor dot constraint constraint equal to view dot with anchor I believe that's what we need to do I have to be that guy height anchor that constraint equal to see view height anchor is active equals to true and now we can just call it anchored size on blue view so what I mean is view or a blue view anchors size to some kind of view and I want to anchor the size to exactly the red view like that and that means I can remove those two method calls and just combine that into one very easy to make method call called anchor size and that's exactly what we have of there if you wanted to get very very creative with your extensions down below let's say I want to very easily fill up the entire screen with some kind of method so you know typically I might want to create something called feel super view like that and on a view you have this property called super view which is kind of the parent view that contains it so you can make this call and basically what you want to do is to say let's see anchor let's see anchor this guy right here you can just stay super view dot top anchor super view let's see super viewed leading super view dot bottom anchor and then super view dot trailing and here like that so this is going to fill up the entire screen let me try to illustrate that going down here and say let's see let's add or no purple view I think that's a color purple of y equals UI view and purple view background color color equals dot purple and view dat's a view of purple view and you just want to call purple viewed fill super view you will fill the entire view controllers view with this purple view hopefully it should work and you see that the purple view magically appears like that okay so that's gonna wrap it up for today's video on how to write out these helper and convenience methods to make our lives a lot easier in terms of dealing with Auto layout using the programmatic approach now there are a couple of other things that I wanted to talk about in today's video but I think I'll save that for next time and remember if you want to down the source code for today's project you can find a link in the description below if you enjoyed today's video make sure to give it a thumbs up and also consider subscribing to this channel that's gonna be it for me today I'll see you in the next video bye bye

Channel: Lets Build That App

Views: 47,494

Keywords: ios, swift, development, tutorial, learn, xcode, programming, code, auto layout, anchors, constraints

Id: iqpAP7s3b-8

Length: 25min 38sec (1538 seconds)

Published: Tue Jan 30 2018