Everyone will come back to class joining me here with their syllabus dotcom.
And in this lesson we are going to set up the UI for our shortcut.
Right.
So it's going to get started I got to open up a new project here I'm going to select the single view
app for iOS and we're going to say next.
And then we're going to go out and put in my product and name which we're going to call a short cut
and then we're going to select a team I'll just select my my own account organization name is Johnny
B that's fine identifier is coming out joining me that's good.
And those languages swift we're not going to use Chordata or unit test or you test this target topic
I'm going to say next.
And then we're going to put it here on the desk top to get repository going to say create.
Looks good and right off the bat I'm going to uncheck landscape left and landscape right.
We are only going to be working in portrait mode in this app.
Now that's good.
And I think the first thing we should do is let's go ahead and import our assets are and when I click
on it here and as part of the lesson in the end the last lesson there should be some assets that you
can download and I have those here on my desktop shortcut assets.
And we got a number here so we have the app icon assets which we'll work with here in a second.
But we want the mountains the ocean and space so these six are going to drag in.
And these three space ones I'm going to drag in and then these shortcut icons as well.
I'm going to select all of them and Dragon.
So by the way these this target topic does assume some basic knowledge of X code and swift.
So if you haven't gone through any of our more fundamental swift courses I would recommend going and
going through those first time.
This is going to expect that you already know how to use X code and swift.
All right so just to get that out of the way.
All righty.
That looks good.
Go ahead and give ourselves some app icons real quick.
And I have.
Let's see here.
NASA's got a whole bunch of them here.
I'm just going to put in kind of the bare minimum here.
I'm going to put in the iPhone app sixty point ones here so I can dash 60.
I mean Jeg here on the 2 x and 60 for the 3 X Dragon and of us to the iPad 76 pointer's as well let's
see that needs one and two in case.
Seventy two right here and 72 at 2 x right here.
And I don't actually have the 83 and a half point for the iPad Pro in this icon set.
That's OK.
We're going to be working mostly or just in the iPhone anyway so that's fine.
That looks good.
That's fine for now.
I'm going to say that and yeah let's jump into our story board now.
All right so if you remember our app is just embedded in a navigation controller and we have three views
or so we're going to go ahead and select our first view controller here and I'm going to see here with
the controller selected comp here to hand it to her and say embed in navigation controller.
And there we go.
That looks terrible.
All right so let's go.
All right.
And what do we need here.
Each of these new controllers is just going to hold an image whole point of this target topic is not
to do auto lay out and stack views and all of that kind of stuff.
We're here just to learn about using 3D touch quick actions are we.
So let's go ahead and do a filter here.
I'm going to search for UI image.
So Image view is going to drag that right in.
And we are going to pin it as you are from the left top right and bottom and we're going to add those
four constraints then we are going to come up here to its attributes inspector and we were going to
set the image to mount and let's see here what's it called.
I'm not due to do mountains.
There we go.
And then we're going to set the content mode to Aspect fill.
We go and that's all we need to do here is here.
Now we do need let's see here we do need a button.
So we're going to have a bar button item and we're going to throw that here at the top so that we can
navigate to our next View Controller.
So let's go ahead and search for the Wii U controller here and let's see if just drag a new view controller
in that we go and let's put in another image view and plop that in there and we're going to constrain
it.
It's you who zeros you zero zero on all four sides and memory around it and four constraints.
Now for the image this one is going to be space very nice.
And let's see here.
Do do do do.
We are going to.
OK.
So let's come back to our first one here and zoom in a little bit.
And for the system item let's go ahead and select play.
Just to kind of be able to move from the view to view.
It selected.
And I'm going to control drag to our second view controller and I'm going to say show that we go.
It looks good.
And then what we need to change the aspect of the content mode on our second image here.
So with this image selected here I'm going to say content mode is aspect feel there go.
Very nice.
All right so now let's get our third controller in here.
You going to drop that right there.
And we need our last image in case we get it there and we're going to say zero from the left top right
and bottom right constrained to margins.
And we're going to set the image to what was it called ocean ocean.
There we go.
So the content mode to Aspect fill it looks good and then we're going to need another button here and
the navigation for our second view controller.
But first what you got to do is you got to put in something called the navigation item.
So you got to drag a navigation item in here and then we're going to need to we can set a title.
I'm just going to delete it.
There we go.
And then we can put in a bar bar button item right here.
So drop that in here.
And again we're going to set the system item to play as we go.
And then we're going to select it and control drag it to our third controller and say show all ready
look and beautiful.
Let's go ahead and run this and see how it looks going to run on iPhone.
Plus which at the time of recording just barely came out I think today.
So I was like saying go to the Apple store and check out the new iPhone AITs.
All right.
So here is our lovely app if we select Over here we can go to the next one space and the next one for
the ocean and he's pictures by the way are from the Web site on Splash dot com where you can get high
quality images for free.
So now sponsorship or anything but just a great place to get images of you and you can check those out.
All right so very cool.
All right.
So next up we need to do a few things here we need to add storyboard IDs to our view controllers.
So with the story with the view controller selected coming here over here to the identity inspector
and give it a storyboard ID and I'm going to call this first one the mountains or the sea and then we're
going to select the second one.
And for its storyboard idea even to say space visi.
And for the last one
want to select It's View Controller and give it a storyboard idea of ocean movies.
And the reason for that is because we're going to instantiate these controllers from the Abdellah get
a little bit later.
All right so now we have our controllers here in the storyboard.
Let's go ahead and create a couple of controller files for our for use here.
All right.
When I right click on the shortcut saying new file and I say Cocoa touch class and next.
And you have your controller subclass and for this I'm going to say what's the SEC on space space.
VC your controller.
And that's good.
And create.
Go.
Going to drag that up here by the other B control.
When I right click again and say Not sure when finder right click again and see new file and Koca touch
class next.
And this one is called Ocean visi.
I'm going to say next can create or I'm going to drag that up here.
All right.
So now we have this view controller that is just called view control I want to show you something cool
new with X code 9 if you haven't seen it.
We have re factoring finally.
So if I select the view controller here I can right click and say refactor and rename and then all I
got to do is rename it to what I want it and it will rename it everywhere that it needs to be renamed.
So here I'm going to say mountains VC.
You know and I renamed it here and rename the file name and renamed it Arisa that's the the the class
here in storyboard.
The only place it does and to rename it is here in the comment which I'm going to do just because mountains
have DC area.
All right so that's all taken care very nice.
All right so let's go ahead and run this one more time.
Just make sure everything is still working and looking good.
All right.
Select make sure app icon is there and it is very nice but if we hold down on it it's not doing anything
right now.
So we're going to start working on that in the next lesson.
I'll see you at.