Tiny Constraints | Build Instagram Profile (part 1) | Swift 5, iOS 12, Xcode 10

Just another WordPress site

Tiny Constraints | Build Instagram Profile (part 1) | Swift 5, iOS 12, Xcode 10

Hi, Alex here from rebeloper.com and welcome back to the channel and welcome back to another great episode of tiny constraints Auto Layout made easy in Swift 5. Now in today’s episode I am going to start working on a sample project and show you how easy it is to work with tiny constraints. So without further ado let’s jump right into it Okay! If you are new to this channel or this video go ahead and take a look at the previous episodes and it’s a whole playlist on tiny constraints. You can find the link down below for that and you can learn how to use tiny constraints and how you can make your auto layout life much much easier Now today we are going to start building out my Instagram profile page and not of the functionality we work, we are just going to layout some views and I have created here and there we go let me just move this to the left so you can see and this is what we are going to build out a navigation bar and all of these views Well this could be buttons but we are not going to use buttons or maybe we will we will see that but none of the functionality will work. I’m just going to present you how easy it is to lay out these views with the help of tiny constraints and yep that is that this is what we are going to build out and you can see all of this if you just click the link down below for the resources and just download this and build Instagram profile resources folder and you will have all of the needed resources for this tutorial and I believe this will be quite a long maybe one hour so I will just chunk it over a few videos, okay. Now let us just start building. So we are going to start by creating a brand new Xcode project So there we go and I will use our single view application and if you don’t know what this means go ahead again, click the link down below it will have that on how to make your own custom Xcode template well basically this removes the main dot storyboard. So let’s click on next here and I will just call this tiny insta, okay. And I will embed it in a navigation controller and root view controller will be the name of the class So let’s click on next there and let’s go here and let’s create a new folder called code. Create it and I will create a git repository on my Mac because I will upload this to our github profile so you may take a look at it later on, okay So yep that is that let’s close this because we want to import of course tiny constraints. So I’m just going to close this and open up terminal and there we go and just type in CD and the space and drag and drop your root folder of your project. Hit return there, type in pod install. There we go and that will create a pod file for us Rather yet not pod install, sorry pod init Okay, we are going to install with pod install but for now we are just creating our pod file. There we go. Let’s drag and drop this to our xcode icon and delete and that commented out section and set this to iOS 12 and let’s add in here pod tiny constraints and let’s just close this and go back to pod install and again this is version 4.0.0 minor changes might occur in the future but just keep in mind the this is our current version that we are having this example. Okay and finally let’s open up our a workspace, there we go Let’s resize this and start working on it. Well first of all let’s just add our resources. There we go. Let’s go back to our resources and I will just copy and paste all of this. Okay and drag and drop it there and there we go we have our place this. Oh rather yet let’s just remove this doesn’t make sense to

add that in there and yep that’s that Okay! Now let’s just talk about how we are going to build this out. So let’s go to our root view controller and instead of UIKit let’s import tiny constraints you could add a new import too if you wanted to but yeah that is what we are going to do now. So first of all we are going to set up our views So set up views. So let’s create this function. So there we go. Fileprivate func setupViews and inside there we are going to add views and we are going to constrain views. There we go. So let’s create both of these. Fileprivate func. There we go And for the constraint views again fileprivate func and I just copy this out and paste it in there. Awesome! Now we will need a navigation bar setup so set up navigation is what we want to have here, navigation and again this will be fileprivate func, okay. And basically that is it. We want to have some marks here So mark and that is maybe some properties maybe not but we will see and let me just copy this out. So you can make this a little bit faster we will have here some views and this is our life cycle Okay and this is our setup navigation and setup views And now you can easily navigate all of these, okay. So that is for a preliminary setup. Now let us just talk about how we are going to build all of this out. So let’s go to our skitch file here and yeah let’s just start working First of all let’s add this title here So for that, that is pretty simple we are going to set up our navigation First of all let’s do our add views or rather yet let’s add in here view dot background color equals dot white, okay Because the default background color of our view controller is a black. So let’s just select our iPhoneXR simulator and build and run and see how all of this basically works. We should have a navigation bar and yeah it’s just complaining but it will find it soon enough, okay. And there we go. That is basically it a navigation bar. So let’s add under setup navigation a title So title and that should be rebeloper, okay And let’s build and run again. Again I’m not going to add in here this arrow because this is basically a button but yeah it’s not the purpose of this tutorial, okay. And let’s see now what we got so. There we go rebeloper., pretty awesome. Now it’s time to add these two navigation bar button items. So let’s create them. So the first one and I will add these under views and I will have this as a lazy variable. So lazy var and timeBarButtomItem and this will be a UI bar button item and it will be with an image and we will choose this one, okay. And the image

and let me just remove that hit command shift M to bring up our media and I will choose, le me just see our navigation bar bottom item time, okay and let’s just move a that there and with rendering mode and yeah we could have here dot always original or always tempered It doesn’t really matter. I will use template because that is what we, or rather yet let’s just use original because I already have all of this set up as black, okay. So bar buttons style I believe plain would be okay and target is self and action hash selector and we will have an objective-c method and I like to have this time bar button item tapped. So that is how I name my functions So let’s copy this out and just scroll all the way down and here let’s have a mark and let’s see handlers Okay, let’s create our Objective C So that Objective C file private function here There we go and that is how we will handle And let’s print out here time bar button tapped, okay. Let’s see what do we have here. Oh yeah we need to initialize this like so time button tab and now it’s time to add this bar button to our navigation. So navigation self dot navigation item and set left bar button item I will add it here our time bar bottom item animated false, okay Let’s hit command R and see if this really worked. And we do have, ohh yep we need to have this yeah. I will just simply have this Let’s just double tap here and select our image maybe that was the issue. Let’s build and run again yeah with this image selection is really hard to do Yeah that was the issue if you encounter that these images don’t really show up then go ahead and take care of that. So let’s add our hamburger menu bar button item next. Just simply copy and paste some code here. So menu bar buttom, let’s select another one here this one, always original. Menu bar button item tapped for the selector and let’s just scroll all the way down. Let me just copy this out and paste that in there and type in menu and change the print statement too And finally let’s add this to our right bar button navigation item. There we go. Set right bar button and the one that we want to add is our menu bar button item and that should be okay. So let’s build and run and see how this looks, okay Let’s just tap on it as you can see here we have our menu bar bottom item tab and let’s just tap on the time bar button item tap, okay. And yeah we haven’t really covered tiny constraints just now but yeah that’s the way how you can do that So let’s do tiny constraints just now and we are going to have our plan So let me just remove this and just a little bit of talk here about how we are going to add this. So we are going to

use stacks and this will be our first element in the stack and the next one let me just remove this. The next one will be a line or rather yet let’s just use this line as a divider and we will have this as the background image colored one and this will be another stack element and again let’s just remove this and this one another and here under oh, sorry about that. The video creator, another one and this bio another one and the IGTV another one and the same goes for the email and these navigation like these are I believe they are setting the layout of our posts and finally we are going to have these as a post so we are going to go all the way down. We are not going to cover the tap bar items again. So yeah that is how we are going to make all of this So first of all let’s have a real container view here that spans all the way from top to bottom left to right in our view and that will have a grayish background. So let’s name this container view. Let’s go all the way up here and yeah we will do this with lazy variable and container view. That is the whole container view and it will be a simple UI view and let’s see here. Let view equals UI view. View dot background color equals dot let’s say light gray, light gray that should do it and let’s return our view and let’s initialize it, okay. Now that is for our view. What we need to do next is add it to our views hierarchy. So view dot add sub view and this is our container view and now we will need to constrain it and that is pretty straightforward Container view edges to super view yep and that is basically it. So we want to edge this to super view and let’s build and run and see if we do get that a greyish background. There we go Pretty awesome isn’t it and with just a few lines of code. So what is up next let’s see here. So I want to create, let’s add in some views and the first one, well container views is this lets see stats view. Well if you are not on a business profile you won’t see this but I will see this because I have changed too so I will have this as a business or rather yet stats, business stats container view Let’s just do that and let’s see here What do we have here. I will just copy and I will have a lot of copy and pasting because I want to save on time here. So this will be our and I will have this as a red okay and let’s do another one and that will be our let’s say a profile. So we will have this as our profile container view or rather yet let’s have this one as our profile stats That will be awesome. Profile stats container view, okay So again and let’s copy this out and paste it in there and profile stats container view and I will have this as green background and that is it for this start. So let’s add these So view, add sub view and business stats container view. View, add sub view. Profile

stats container view. Now we want to have this as a stack. So what we are going to do here is on the container view So container view and we are going to use this stack and we are going to add our business stats container view, oh again this will need to be an array So let’s add those parentheses there and our profile stats container view and the axis will be a vertical one and we are not going to use a width or height here because we are going to add that in just a moment and the spacing will be just For now let’s add in here 10 so we can see but we will change that later on So what else do we need to add it here Well we want to have our heights added correctly So before we stack these views we want to have our business container view height to be let’s see, here we go our height let’s say 100 or under yet let’s just have here 15. I believe that should be enough and our profile stats container view height should be let’s see 150 maybe. Hands off if you just hit command R and build run and test it out if all of this works for you. So yeah we have our green so our business stats container view, what was the, yeah it was the profile container view and I believe we should fix this by having a container view height too So these edges it is adding to super view but we really need to have a height that and let’s just fix this real quick by adding a uiview here. So let’s see if that fixes that and we are going to have a lot of building and running here So yeah we do have our profile stats container view. What’s wrong here So let’s start changing some stuff so we want to edge to super view but we want to have a height so I’m just going to use excluding button and no insets but using safe area, okay. Let’s use this to true and let’s have a container view height and I will have this as 1000 It doesn’t really matter because here we have our UI view. So let’s build and run and see how this works. Should get our business that’s view there, yeah. That is correct and as you can see we have our spacing set to 10 and I will just remove this to be 1 and let’s compare this to the original one now. And yeah we can’t really see this but if we set these to white let me just go back and set this to white and white again we should be able to see that a grayish line that we’ll need. There we go Yeah, pretty awesome. Let’s take a look at what we have here. Let’s remove this so we can see a little bit better and yeah that is basically it we have our line there maybe we should make it a little thinner too and we will do that by having 0.5 as the spacing and let’s see if we do have our alignment here. Yeah, that is, that is basically it it looks really really nice Okay and yeah I believe that this should be all the way down till our email. So yeah we need to add that. So this will be like something like let’s say 400 Okay in the profile stats from now on means all of this, okay. That is the profile stats, great. So now let’s build and run one last time and see how this works and we will continue in the next

video. Yeah that is pretty awesome, okay I hope you enjoyed this video of setting up and having some views added there and if you did go ahead and give a thumbs up, subscribe to the channel and hit that notification bell and as usual I will continue this episode in the next video and I will see you in the next one