1
00:00:04,960 --> 00:00:08,040
Everyone will come back to class joining me here with their syllabus dotcom.

2
00:00:08,230 --> 00:00:12,380
And in this lesson we are going to set up the UI for our shortcut.

3
00:00:12,610 --> 00:00:13,000
Right.

4
00:00:13,180 --> 00:00:18,490
So it's going to get started I got to open up a new project here I'm going to select the single view

5
00:00:18,520 --> 00:00:21,750
app for iOS and we're going to say next.

6
00:00:22,270 --> 00:00:28,000
And then we're going to go out and put in my product and name which we're going to call a short cut

7
00:00:28,450 --> 00:00:34,360
and then we're going to select a team I'll just select my my own account organization name is Johnny

8
00:00:34,360 --> 00:00:37,710
B that's fine identifier is coming out joining me that's good.

9
00:00:38,050 --> 00:00:43,540
And those languages swift we're not going to use Chordata or unit test or you test this target topic

10
00:00:43,950 --> 00:00:45,360
I'm going to say next.

11
00:00:45,670 --> 00:00:51,940
And then we're going to put it here on the desk top to get repository going to say create.

12
00:00:51,990 --> 00:00:56,840
Looks good and right off the bat I'm going to uncheck landscape left and landscape right.

13
00:00:56,840 --> 00:01:00,180
We are only going to be working in portrait mode in this app.

14
00:01:00,230 --> 00:01:01,570
Now that's good.

15
00:01:01,870 --> 00:01:06,190
And I think the first thing we should do is let's go ahead and import our assets are and when I click

16
00:01:06,190 --> 00:01:13,450
on it here and as part of the lesson in the end the last lesson there should be some assets that you

17
00:01:13,450 --> 00:01:19,650
can download and I have those here on my desktop shortcut assets.

18
00:01:19,740 --> 00:01:26,810
And we got a number here so we have the app icon assets which we'll work with here in a second.

19
00:01:27,070 --> 00:01:34,490
But we want the mountains the ocean and space so these six are going to drag in.

20
00:01:35,410 --> 00:01:43,210
And these three space ones I'm going to drag in and then these shortcut icons as well.

21
00:01:43,210 --> 00:01:46,750
I'm going to select all of them and Dragon.

22
00:01:47,490 --> 00:01:54,670
So by the way these this target topic does assume some basic knowledge of X code and swift.

23
00:01:54,670 --> 00:02:00,280
So if you haven't gone through any of our more fundamental swift courses I would recommend going and

24
00:02:00,730 --> 00:02:02,380
going through those first time.

25
00:02:02,560 --> 00:02:06,530
This is going to expect that you already know how to use X code and swift.

26
00:02:06,700 --> 00:02:09,320
All right so just to get that out of the way.

27
00:02:09,350 --> 00:02:09,850
All righty.

28
00:02:09,910 --> 00:02:11,400
That looks good.

29
00:02:11,470 --> 00:02:15,830
Go ahead and give ourselves some app icons real quick.

30
00:02:16,360 --> 00:02:17,680
And I have.

31
00:02:17,700 --> 00:02:18,670
Let's see here.

32
00:02:18,760 --> 00:02:21,370
NASA's got a whole bunch of them here.

33
00:02:21,400 --> 00:02:25,550
I'm just going to put in kind of the bare minimum here.

34
00:02:25,600 --> 00:02:32,790
I'm going to put in the iPhone app sixty point ones here so I can dash 60.

35
00:02:33,010 --> 00:02:42,940
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

36
00:02:42,940 --> 00:02:46,380
see that needs one and two in case.

37
00:02:46,760 --> 00:02:52,700
Seventy two right here and 72 at 2 x right here.

38
00:02:53,230 --> 00:02:58,020
And I don't actually have the 83 and a half point for the iPad Pro in this icon set.

39
00:02:58,030 --> 00:02:59,060
That's OK.

40
00:02:59,590 --> 00:03:04,750
We're going to be working mostly or just in the iPhone anyway so that's fine.

41
00:03:04,840 --> 00:03:05,590
That looks good.

42
00:03:05,590 --> 00:03:07,210
That's fine for now.

43
00:03:07,220 --> 00:03:12,650
I'm going to say that and yeah let's jump into our story board now.

44
00:03:12,650 --> 00:03:21,340
All right so if you remember our app is just embedded in a navigation controller and we have three views

45
00:03:21,380 --> 00:03:28,250
or so we're going to go ahead and select our first view controller here and I'm going to see here with

46
00:03:28,630 --> 00:03:35,820
the controller selected comp here to hand it to her and say embed in navigation controller.

47
00:03:36,040 --> 00:03:36,800
And there we go.

48
00:03:36,820 --> 00:03:38,170
That looks terrible.

49
00:03:38,260 --> 00:03:40,320
All right so let's go.

50
00:03:40,900 --> 00:03:41,190
All right.

51
00:03:41,200 --> 00:03:42,900
And what do we need here.

52
00:03:42,910 --> 00:03:49,060
Each of these new controllers is just going to hold an image whole point of this target topic is not

53
00:03:49,060 --> 00:03:53,170
to do auto lay out and stack views and all of that kind of stuff.

54
00:03:53,170 --> 00:03:58,620
We're here just to learn about using 3D touch quick actions are we.

55
00:03:58,950 --> 00:04:01,360
So let's go ahead and do a filter here.

56
00:04:01,360 --> 00:04:03,690
I'm going to search for UI image.

57
00:04:03,730 --> 00:04:06,920
So Image view is going to drag that right in.

58
00:04:07,870 --> 00:04:16,690
And we are going to pin it as you are from the left top right and bottom and we're going to add those

59
00:04:16,690 --> 00:04:22,720
four constraints then we are going to come up here to its attributes inspector and we were going to

60
00:04:22,720 --> 00:04:31,000
set the image to mount and let's see here what's it called.

61
00:04:31,020 --> 00:04:33,630
I'm not due to do mountains.

62
00:04:33,670 --> 00:04:34,540
There we go.

63
00:04:35,050 --> 00:04:39,850
And then we're going to set the content mode to Aspect fill.

64
00:04:40,080 --> 00:04:44,940
We go and that's all we need to do here is here.

65
00:04:44,960 --> 00:04:48,870
Now we do need let's see here we do need a button.

66
00:04:49,120 --> 00:04:55,420
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

67
00:04:55,420 --> 00:04:58,070
navigate to our next View Controller.

68
00:04:58,250 --> 00:05:05,220
So let's go ahead and search for the Wii U controller here and let's see if just drag a new view controller

69
00:05:05,220 --> 00:05:14,650
in that we go and let's put in another image view and plop that in there and we're going to constrain

70
00:05:14,650 --> 00:05:15,790
it.

71
00:05:15,870 --> 00:05:23,590
It's you who zeros you zero zero on all four sides and memory around it and four constraints.

72
00:05:23,980 --> 00:05:29,830
Now for the image this one is going to be space very nice.

73
00:05:29,860 --> 00:05:32,990
And let's see here.

74
00:05:33,310 --> 00:05:34,880
Do do do do.

75
00:05:35,050 --> 00:05:37,260
We are going to.

76
00:05:37,300 --> 00:05:37,690
OK.

77
00:05:37,720 --> 00:05:41,650
So let's come back to our first one here and zoom in a little bit.

78
00:05:41,980 --> 00:05:46,810
And for the system item let's go ahead and select play.

79
00:05:47,020 --> 00:05:51,390
Just to kind of be able to move from the view to view.

80
00:05:51,520 --> 00:05:52,240
It selected.

81
00:05:52,270 --> 00:05:58,720
And I'm going to control drag to our second view controller and I'm going to say show that we go.

82
00:05:58,720 --> 00:05:59,860
It looks good.

83
00:06:00,220 --> 00:06:06,650
And then what we need to change the aspect of the content mode on our second image here.

84
00:06:06,650 --> 00:06:12,840
So with this image selected here I'm going to say content mode is aspect feel there go.

85
00:06:12,970 --> 00:06:14,710
Very nice.

86
00:06:14,710 --> 00:06:19,000
All right so now let's get our third controller in here.

87
00:06:19,420 --> 00:06:21,110
You going to drop that right there.

88
00:06:21,520 --> 00:06:32,590
And we need our last image in case we get it there and we're going to say zero from the left top right

89
00:06:32,800 --> 00:06:36,880
and bottom right constrained to margins.

90
00:06:37,080 --> 00:06:42,420
And we're going to set the image to what was it called ocean ocean.

91
00:06:42,430 --> 00:06:43,000
There we go.

92
00:06:43,060 --> 00:06:52,210
So the content mode to Aspect fill it looks good and then we're going to need another button here and

93
00:06:52,210 --> 00:06:55,090
the navigation for our second view controller.

94
00:06:55,090 --> 00:07:01,040
But first what you got to do is you got to put in something called the navigation item.

95
00:07:01,380 --> 00:07:08,050
So you got to drag a navigation item in here and then we're going to need to we can set a title.

96
00:07:08,050 --> 00:07:10,270
I'm just going to delete it.

97
00:07:10,270 --> 00:07:11,220
There we go.

98
00:07:11,740 --> 00:07:18,890
And then we can put in a bar bar button item right here.

99
00:07:19,120 --> 00:07:20,660
So drop that in here.

100
00:07:20,980 --> 00:07:26,540
And again we're going to set the system item to play as we go.

101
00:07:26,830 --> 00:07:32,530
And then we're going to select it and control drag it to our third controller and say show all ready

102
00:07:32,560 --> 00:07:34,670
look and beautiful.

103
00:07:34,850 --> 00:07:37,930
Let's go ahead and run this and see how it looks going to run on iPhone.

104
00:07:38,020 --> 00:07:45,320
Plus which at the time of recording just barely came out I think today.

105
00:07:45,610 --> 00:07:50,000
So I was like saying go to the Apple store and check out the new iPhone AITs.

106
00:07:50,410 --> 00:07:50,620
All right.

107
00:07:50,620 --> 00:07:57,820
So here is our lovely app if we select Over here we can go to the next one space and the next one for

108
00:07:57,820 --> 00:08:05,860
the ocean and he's pictures by the way are from the Web site on Splash dot com where you can get high

109
00:08:05,860 --> 00:08:07,960
quality images for free.

110
00:08:07,960 --> 00:08:14,350
So now sponsorship or anything but just a great place to get images of you and you can check those out.

111
00:08:14,710 --> 00:08:16,750
All right so very cool.

112
00:08:16,750 --> 00:08:17,040
All right.

113
00:08:17,050 --> 00:08:25,710
So next up we need to do a few things here we need to add storyboard IDs to our view controllers.

114
00:08:25,710 --> 00:08:32,830
So with the story with the view controller selected coming here over here to the identity inspector

115
00:08:32,830 --> 00:08:42,180
and give it a storyboard ID and I'm going to call this first one the mountains or the sea and then we're

116
00:08:42,210 --> 00:08:44,890
going to select the second one.

117
00:08:45,220 --> 00:08:51,190
And for its storyboard idea even to say space visi.

118
00:08:51,880 --> 00:08:53,530
And for the last one

119
00:08:56,850 --> 00:09:02,840
want to select It's View Controller and give it a storyboard idea of ocean movies.

120
00:09:03,770 --> 00:09:08,100
And the reason for that is because we're going to instantiate these controllers from the Abdellah get

121
00:09:08,160 --> 00:09:09,980
a little bit later.

122
00:09:09,980 --> 00:09:13,190
All right so now we have our controllers here in the storyboard.

123
00:09:13,200 --> 00:09:21,210
Let's go ahead and create a couple of controller files for our for use here.

124
00:09:21,210 --> 00:09:21,460
All right.

125
00:09:21,470 --> 00:09:27,700
When I right click on the shortcut saying new file and I say Cocoa touch class and next.

126
00:09:27,810 --> 00:09:34,290
And you have your controller subclass and for this I'm going to say what's the SEC on space space.

127
00:09:34,330 --> 00:09:37,020
VC your controller.

128
00:09:37,050 --> 00:09:38,350
And that's good.

129
00:09:38,460 --> 00:09:40,420
And create.

130
00:09:41,020 --> 00:09:41,510
Go.

131
00:09:41,580 --> 00:09:44,330
Going to drag that up here by the other B control.

132
00:09:44,330 --> 00:09:52,800
When I right click again and say Not sure when finder right click again and see new file and Koca touch

133
00:09:52,800 --> 00:09:54,250
class next.

134
00:09:54,420 --> 00:09:58,510
And this one is called Ocean visi.

135
00:09:58,680 --> 00:10:04,590
I'm going to say next can create or I'm going to drag that up here.

136
00:10:04,950 --> 00:10:05,310
All right.

137
00:10:05,310 --> 00:10:11,790
So now we have this view controller that is just called view control I want to show you something cool

138
00:10:12,360 --> 00:10:14,610
new with X code 9 if you haven't seen it.

139
00:10:14,610 --> 00:10:16,400
We have re factoring finally.

140
00:10:16,440 --> 00:10:23,820
So if I select the view controller here I can right click and say refactor and rename and then all I

141
00:10:23,820 --> 00:10:28,610
got to do is rename it to what I want it and it will rename it everywhere that it needs to be renamed.

142
00:10:28,620 --> 00:10:33,620
So here I'm going to say mountains VC.

143
00:10:34,110 --> 00:10:45,120
You know and I renamed it here and rename the file name and renamed it Arisa that's the the the class

144
00:10:45,210 --> 00:10:46,420
here in storyboard.

145
00:10:46,430 --> 00:10:54,190
The only place it does and to rename it is here in the comment which I'm going to do just because mountains

146
00:10:54,380 --> 00:10:56,400
have DC area.

147
00:10:56,480 --> 00:10:59,370
All right so that's all taken care very nice.

148
00:10:59,370 --> 00:11:01,350
All right so let's go ahead and run this one more time.

149
00:11:01,350 --> 00:11:04,680
Just make sure everything is still working and looking good.

150
00:11:04,680 --> 00:11:06,080
All right.

151
00:11:06,270 --> 00:11:15,450
Select make sure app icon is there and it is very nice but if we hold down on it it's not doing anything

152
00:11:15,450 --> 00:11:16,240
right now.

153
00:11:16,350 --> 00:11:19,540
So we're going to start working on that in the next lesson.

154
00:11:19,710 --> 00:11:20,420
I'll see you at.