Intro to UIKit and UIViews | iOS and Swift

there are two main ways of creating a user interface in my OSF there's the traditional UI kit or there's the new swift UI swift UI is the cool new way of creating user interfaces using Swift in an iOS app and I'm gonna make videos on swift UI in the future but right now it's still a little bit young and a little bit limited to be using just Swift UI so to be an iOS developer you still have to know how to use UI kit in this video I'm gonna go over the basics of UI kit and show you how to use UI views in your iOS application from Swift and from storyboards when we create a new single view application in Xcode we have the option of choosing either storyboards or Swift UI when we select storyboards we're basically saying that we're gonna use UI kit to set up our user interface in this application now Swift UI and UI kit can be used together in the same app but for now we're just gonna focus on you idea when we choose to use storyboards for our application our first screen is represented by this view controller which is a subclass of UI view controller and the UI here suggests that this is part of the UI kit framework UI kit is the framework in iOS that we can use to build our user interfaces handle user input like touch events handle animations on things like UI views and tons of other things right now I want to focus on how we can use UI views in our application every view controller has a UI view that we can access through the view property and this is the thing that we see when we launch our application we don't see the view controller we see the view controllers view and this has properties that we can modify that will modify how the view appears to us when we run our app so one of those properties is the background color property that is a type of UI color and keep looking out for this UI prefix again because it means that it's part of the UI kit framework now UI colors are the base class that we use to represent colors in UI kit and we can construct a UI color in many many different ways one of the most popular would be to use RGB values like this all we can use one of the default colors that can be accessed through the UI colors static properties there's a few colors like blue or purple or even magenta or in Xcode we can use the color literal feature where if we type the word color and select color literal we can just literally select a color from a color palette and this will create a UI color object for us and hand it to the view as its background color and now if I run this application alright we should see the initial view load and it should be the screen color UI views are the most fundamental building block that we use in UI kit when we build our UI is everything's gonna either be a UI view or a subclass of a UI view things like buttons labels image views they're all subclasses of a UI view but before we get into all that let's just look at what a UI view is I can create a new view with the UI view initializer and views in the most basic sense are just rectangular regions on the screen they have an exposition of Y position a width and a height so I've created this view but right now it doesn't have a width or a height so in order to actually see this on the screen I'm gonna have to set those values every view has a property called frame that is a CG wrecked that can hold an x value of y value a width and a height just like I'm doing here and because every UI view needs a frame in order to be seen there's a convenience initializer that we can use on the UI view where we can just pass in the frame and now this view will have an exposition of 50 a wipe session of 50 a width of 200 and a height of 100 but if I run the application we're still not gonna see it on the screen in order to actually see the view we're gonna have to add it as a sub view to another visible view so in this case the only view we can currently see is the view from the view controller so I can call a method on that called add sub view and then pass it a different view and if a view exists as a sub view of this view I'll be able to see it and I said view a lot there and there we go so that's now added to the view hierarchy so this is similar to how the view hierarchy and Android works or how the Dom in a web browser works you can create these views all of these nodes but you won't actually see them until they're part of the view tree so you need to add them as a sub view to another view and there's really no limit on how many sub views you can add and every view can have its own sub views but we just end up adding views to other views using this add sub view method so to demonstrate that let's create another view I don't I set its background color to be blue and I'm gonna add it as a sub view not to the main view but to my view so the main green view contains the magenta view and the magenta view contains the blue view as a sub view of that view and this is kind of a little bit of weird behavior right here by default a parent view won't cut off a child views appearance so the width of the blue view extends outside the magenta view but by default the magenta view is not going to cut that off it's still going to allow the view to be seen and if we want to stop that from happening if we want to clip the blue view there we can add a property to the magenta view that says clip two bounds equals true and if we rerun this the blue view won't be able to extend outside of the bounds of the image interview now the geometry in an iOS app works a little bit differently to some other platforms so if you remember back to high school geometry the coordinate system starts in the bottom left corner at 0 0 and increases its X&Y access towards the top right and this is how the coordinate system works in something like a Mac OS app but in an iOS app the coordinate system starts in the top-left X increases as you go right but Y increases as you go down so it's flipped a little bit but this helps out when we want to create a OS apps because it turns out having 0 0 at the top-left is a more natural way of thinking when we're creating iOS apps because our content starts at the top and goes all the way down the screen and maybe even goes through the bottom of the screen and we have to scroll to see the rest of the content so in this case the x and y value of the magenta square are both fifty so this is sitting 50 points to the left and 50 points down and this isn't pixels in the traditional like hardware pixel sense this is points so no matter if I'm dealing with a original iPhone or a retina iPhone or the new crazy amount of pixels in the new iPhones it's always gonna appear to be in the same place and then this blue square also has 50 X and 50 Y but that's relative to its superview so the blue square appears 50 pixels inset from the magenta view not from the view controllers view and the width and height behave as you'd expect they both have a width of 200 and a height of 100 there are many properties on a UI view that you can change but some of the most common that you might want to use would be the Alpha and this will change how transparent the view is so I set the Alpha of the magenta view to be 0.5 which means that it and all of its sub views will now have 50% transparency and it's important to know that if I set this property on a super view it will affect all of its sub views I can also completely hide a view by setting its is hidden property to true and this can be handy because the view now still exists in the view hierarchy so the blue view is still there it's just invisible so instead of having to remove it from the super view and then add it back in later I can just hide it temporarily if I need to every view also has a frame property a bounds property and a center property and we use these when we want to read where a view is positioned but also we want to set where a view is positioned so I initially set the location and size of the view in the initializer right here but I can modify that at any point in time so if I want to modify the entire location and size of the view I can set its frame to be something different but if I just want to maybe modify the position I could set its center position and I think the easiest way to talk about these is to first see what their values are so if I print the frame bounds and center we'll see that the frame has an x and y 50 a width of 200 in the height of 100 and this is exactly what I set the frame to be so no surprises there the center is 150 it has an X of 150 and a Y of 100 and this is because it's telling us where the center point of this view is relative to the super view so that's you know right around there then the bounds gives us 0 0 and the width and height because the bounds is telling us where the view is within its own coordinate system now most of the time this will be 0 0 but not always and I'll leave a link in the description to more information about this if you want to find out more about the difference between frame and bounds my kid woke up from a nap early so now it's night time I'm gonna set the Alpha and hidden properties back to their default values because I want to show you another interesting property that every View has and that's the transform property and the type of this property is a CG affine transform which is a struct that represents a 3x3 transform matrix so if you're into linear algebra that's pretty interesting and you can modify those values directly if you're not into linear algebra like most people then you can create a struct using one of the more user-friendly interfaces so for example if I wanted to rotate a view I can create a transform stroke using this initializer and pass in a Radian value it now because it's in radians two pi would be a full 360 degree turn so I just want to get a turn slightly just so we can see like a slight angle there so I'm gonna use CG float dot pi divided by 4 and that'll give us a 45-degree angle there we go and notice that even though we're talking about UIKit here a lot of these things have the prefix eg instead of UI and that refers to the core graphics framework which is slightly lower level than UI kit and I'm not gonna go into core graphics in this video but it's worth noting that if we want to take more control of our views and our UI we can learn about this core graphics framework as well and it gives us way more control way more power over everything that's seen on the screen and I'll include a link in this video if you want to learn more about core graphics so this is what it's like working directly with UI views but a lot of the time we want to work with subclasses of UI views that give us more added behavior so for example if I want to display text on the screen I'm going to use a UI label so with minimal effort I can display pretty much any text I want using this UI label class and it's a subclass of UI view so it acts in the same way in a lot of ways like I can still use this frame constructor and pass in a CG wrecked but it also has special properties that only apply to a label things like text and text alignment but like I said it is still a UI view so I can do things like transform it in the exact same way I would transform any UI view and to quickly learn more about these classes in Xcode we can come and click on the class like this click on jump to definition and Xcode will actually take us to the interface for UI label in this case and we can see that UI label is a class that inherits from uiviewcontroller calls and here are all the properties that we can access so text font text color shadow color so this can be a good way of checking out how some of these classes work without having to go to the official documentation or search through the internet for anything another subclass of UI view that we'll end up using a lot is the image view now as the name suggests image view is a view that will display an image and we give it an image using its image property that's expecting an instance of UI image which is another class in UIKit that knows how to deal with the most common types of images so we can create a new UI image object from a image file or from data that we've downloaded over a network and then we can hand that UI image objects to the image view and the image view will display it for us so I've just downloaded an image that I want to use in this iOS project here's the image now the easiest way to get this into the project in a way that UI image can see it is to use this assets XE assets folder so if I open this I can just drag any image into here and I can rename it in the side here whatever I want it to be I'm just gonna maybe call it photo one and now all I have to do is pass the UI image the name photo 1 and in the assets dot XE assets we can store any number of images and we can also store images for different screen types so the One X is for all die phones before Retina displays 2 X is for the retina displays and 3 X is for the really high-res new iPhones we don't have to supply an image for each of those if we don't want to it will just use the One X but it can be a really easy way of just supplying all the different resolution images that will then get used in the iOS app so now UI image is going to load that image file we're gonna hand the UI image over to the image view and that's going to display it on the screen and there we can see the image view displayed just like the other views the image is a little bit squashed though so I'm just going to change that so just by changing one of the properties it will change how it actually renders that image so image view again just a subclass of UI view and we can jump to the interface here and see that it a subclass of UI view and it has a bunch of properties that deal with images some of the most important is the image property itself and the content mode which defines how it's actually going to be drawn to the screen and since iOS 13 we actually have system images built-in called symbols and we can use those in a very similar way except instead of using the named initializer we use system name and now this is gonna pick from any of the SF symbols that are in iOS and just display that on the screen and these are types of symbols that you might see in a lot of applications so it can be helpful when you need it for example maybe a button or something to use these built-in images instead of always having to import your own UI image and UI label a very simple foundational views that we use all the time in iOS the UI kit also has much more complex views that might even be composed of labels and images so a button is a more complex view and if we check out the interface will be able to see amongst all of these properties it has a title label which is a UI label and it also has an image view which is type UI image view and that's because every time we use one of those buttons in our iOS apps it can have a bit of text as the title or it can have an image or it can even have both so we can create views that are composed of other views to give us the behavior we need now I'm not going to create and use a button here buttons are controls so they're more complex to use and I'm going to go over how to use controls in another video but for now I just want you to see that views can be very simple or they can get quite complex and you can compose views from other views which is a very common thing to do so right now I've been doing everything in code and I'm just going to delete all of this for now because we can do most of our setup for our view without writing a single line of code just by using a storyboard file so if I click the plus button at the top here I can select from this list of views so if I want a label I can just drop a label in here and if I want an image view I can drop that in and again I can select one of the system images or I can select that photo that I have there we go and I can just drag in ordinary UI views if I just want a rectangle maybe a different color and I could place views inside other views but I get to do it all visually and write much less setup code so this can be a quite nice way of setting up your initial view structure so if I select one of these views and go up to the top right here and select the size inspector I can change the X Y width and height of any of these views and to the left of that there's the attributes inspector and this is where I can change most of those default properties so for a view that might be changing the background color and for a label that might be changing the font size the actual text maybe the alignment and things like that and then over to the right here this is where we can see any references to IB outlets so if I want to add any behavior to these views or even manipulate one of the properties that I can't hear so for example I can't rotate this view from interface builder there's no transform property here I need to do all of those things from Swift so I need to create an outlet so if I bring up the assistant editor here and I right-click from I'm going to do the green view I'm going to right click from the green view into view controller drag-and-drop I can create a new IB outlet to that view and I'm just gonna call this green view and now I can modify this from my code notice that the outlet is a force unwrapped optional meaning it's an optional that's always going to be force unwrapped and this is because every property in a object must have a value by the time the object is initialized and in this view controller the view controller is going to get initialized for all the views appear on the screen and everything set up in the storyboard so at the time that the view controller is initialized the green View might not exist so from the initialization time to the time when viewdidload gets called green view may or may not exist we don't know but as soon as viewdidload gets called as soon as this happens green view is guaranteed to have a value so properties that are IB outlets are going to be force unwrapped optionals because they won't have a value when the class in this case the view controller is initialized but they will have a value by the time we're gonna use it we're gonna try using it until viewdidload so it's it's weird because it seems unsafe but in circumstances like this we're not going to use it until it has a value anyway so it's kind of okay I'm gonna go back to the storyboard file now because I want to point how one big mistake that new iOS developers make and that is to try refactoring the name of an outlet and in this case maybe I don't want to call this screen view anymore maybe I want to call this I don't know rectangle view that's fine right so you might be tempted to just change the name of the property directly and you can do a fine and replace in the interview controller and change every way you've used it and this seems to be working fine but now if I run the application it crashes and the error message is not the most helpful terminating app reason user interface view controller set value for undefined key is not key value coding compliant for the key Greenview so there's not a lot of information there not a lot of helpful information anyway it is talking about green view and you've already changed that to rectangle view so that could be a little bit confusing to basically if I if I select the view the green view in this case and head over to the connections inspector over at the right here I can see that it is still thinking that it's connected to a green view property so when the app loads it tries to connect itself to the view controller as green view but view controller thinks it's name is right angle view and the Aptus crashes and nothing works so in this case the correct thing to do is to just delete that property from there and then you can just read rag to the new property just like that highlighted read rag it in so if you ever get that error message just delete the old connection and create a new connection a much better way if you ever need to refactor any of these things is to use the refactor feature in Xcode so if I go right click refactor rename I'll get this window and then I could change this even back to green view if I wanted and it's gonna change it here and everywhere else in my code that it finds it including the storyboard outlet so if I rename it that way it's gonna work and then I can rerun it so make sure you don't make that mistake that's the basics of UI kit and how to use UI views in an iOS app in the next video I'm going to go over how to use UI controls like buttons and switches so stay tuned for that video and more videos on iOS development [Music]

Channel: Sam Meech-Ward

Views: 5,235

Keywords: swift programming, swiftui tutorial, swift language, ios development, swift 5, learn swift, swiftui vs uikit, ios development tutorial, should i learn swiftui or uikit, swift programming for ios apps, swift programming ios

Id: w58ncTHKiK4

Length: 22min 53sec (1373 seconds)

Published: Wed Jul 08 2020