Swift: Auto Layout Content Hugging Priority (Demystifying iOS) – 2021

this video is sponsored by stream build high quality flexible chat experiences in your ios app with the stream sdk get started for free with the link in the description down below in today's video we're going to be learning about a common topic that a lot of folks confuse and that is content hugging priorities in auto layout so instead of trying to explain what the heck that actually is we're just gonna dive right into it drop a like down below hit subscribe if you're new let's open up xcode and create a new project we're gonna stick with the app template under ios we wanna make sure our project is set to swift and we're gonna use storyboard since this topic pertains to ui kits and auto layouts i'm going to go ahead and call our project here content hugging we'll go ahead and continue save the project wherever you'd like i'll toss it onto my desktop and first things first as soon as xcode decides to load i'm going to close this right panel we're going to expand our window also choose a simulator from our list up here maybe we'll go with the 12 pro max i'll go ahead and give this a run and we're going to jump into our view controller now i'm going to explain the basics of this and then we're just going to do an example since it's a lot easier to understand once you end up seeing it the basic concept of content hugging which is confused oftentimes is which constraint gets priority over another constraint so what i mean by that is imagine on the simulator on the right hand side here you have a label which takes up the top part of the screen and then then there's another one right below it which is from the bottom of the one above it all the way to the bottom how does auto layout figure out which label should be prioritized and get stretched to fill up the remainder of the screen the first thing you'll understand is there's something called intrinsic size and that's basically going to have the label be at least as tall as it needs to be to fill up its text but then there's going to be a bunch of remainder space so let's go ahead and do an example since i think it's a lot easier to see and visualize instead of talk about and you can of course do this through storyboard as well but we're going to do it programmatically since it's kind of more common and it helps with understanding much more so we're going to create two labels here programmatically i'm going to create them in this anonymous closure pattern ui label we're going to do return label i'm going to do some quick properties on here the first one is going to simply be uh hello and we're just going to copy and paste hello a couple times we'll maybe we'll do a couple times like that i'm also going to go ahead and say number of lines is going to be zero therefore we're going to get line wrap we'll also go ahead and increment the font size here we're going to use a system font size of perhaps 50 nice and large and lastly we're gonna just center the text alignment i'm gonna go ahead and copy and paste this so we have a second label we'll make this label two and this one is simply going to be world therefore we're gonna get hello world all right let me also set a background color today so we can visualize more accurately where the frame of a particular label starts and where the other one ends so we'll make that one system green i'll make this one system pink and let's start adding our labels so first things first just like any sub view you want to add it as a member of the hierarchy so we're gonna say label one and then we're gonna say label two now before i actually do label two let me go ahead and just add some constraints i'm assuming that folks watching have a basic concept and grasp of constraints so we're gonna say we want to activate constrain so we're gonna pass in an array of constraints that's not constrained let me spell that correctly ns constraints and we're going to once again say activate i keep spelling this incorrectly let's try that third time's the charm ns layout constraint that's what i'm looking for and we're going to say it activates now one thing that i forgot to do which you don't want to forget to do is you're going to say translates into auto resizing mask is going to be false for both of our labels that way it will respect the constraint and let's constrain our first label so we're going to give it four constraints we're going to say label ones top anchor is going to be a constraint and it's going to be equal to something and this is going to be view dot safe area layout guide dot top anchor just like that let me close up this left panel since we don't really need it and i can just copy and paste this a total of three more times to get our uh label situated so this bottom one is going to be bottom anchor then there's going to be view dots we're going to say leading and trailing to get the left and the right just don't forget to update them here as well so leading trailing and bottom we're gonna go ahead and hit command r and we should see i believe our green label taking over the entire screen we see that it's respecting the safe areas and this is what we expect to see now let me do something a little different now let's go ahead and add the second one so we're going to add the second label and i'm just going to copy and paste all these constraints and we're going to tweak one thing in particular the thing that we're going to tweak after i copy and paste this guy here is we want to first of all change all of these to be labeled two and we fix that alignment with the control i so label two label two label two and label two now we want label two to be from the bottom to the bottom of the screen which makes sense and we're going to get rid of the top anchor for label 2 and we're going to say label 1's bottom is essentially going to be the top of label 2. so we're going to say the bottom of the green label should touch should be basically pinned to the top of label two and if you go ahead and give this a run here in lies uh the problem you're gonna see that everything will lay out appropriately but one really interesting thing to note how come the pink label was chosen as the label to get stretched out what if we wanted the top green label to get stretched out well the first thing you'll be thinking is well it's kind of strange right because the bottom label has a much smaller text which drives its intrinsic size in other words you don't need the bottom one to be as tall to account for its vertical text space however the one up above while it doesn't truncate the text it definitely collapses the height only to fit the allotted text that we have assigned and this is where content hugging priority comes into play we can tell auto layout the layout engine that's making these decisions which thing has a higher priority and through that we can actually control which one will get collapsed and which one will get expanded so if you're ever building out a user interface and your designer gives you a spec and they say that this top one should take up more of the screen you want to use content hugging priority now just so we can visualize this a little better i'm going to change the background color of this to be like purple so it's a little brighter and right after we've assigned these constraints we're going to use content hugging priority so we're gonna assign on label one now we're gonna say label one sets content hugging priority and we're gonna say the priority of this is default high in the vertical access position so if you go ahead and give that a run now what you'll see is things haven't changed okay what gives let's go ahead and make this low for label one let me double check what label one is label one is with all this hello stuff let's try that one more time and we should see that label one now expands and the reason it's not expanding is something must be screwed up here so we gotta figure out what that is let me go ahead and tweak this to label two we're gonna make label two low and i believe we also need to make the other one higher so we're gonna say label two is low we'll copy and paste this and i'm gonna make this one here we're gonna make this high go ahead and give that a run and if it still doesn't cooperate and expand the top one something is uh going on a little strange here so we need to figure it out so let's take a look at our constraints we're going to do some debugging live and in action so here we're saying the top is fine the left and right the trailing and leading are kind of irrelevant so instead of doing label two or label ones bottom we're gonna say label two's top anchor is going to be equal to label one's bottom anchor if you go ahead and give that a run let's see if that makes a difference all right still no difference so something is really funky that's going on here so we're setting a hugging priority we've got default high let me go ahead and switch these these are always extremely easy to screw up and confuse you can see clearly i do it myself ah there we go okay so here what we have done let's read through the labels to make sure they're correct so the label one object is all the hellos little two is world what we're saying is label one's constraints so all the hellos uh the top left and right are accounted for and the bottom that is basically gonna calculate the implicit height is going to be determined by label 2's top anchor so label 2 this bottom pink red looking one its top is going to be the bottom of the one above it this purple one now the reason the purple one got expanded versus the other one is we're saying that the label 2 content hugging priority the compression in other words not to be confused with compression priority is higher than the label one's content hogging priority and what you'll notice is if i comment these out and give this a run we should see the inverse effect so now we can see that the hugging priority to collapse the vertical height and the way i think about this is i'm kind of strange but when you think about someone giving you a hug like hugging you can see that this purple one is kind of collapsed and pinched together vertically it's being hugged hence the term hugging so the hugging priority in the auto layout calculation without us overriding it gives the purple one a higher priority versus this bottom red pink one and what we're doing here in our call is we're explicitly changing it we're saying no no no make the hugging priority of label 2 aka this pink red one higher than the purple one and what that'll do is that's going to collapse this it's going to hug the pink area such that it only accounts for room in which it needs to render its world's text and it'll make this one taller so that is constant hugging priority in a nutshell it's a bit of a strange concept given the name confuses people but for those of you who have used this in storyboard you'll be very familiar with this this is extremely important once you start dealing with a lot of nested sub views you can imagine if i have a label three then it becomes even trickier okay which one is higher than the other do we collapse one or two and auto layout makes these executive style decisions under the hood and sometimes we want to override it so this is how you would override it now the one last thing i'm going to mention before wrapping it up here this is not to be confused with proportional layouts so you can add constraints let's say you want both of these labels to be 50 of their container you don't want to use content hugging priority to try to get these two purple and pink labels to be 50 of the vertical heights for that you're going to use constraint with a multiplier of 0.5 which is going to get to a 50 percent height content hugging priority is simply to tell auto layout how to prioritize which thing gets collapsed and which thing gets expanded the supplies both vertically and horizontally if i had these labels next to each other we would just change the axis here to horizontal and that's basically all i've got for you guys let me know in the comments down below what you guys think have you used constant hugging priority before there's something called constant compression priority as well super confusing names in my opinion i'll also screw them up very often as you just saw in this video leave any questions you got down below drop a like if you haven't done so already hit subscribe if you're into ios i want to stick around thanks again for watching i'll catch y'all on the next one [Music]

Channel: iOS Academy

Views: 2,230

Keywords: swift, swift auto layout, swift content hugging priority, swift 5, swift tutorial, swift ios, swift layout, swift 2021, swift 5 tutorial, how to make an app, xcode 13, swift ios tutorial, swift for beginners, swift basics, swift fundamentals, swift 5 2021, 2021 swift tutorial, swift auto layout beginner, auto layout basics, swift uikit tutorial, auto layout content hugging, content hugging priority, content compression, ios app, xcode, swift beginners, swift fundamental

Id: CEYPA4WuVXg

Length: 12min 32sec (752 seconds)

Published: Fri Oct 15 2021