1
00:00:07,180 --> 00:00:08,230
Everybody what's going on.

2
00:00:08,230 --> 00:00:10,390
This is Kayla with slopes dot com.

3
00:00:10,390 --> 00:00:15,670
And in this video we're going to build out the user interface for a workout Visi that's actually the

4
00:00:15,670 --> 00:00:21,430
screen that you saw in the demo of the app with just the photo and the blurred view and the labels that

5
00:00:21,430 --> 00:00:23,710
show the work out information on the screen.

6
00:00:23,740 --> 00:00:29,290
So we're going to go ahead and get started by pulling open X code creating a new X code project and

7
00:00:29,350 --> 00:00:31,330
we need to give it a good name.

8
00:00:31,330 --> 00:00:35,720
So click single view app and for the product name let's name this.

9
00:00:35,740 --> 00:00:37,590
Well how about leg day.

10
00:00:37,600 --> 00:00:42,060
That sounds fun and make it all caps just for fun so it's a trendy kind of Nike style anyway.

11
00:00:42,070 --> 00:00:45,730
And then I'll click next and I'm going to save it to my desktop.

12
00:00:45,730 --> 00:00:47,670
Why not cool.

13
00:00:47,680 --> 00:00:49,700
So let's go ahead and pull it open here.

14
00:00:49,720 --> 00:00:52,580
I'm going to just unstick landscape left and right just for now.

15
00:00:52,840 --> 00:00:55,680
So we don't have to deal with any of that rotation stuff.

16
00:00:55,870 --> 00:00:59,420
And now I'm going to go into maned storyboard.

17
00:00:59,910 --> 00:01:04,150
But you know well you know what before I do that let's actually change the name of the controller to

18
00:01:04,150 --> 00:01:11,140
say work out VC and let's actually go ahead and update that in all the appropriate places like in the

19
00:01:11,140 --> 00:01:14,370
file there as well as in main storyboard.

20
00:01:14,380 --> 00:01:17,170
We're going to say workout C instead.

21
00:01:17,200 --> 00:01:22,330
So we don't get a crash and now we actually need to drag in the asset.

22
00:01:22,330 --> 00:01:28,090
The photo of the person jogging from the assets folder and if you did not download the source code check

23
00:01:28,090 --> 00:01:30,760
out the first video and you can click on the download button.

24
00:01:30,760 --> 00:01:37,660
There's a little folder with a download icon and drag in that asset to assets Doxey assets.

25
00:01:37,720 --> 00:01:40,180
So let's go ahead and put it in right there.

26
00:01:40,240 --> 00:01:45,590
Run a j peg and it's just simply a photo of someone jogging down a road.

27
00:01:45,610 --> 00:01:46,530
I guess I don't know.

28
00:01:46,740 --> 00:01:52,240
It just seemed cool like one of those you know trendy like moving them going places kind of photos.

29
00:01:52,240 --> 00:01:54,530
So anyway back to my story board.

30
00:01:54,550 --> 00:02:01,570
Let's go ahead and drag a UI image view into the frame and we're going to go ahead and snap it so that

31
00:02:01,570 --> 00:02:03,890
it fits the entire view.

32
00:02:04,120 --> 00:02:08,430
And let's go ahead and pin it like so with zero on all sides.

33
00:02:08,650 --> 00:02:14,020
Add those constraints and now we can actually set the image in the attributes Inspektor by selecting

34
00:02:14,020 --> 00:02:14,960
run.

35
00:02:15,220 --> 00:02:17,630
And then we need to choose aspect fill.

36
00:02:17,750 --> 00:02:18,200
Okay.

37
00:02:18,280 --> 00:02:21,200
And that way it's not stretched out or looking funny.

38
00:02:21,220 --> 00:02:26,830
So awesome that is now in place but I want to make a nice little blurb view in the center where our

39
00:02:26,830 --> 00:02:27,930
text is going to go.

40
00:02:27,940 --> 00:02:30,630
So go ahead and type UI blur.

41
00:02:31,060 --> 00:02:34,970
Or maybe it's UI effect visual view.

42
00:02:35,650 --> 00:02:36,230
Maybe not.

43
00:02:36,250 --> 00:02:36,550
Oh yeah.

44
00:02:36,560 --> 00:02:37,900
A visual effect you with Blur.

45
00:02:37,900 --> 00:02:38,930
I had the words backwards.

46
00:02:39,130 --> 00:02:44,890
So it dragged this in and as you can see it makes a nice blurry view right on our screen which is pretty

47
00:02:44,890 --> 00:02:45,910
cool.

48
00:02:45,910 --> 00:02:51,500
So we're going to go ahead and set a height for this and then also stretch it to the left and right

49
00:02:52,180 --> 00:02:56,140
and we're going to use this as the house for our labels.

50
00:02:56,140 --> 00:03:01,020
So let's go ahead and pin zero from the left and right and give it a fixed height.

51
00:03:01,030 --> 00:03:02,960
Let's do two fifty.

52
00:03:03,490 --> 00:03:04,270
Yeah.

53
00:03:04,480 --> 00:03:08,920
And now we need to center it vertically in the container and that will allow the height constraint to

54
00:03:08,920 --> 00:03:09,940
properly work.

55
00:03:10,180 --> 00:03:12,880
And now that staying put it will stay in place.

56
00:03:13,030 --> 00:03:17,170
And now we just need to add in some text labels and then wire them up with outlets.

57
00:03:17,170 --> 00:03:19,760
So go ahead and search for a UI label.

58
00:03:20,080 --> 00:03:26,470
Drag it on like so beautiful and I'm going to actually just copy and paste this a few times so we get

59
00:03:26,470 --> 00:03:27,700
four labels.

60
00:03:27,970 --> 00:03:32,570
And the reason for that is because we need it to say Leg day workout app.

61
00:03:32,650 --> 00:03:37,930
Then this label will be to display the type of workout and this will be to display the time remaining

62
00:03:37,930 --> 00:03:38,790
in the workout.

63
00:03:39,070 --> 00:03:46,360
So let's go ahead and let's update that to say Leg day workout app and don't worry we're going to change

64
00:03:46,360 --> 00:03:47,860
the font and the style.

65
00:03:47,860 --> 00:03:56,390
This will be type type and this will be well just for now 0 0 0.

66
00:03:56,530 --> 00:03:59,230
So now that we have all the words updated.

67
00:03:59,230 --> 00:04:04,810
Let's go ahead and select all of these and put them into a stack view then we're going to go ahead and

68
00:04:04,810 --> 00:04:10,240
select all the labels and center their font and then we're going to go ahead and go back to the stack

69
00:04:10,240 --> 00:04:11,990
view and change it to fill.

70
00:04:12,280 --> 00:04:13,590
Awesome.

71
00:04:13,660 --> 00:04:15,340
So now let's center the stack.

72
00:04:15,350 --> 00:04:21,880
You and let's go ahead and let's pin this 20 from the top 20 from the right 20 from the left and 20

73
00:04:21,880 --> 00:04:23,830
from the bottom k.

74
00:04:24,210 --> 00:04:26,430
So that will give us some nice spacing there.

75
00:04:26,440 --> 00:04:32,700
But we definitely should be making these a little bit nicer looking.

76
00:04:32,710 --> 00:04:36,250
So I'm going actually up the font size here for all of these.

77
00:04:36,340 --> 00:04:40,710
I'm going to change them all to be Avenir next like so.

78
00:04:41,050 --> 00:04:46,310
And let's go ahead and bump the size up to at least 24 and let's make them all.

79
00:04:46,340 --> 00:04:49,860
Demi bulled k now.

80
00:04:49,890 --> 00:04:51,210
Leg day is the logo.

81
00:04:51,210 --> 00:04:57,690
So it's actually going to be much bigger maybe 56 and I'm actually going to make this heavy like so

82
00:04:58,560 --> 00:05:07,000
then for workout app that I guess could be a little bigger like so yeah maybe like that.

83
00:05:07,000 --> 00:05:08,490
What is that size 30.

84
00:05:08,740 --> 00:05:12,780
Let's do 30 K and then type and time.

85
00:05:12,790 --> 00:05:14,830
Those are fine but they need to be a different color.

86
00:05:14,830 --> 00:05:17,300
So I set type to be blue.

87
00:05:17,560 --> 00:05:20,920
Just for fun and I set time to be green.

88
00:05:21,220 --> 00:05:21,760
OK.

89
00:05:21,970 --> 00:05:26,650
Now leg day and work out up the dark dark dark colors pretty intense.

90
00:05:26,650 --> 00:05:32,830
So I think I actually said it to be kind of like a dark gray like so just so it doesn't look so sharp

91
00:05:32,830 --> 00:05:34,190
and so intense.

92
00:05:34,310 --> 00:05:40,790
And now I want to actually go ahead and spaced these out a little bit like maybe 10 10 points of space.

93
00:05:40,810 --> 00:05:45,730
Now if I select these and I try to delete them you see that it actually kind of gets a little messed

94
00:05:45,730 --> 00:05:46,140
up looking.

95
00:05:46,150 --> 00:05:48,870
These should be centered right in the middle of the screen.

96
00:05:48,990 --> 00:05:54,310
And so I think I'm going to actually have to remove the top and bottom constraints from this to see

97
00:05:54,310 --> 00:05:56,330
if that fixes the problem.

98
00:05:56,830 --> 00:06:01,070
And if I get rid of it you'll see that it has a fixed height at the moment.

99
00:06:01,090 --> 00:06:04,540
But if I get rid of these Watch what happens the height goes down.

100
00:06:04,540 --> 00:06:09,490
But it's no longer in the center so we need to go ahead and pin it vertically in the container like

101
00:06:09,490 --> 00:06:10,220
so.

102
00:06:10,390 --> 00:06:13,300
And then when these are in there.

103
00:06:13,450 --> 00:06:14,740
Oh you know what I just undid that.

104
00:06:14,740 --> 00:06:15,850
Let me do that again.

105
00:06:16,000 --> 00:06:19,460
It horizontally I mean vertically in the container.

106
00:06:19,510 --> 00:06:24,240
And now if one of these gets deleted you'll see it goes right to the center it snaps beautifully.

107
00:06:24,250 --> 00:06:28,480
And so what we're going to do is we're actually going to hide these from the get go and then show them

108
00:06:28,720 --> 00:06:30,020
when there's an actual work out.

109
00:06:30,040 --> 00:06:35,490
And so it'll automatically slide and do really cool things automatically which is very nice.

110
00:06:35,500 --> 00:06:41,800
So that is that we could I guess do feel equally but the way that we're doing it ensures that the spacing

111
00:06:41,800 --> 00:06:45,420
will be the same regardless of if this is at the top or bottom.

112
00:06:45,760 --> 00:06:49,520
So now we need to go ahead and set up some Iby outlets.

113
00:06:49,540 --> 00:06:54,760
So pull open the assistant editor here and let's go ahead and right click and drag from the type label

114
00:06:54,790 --> 00:06:57,290
and name it type label.

115
00:06:57,750 --> 00:07:06,140
OK I guess we could have said work out type label but whatever this one is going to be the timer label.

116
00:07:06,550 --> 00:07:09,490
And those are both exactly where they should be.

117
00:07:09,490 --> 00:07:13,900
Now from the get go in view to load We're actually going to go ahead and hide them.

118
00:07:14,140 --> 00:07:23,890
So go ahead and type type label that is hidden equals true and timer label timer label that is hidden

119
00:07:24,340 --> 00:07:25,670
equals true.

120
00:07:25,780 --> 00:07:29,210
And so those should not be visible when we first run the app.

121
00:07:29,230 --> 00:07:35,070
So I don't know about you but I want to go ahead and see how are you I looks on an iPhone 8 simulator

122
00:07:35,080 --> 00:07:38,060
so let's build and run it and let's see how it looks.

123
00:07:38,080 --> 00:07:44,270
The two labels here should be totally hidden and then after we verify that our UI is good we're going

124
00:07:44,270 --> 00:07:50,320
to move on to the next video where we essentially set up enabling Siri and requesting the proper permissions

125
00:07:50,530 --> 00:07:54,150
to use Siri in our application there are a couple of things that we got to do.

126
00:07:54,160 --> 00:07:55,980
So let's see how are you looks.

127
00:07:55,990 --> 00:07:58,160
And then we will move on that way.

128
00:08:01,230 --> 00:08:03,130
Right here we go opening up leg day.

129
00:08:03,150 --> 00:08:10,270
Let's see how we look Ooh look at that nice and centered nice and pretty.

130
00:08:10,320 --> 00:08:13,500
Let's see what it looks like if these are not hidden.

131
00:08:13,800 --> 00:08:15,790
Build and run it and take a look.

132
00:08:18,910 --> 00:08:23,820
Here we go building to the device pulling open.

133
00:08:23,950 --> 00:08:24,390
Look at that.

134
00:08:24,400 --> 00:08:25,180
OK so awesome.

135
00:08:25,180 --> 00:08:31,000
These stay exactly the same spacing regardless of where they are but definitely go ahead and uncomment

136
00:08:31,000 --> 00:08:34,360
that because we don't want our time and type to show unless we have one.

137
00:08:34,360 --> 00:08:36,340
So go ahead and uncomment that.

138
00:08:36,360 --> 00:08:37,470
And great job guys.

139
00:08:37,480 --> 00:08:42,760
Let's head over to the next video where we're going to enable Siri access and request the proper permissions

140
00:08:42,910 --> 00:08:44,160
to even use Siri.

141
00:08:44,170 --> 00:08:47,060
So let's head over that video and let's do it now.