It is what's up everyone right here at deps dot com.
And in this video we are going to start our swoosh app and we're going to learn a little bit about user
interface and Interface Builder some of the caveats that come with that and how you should overall set
up your project for user interface.
And we're going to build a custom control.
So we got some designs here as you can see and the idea behind this app is it's a an app where you can
get with other people and play basketball games pickup games.
And so we're going to build out all the features and location and things like that.
But it's always important at least for me and in teaching to see real world apps and how you might actually
build things for a consumer facing application.
So we're going to do everything for this app and of course in this course as you might do professionally
we're not going to cut any corners.
So let's go ahead and get started.
First things first is as always we want to create a repository for this you'll want to do the same here
and I'm going to create one for my course iOS 11 here and I'm going to create a repository and call
this app dash swoosh.
OK.
Great repository and all I'm going to do here is grab this S-sh key to get this here.
Now of course you can download the source code and check out different branches for the final code.
But it's good for you to follow along and create your own branches on your own.
Get help or bit bucket repository.
And so what I'm going to do now is make sure I'm in my apps directory so present working directory.
I am in the Swiss directory are all going to do is say get clone and I'm going to clone the repo
and I've Colona empty repository which is fine.
I'm going to CD into the app swoosh and there we go.
So what I'm going to do now is I'm going to create an empty X code project here or a default X code
project so I'm going to open the X code beta for the X.
If x is released of course use the published version.
And what we'll do is we'll create a new project single view application is what we want it's just going
to have one view that gets other views click next and we're going to call this app swoosh and you can
fill in in your own information here which is fine if you have a team that's great you may not have
a team which is fine and of course Swift is very important.
Click next.
And what I'm going to do is I'm going to put this in its proper folder so courses and lessons and you
can put yours wherever you want swoosh swoosh and I'm going to put it in right here.
Perfect.
So here's my project.
Ready to go.
Here we have the default project information here.
Nothing is overly important to play with at this point in time.
But there are some things that you can do YOU CAN MAKE IT sport upside down or turn off landscape or
turn you know turn it on and we're just gonna leave all these things as default here.
And so you're going to notice a few files here in your project.
The app delegate which of course is the starting point for your application.
We aren't going to touch that we'll leave that as is and it's giving us a default view controller does
Swift.
This is the code for the default view controller that your app loads with.
And of course all apps have a default view controller.
OK so that's there and that's important to understand.
And then we've got our main story board and this is where the default view controller has been placed
for us.
OK we let that happen automatically and we could have created all this from scratch included a storyboard
and all those different things and dragged a view controller on here.
But the defaults are all fine for now because we want to get up and going.
Building and.
And so we get a view here which is the main view and that's where we're going to drag and drop other
views on.
And you can hover over this little icon here at the bottom right.
This is the object library.
And this is where we're actually drags some views onto the screen.
OK but before we can drag views we got to look at the layout design here and see what we're actually
supposed to build.
And so we're going to build this first screen here.
It's the welcome screen.
And notice how there's a logo.
There's some text here.
There's a background image.
There's more text here and there's a button.
So I'd say one two three four five six six elements on the screen.
Probably that we need to build.
And of course we don't have the assets in our project get for the swish logo or for the background.
So we're going to need to grab those now as well.
So what I want to do is I'm going to go into my Dropbox folder here and we're going to go into courses
and lessons Iowa 11 app designs and here's the swooshed designs and the assets have been exported for
us already.
Okay.
And one thing I want to point out here is that we've exported these assets within at 2 x 3 x although
it looks like we missed it for the logo here which I'll add that as well too.
But basically when it comes to graphics and I always development if you just implement one graphic it's
going to be used for all screen densities.
And so the non 2 x and non 3x that's your lowest resolution file.
Okay.
And those are use on older phones like the iPhone 4 and for us but as phones have gained more resolution
the bigger images are necessary to always no matter what happen at 2 x at least which is usually double
the size of the at one X..
It doesn't have to be you can just make it bigger and it will use it automatically but it's good for
you to make it double and at 3 x.
As far as brand new devices like the iPhone 7 plus which have ultra resolutions and that's important
as well to providing all three graphics files.
And if you don't what you'll notice is you'll notice some blurriness on the images if you don't which
is which will make your projects not look so nice.
Your apps.
So what we're going to do here is we're going to in our code project here in ex-coach we're going to
click the assets folder.
And what I'm going to do is just select all these things here command a.
I'm just going to drag them over here OK.
Notice how it didn't Adul the at 2 x 3 x on here.
It just it dragged in the names the files.
Well it's because it recognizes that file format and places them in the appropriate spots and that's
all you have to do if you want to support a really high resolution device like the iPhone 7 plus all
you had to do was the at 3 x 2 x and it put it into the slots automatically and at runtime it will choose
the appropriate image.
No code is necessary which is really awesome.
So again you do the at 2 x 3 x and then the file name.
OK file type.
Excuse me.
So looks like we're good to go there and the next thing we want to do is start building out our user
interface.
So let's go to the main storyboard and to build out a graphic on the background we need to use an image.
So I'm going to type an image here at the bottom and this is called an image view or image view.
And what we're going to do is drag it onto the screen.
Like so OK and there's an image of you and then what I'm going to do is hover over this icon right here
in the middle.
This is the attributes inspector and we're just going to select an image.
OK.
And welcome screen Biji.
Now here's our image.
And notice how we're viewing currently as an iPhone 7.
At least mine is yours may be different.
So if we wanted to see how it looks in different devices we can click that and it will change the device
that you're viewing it on.
And notice here on the seven plus it's not going the full screen.
We're going to have to address that later on.
So we're going to work out the iPhone 7 right now so it looks nice.
So what we're going to do is use the iPhone 7 we're going to build all of our interface elements and
then in the subsequent video we'll actually go and figure out how to get it working on all the screen
sizes so cool.
So we got the image here.
We've selected the image.
One thing I do want to say is on this content mode scale to fill is not ever.
Usually what you want whether it's going to do is it's going to scale your images to fill up the space
but it may stretch them.
And as we know stretched images never look good on apps ever ever ever.
And so what we really want to do is aspect feel like it'll keep the aspect ratio and fill it up in the
entire screen.
And so that's what we're looking for here.
Cool.
And so I just say my project I do that very often.
And so the next thing I want to do is this probably get some of the the rest of the controls on here
so the image this is swooshing and these here.
And so what I'm actually going to do is I'm going to keep it side by side with my project kind of like
this so I can just so I can kind of look at it while I'm working on it.
So what I'm going to do is these controls up here I'm going to go ahead and hide or show the navigator
someone I'm going to hide.
The navigator here so I have more space on my screen and I'm to work with it like this right now OK.
So first things first is I want to throw another image of you on here.
So right at the top and this will be our swoosh.
So I'm going to select the image here and do swoosh logo as you can see.
Right now it's scaled to feel it's smashing the image which of course doesn't look right.
And so even if you eyeball it like this you know like OK that looks good.
You still want to do aspect fit because or aspect feel because you know it'll be perfect then.
So let's play with aspect fit for a second.
So notice how aspect fit it stays there aspect ratio.
But it gets bigger or smaller depending on the size of my box.
If I go to Aspect feel OK you can see that it's it's keeping a massive aspect ratio here in my app and
filling up the entire space which is not what I want.
So in this case I want aspect fit so it fits within the bounding box.
OK.
And right now we're just going to kind of eyeball it and here's what I was telling you about earlier
and I'm glad we pointed this out here.
By not having the other 2 x 3 x images since we don't have at 2 x 3 x images we're using the default
low resolution one.
And it's kind of blurry.
So if we want that to look really nice we're going to need the 2x and 3x images that will add to the
project here.
So let's go ahead and put this right here OK.
So swoosh it looks ok looks good enough for now.
And the next thing we want to do is add some text.
And so Alexa shut up.
OK.
So the next thing we want to do is she's not sure about iOS development that's because she's made by
Amazon.
We're going to do a label here.
OK.
And of course ours doesn't look anything like that.
So I'm just going to make it bigger and kind of eyeball it for now.
OK.
And I'm going to center it so a minute with this label selected.
I'm going to hover over the center icon here and center the text.
And the next thing I'm going to do is I'm going to change the font.
I never ever use the system font because it's just ugly.
And so we're going to go to Kustom and we're going to use the Avenir now Avenir is actually a font that
Apple uses for most of all their marketing material and it looks really nice and the style.
I just want a regular medium style K so that's good for now and what we'll do is we'll increase the
size until it gets about the size that we want.
I made just this in just a minute here and want to change the color.
Click on color here.
And what I'm going to do is I'm going to change the color to white.
OK you can put any of these controls to get white.
I just click the sliding icon here and drag that over.
And so what I want to do is mimic what's on the screen so go all in.
OK.
And in the image to the left now OK.
It's kind of at the bottom of the basketball player.
Like right there on the left hand side and this one's about right there.
And I'm all I'm ok eyeballing it it's it's fine for now it doesn't have to be pixel perfect.
And in fact here's a protip.
OK this is a very important protip that you should let your designers know if you're ever working with
designers.
It is not ideal practice to have pixel perfect designs in Iowa development.
So if you have a designer come out you say I want these pixel perfect and he makes the little markers
of 16 pixels things like that.
That's not ideal because when I was development what you want to do is work with auto layout which gets
about near perfect what you want but never quite there because it needs to adjust for different screen
sizes so you should always let your designer know.
I will make it look really nice and based on your designs but I cannot guarantee pixel perfect.
One is it might be two times the work to do that and you have to write custom code to get there.
And so theyre going to pay a lot more money.
OK.
Don't ever commit to pick pixel perfect on a pre-contract project and two is it will take a lot of time.
OK.
And it's often not worth it.
So just let your designer know explain it to them.
But there's your protip So go all in.
OK so what next thing I can do is make sure it's selected and I'm going to Kamandi to duplicate.
You could also commands command c command V to paste.
And what I'm going to do here is we're going to write the text that we need.
So on going all out ok cool little catch phrase that Evan created for us.
And we're going to make a smaller so ongoing all out.
Now what's interesting is the image over here.
OK.
It's lined up completely.
So the O is over here and the.
Yes so we need to make this a little bit longer and bigger.
So what I might do is just increase the font size until it's about right and.
Make sure it's centered which it is and it's a little bit too big say twenty three is too small.
Well like I said it's going to be picture perfect but it will be close enough and I'm OK with that.
So we'll put it right about here and we'll make the bounding box a little bit smaller so we don't have
extra wasted space.
OK.
So go all in on going all out and do what we could possibly do is just make this bold and that might
actually that might actually be yeah.
That almost made it quite perfect there on the edges there.
OK.
So go all in on going all out.
Sounds so inspirational.
And I can also use the arrow keys.
OK.
On the keyboard to move things around and then move it up there's a slight bit more and I'm liking that.
So next thing I want to do is get this text here in the middle.
So again Kamandi to duplicate.
And I'm just eyeballing it again not doing pixel perfect here.
And what we're going to do is type in the words so find a team in your city and dominate the league.
OK.
And the reason why I type the words first before I change the sizing and things is so I can actually
size it up and it'll fall into place a little bit easier.
And so changes back to from heavy to medium.
And then we're just going to reduce the font size.
One of the things we're going to need to do is have two lines here so see where those lines.
Just click it up by one until it has two on there.
OK.
And where to put that right there.
And I'm going to now you know we need to make it larger so it shows two lines.
There we go.
OK.
It wasn't showing two lines because my level was not large enough as you can see it is now large enough
and notice how there's too many words.
So we need to get rid of dominate.
OK.
And also the words need to kind of stretch out across the whole thing.
So let's make the font bigger.
It's a little too big.
It's smaller there.
Let's see if we
I'm just playing with things here.
What I want to do is I want to get the league to be the only thing that's showing Raguel it's a little
bit long.
What happens is by so it's a little bit long but I kind of like the I like the font size.
So maybe what I should do.
Well maybe I should do is make these a little bit bigger.
I'm curious now to make this a little bit bigger to get them.
Touching the edges like so.
And make sure this one is lined up properly.
Make this a little bit bigger.
There we go.
X-Treme kind of like it.
Good enough.
OK.
Perfect.
This is looking really good.
Now the last thing we want to do is add a custom button on here.
OK.
And so what we're going to do is type in beauty for button.
And of course it doesn't look anything like we would expect.
So it just drag it there and put it towards the bottom so obviously it's it's ugly ugly button.
So let's go out and drag it to the left here on this side of the screen and drag it to the right and
let's make it a little bit bigger as per the designs.
And there's some things we can do right now.
So what I can do is instead of saying the word button on it as you can see at the top right side get
started.
All right.
And let's go ahead and changes from System font to custom and then let's go to Avenir.
All right.
And let's just do the medium font and change the color to white like so.
OK.
And then what I want to also do is scroll down a little bit on this button here and see how background
it has a red slash.
I mean it's clear color there's no background.
I instead want to do is I want to make this black like so black color I just change the color to black
and then what I would like to do is click this icon here and change the opacity just eyeball it.
Good color there where you can kind of see the background and I just change it to 40 percent opacity
and now starting to really look like the designs.
OK and this is really cool.
Now we don't have a border on here yet so we need to solve that next.
But this is looking pretty close.
So I mean to save it.
And the next thing we want to do is actually create the border.
So what we're going to do is open up our navigator with a button at the top right.
We're going to go into our folder here.
Wish right click and we're going to add a new group and I'm like call this group views.
This is we're going to put custom view code.
So it's segregated from you know different types of code like view controllers or services.
And inside the views folder here or group right click and go to a new file.
And what we want to do is a cocoa touch class.
Ok cocoa touch is the framework that manages things like buttons and views.
And we don't want to create an empty file we want to actually use the prebuilt custom cocoa touch class
and we don't want a custom table view so what we want is a UI button we want to custom you I button
we're going to call this border button.
And the advantage of making this a class means that we can reuse this button over and over and over
again and reusability is very important in programming.
We always want to keep the dry principle.
OK.
I want you to burn listen to your brains right now.
The dry principle don't repeat yourself.
If you find yourself writing code over and over and over again the same code.
It means there's always a better way.
And so creating classes is one way to make reusable code.
So less code means less bugs and less work.
So the dry principle don't repeat yourself.
So we've got our border button here subclass of you I button of course.
Fill that in first automatically when we started typing and you say button is part of the code touch
framework and a click next.
And I'm just going to click Create and here's our border button OK.
And it says only over a draw.
If you perform custom drawing well we're not going to override the draw recked function because we're
not doing custom drawing all we're going to do is add a border which is part of the default lair inside
of any you I view.
OK and so you would override the draw recked.
OK this function right here.
You would implement that function only if you had to do cousin drolling you wanted to draw a little
stars inside your button or things like that any type of custom drawing that you might want to do.
And so what we're going to do is we're going to use the Awake from NIB function.
OK.
Awake from NIB and we're also going right super awake from it.
OK.
And you'll learn more about this.
But the superclass basically is or calling super is calling the parent class so it's calling you buttons
awake from NIB function because Apple when they've written this code for us they already have an awake
from NIB function which has lots of code in the already possibly.
And so we want to make sure that that code is called and per the apple documentation.
When you override the awake from NIB function they want you to call super call it first so the code
that Apple is calling for the Apple has written in their function and all we're going to do here is
access the Alair property.
So Lehre dot border with K equals a 3.0 or say Lehre border color because you eye color white color
dot C-g color.
OK a lot going on here I know.
But what we're doing here is every view.
OK so every you view you eye button inherits from you eye view it gets some of the properties and features
from a view has a Lehre property.
OK.
This is stuff that the Apple engineers have written for us.
And so like a border with Unfortunately that's not available to us in the interface builder so we have
to do it programmatically so border with and border color allows us to set a border with color.
Any of could be an image of you could be a new eye view could be in any of those things.
You can add borders to and because it all inherits from you I view and I mean if we command click this
right here.
OK.
Pulled the documentation.
And it talks about the different functions and things that are available to it in fact anytime you want
to look at the code underneath you can command click and go on and go look at all the code underneath
is available for you to look at.
So if you ever want to see what functions are available to you you can command click and go to the jump
to the definition.
OK.
Pretty cool stuff.
Anyway so we've got what we need here.
All right.
We've created a custom button called Border button and in the Awake from NIB function which is going
to be called the moment that your interface builder you control it comes to life onto the screen.
OK this is going to be called right from the beginning and then we need to do one more thing is go back
to our main story board.
OK.
And on this button here instead of it being a regular UI button we want to click this icon right up
here.
The identity inspector and we want to change the class from UI button to border button I just type in
the letter B and it appears right there.
Now you're not going to see anything here in the interface builder.
OK.
But when we run this project we should see a white outline on this.
So what I'm going to do is from my devices here I want to choose an iPhone 7 since that's what we're
working with here and the Interface Builder.
And we're going to run it
and here it is on my screen.
It's a little bit big if you want to change the size of the Interface Builder here.
You can type press command one or command two or command three to make it different sizes.
OK.
And cool.
So you know what I think our our borders have probably a little bit thick.
I probably should have done it two instead of three.
And I think maybe there are buttons a little thin but as you can see it looks pretty close to the Zeins
which I think is pretty cool.
So let's make those few minor adjustments real quick.
Again we're eyeballing all this which is fine.
And so make it a little bit larger there and then the code the border button realises that this two
are two.
OK.
Now let's try something different.
OK let's run this on an iPhone 7 plus and see what happens.
OK as you can see it's now loaded.
A second simulator here.
All right.
And we're going to keep this one on this side because it's really massive.
I'm sure if I make it bigger it doesn't if on the whole screen which it doesn't know.
So here's something interesting.
Let's move this one off the screen.
Look at this on the iPhone 7 plus we got this big white space here.
OK.
That's not good at all right.
So you actually can't ship an app this way the way we just built the interface.
It's not complete because it only works on one type of device screen.
And we could have easily seen the problem.
Let's go back to our story board here.
If I had clicked on this device down here for the iPhone 7 plus you can see that there's a white space
or if I click on the iPad there's an even bigger white space.
OK.
And so this problem has always existed in Iowa.
And here's the reason why.
OK.
Currently we're not utilizing auto layout.
OK iOS all the way that all the apps that are laid out that seem to rotate and look good on any device
they use something called auto lay on auto layout will allow us to pin things to the edges of the screen
or pin things to other components on the screen.
So it looks good on any type of screen and we haven't done any of that yet.
So we're going to call this video done.
What we've done so far is we've dragged some controls onto the screen we've critter own custom class
using the Awake from NIB function.
We have initialized code or we've set code that will change the border and the border with the button.
And now you know things are looking pretty good but we have some we have some user interface problems
so we're going to need to address those next so that's it for now.
Mark Price does slopes com.
Moving on and for.