1
00:00:08,040 --> 00:00:09,460
Hey everybody what's going on.

2
00:00:09,460 --> 00:00:15,060
Caleb with slopes dot com and in this video we're going to build out the user interface for our Rick's

3
00:00:15,160 --> 00:00:16,040
name or app.

4
00:00:16,060 --> 00:00:21,640
So go ahead and pull open your X code project just like we left it in the last video and we're going

5
00:00:21,640 --> 00:00:27,350
to go ahead and actually get rid of did receive memory warning and open up Main storyboard.

6
00:00:27,630 --> 00:00:28,230
OK.

7
00:00:28,540 --> 00:00:35,050
So go ahead and click on the background view here and click on the attributes and specter like so and

8
00:00:35,050 --> 00:00:36,880
we're going to change the background.

9
00:00:36,910 --> 00:00:43,410
I use this green color which if you want to know it's six dbspace C6 three right there.

10
00:00:43,720 --> 00:00:45,220
And you can use that if you want.

11
00:00:45,220 --> 00:00:48,670
You can use a different color you could use an image view whatever you want.

12
00:00:48,670 --> 00:00:49,730
It's up to you.

13
00:00:49,900 --> 00:00:54,290
But now what we're going to do is we're going to drag on a couple UI labels.

14
00:00:54,430 --> 00:00:55,870
Textfield and a button.

15
00:00:55,870 --> 00:01:02,650
So go ahead and type UI label and we're going to need one on top to display the message type your name

16
00:01:02,650 --> 00:01:03,340
below.

17
00:01:03,550 --> 00:01:09,650
We're going to need one below to say names and then one to also hold all the names.

18
00:01:09,790 --> 00:01:16,450
Then we're going to need a UI textfield will drag that unlike so and then beneath that we're going to

19
00:01:16,450 --> 00:01:20,670
need a UI button and drag that on blow like so.

20
00:01:20,740 --> 00:01:25,340
Now the reason I'm doing this is we're going to put these into a stacked view.

21
00:01:25,360 --> 00:01:29,610
So go ahead and drag to select them all and click the stack button.

22
00:01:29,860 --> 00:01:31,100
Beautiful.

23
00:01:31,100 --> 00:01:38,140
So now what we want to do is we're going to go ahead and pin this 120 from the top and let's go 20 from

24
00:01:38,140 --> 00:01:38,930
the left.

25
00:01:38,930 --> 00:01:40,430
Whoops that's not 20.

26
00:01:40,510 --> 00:01:41,690
We're going to go 20.

27
00:01:41,710 --> 00:01:43,540
From the left 20 from the right.

28
00:01:43,570 --> 00:01:47,900
And let's give it a fixed height of 250 K.

29
00:01:47,920 --> 00:01:50,610
Press enter or click add four constraints.

30
00:01:50,620 --> 00:01:52,710
And as you can see we're having some trouble here.

31
00:01:52,720 --> 00:02:01,630
So we're going to change the text or not text fields but the labels here to be center oriented.

32
00:02:01,780 --> 00:02:07,930
We're also going to change their font to custom and then change the family to Avenir next.

33
00:02:07,930 --> 00:02:08,590
OK.

34
00:02:08,990 --> 00:02:09,840
That's pretty cool.

35
00:02:09,850 --> 00:02:13,330
And let's bump it up to size 20 maybe 18.

36
00:02:13,540 --> 00:02:14,810
Yeah 18 is better.

37
00:02:14,890 --> 00:02:22,600
And let's set the color to be white like so then on the button we want to scroll down and set the background

38
00:02:22,600 --> 00:02:24,400
color of the button to be white.

39
00:02:24,760 --> 00:02:30,730
And we're going to go ahead and set the text color to be Green K but we should change it from the system

40
00:02:30,730 --> 00:02:34,670
font which is ugly to Avenir next which is pretty.

41
00:02:34,810 --> 00:02:36,770
So change it to size 18.

42
00:02:36,790 --> 00:02:44,920
And then instead of being regular let's use dummy bold K and change the button text to say submit in

43
00:02:44,920 --> 00:02:45,970
all caps.

44
00:02:46,060 --> 00:02:47,590
That just looks cool.

45
00:02:47,590 --> 00:02:53,560
Now of course our textfield is really stretched out and I actually remove the background color in my

46
00:02:53,560 --> 00:02:56,720
app and just replaced it with clear color.

47
00:02:57,160 --> 00:02:58,870
And we're going to keep the same border.

48
00:02:58,870 --> 00:03:01,920
We're going to change the font from system to custom.

49
00:03:01,960 --> 00:03:07,650
The family will be Avenir next size 18 and regular's fine.

50
00:03:07,930 --> 00:03:15,710
Let's go ahead and center this and set some placeholder text that says enter your name dot dot dot.

51
00:03:15,800 --> 00:03:16,560
All right.

52
00:03:16,570 --> 00:03:22,330
And that's fine and dandy but we need to make sure that this is not as giant as it is.

53
00:03:22,330 --> 00:03:26,950
And so I'm actually going to put some spacing between each element 20 to be exact.

54
00:03:27,010 --> 00:03:29,710
And as you can see it spaces out much better.

55
00:03:29,710 --> 00:03:30,760
Looks a lot nicer.

56
00:03:30,760 --> 00:03:39,830
So for this label go ahead and type a default message of type your name below just like that.

57
00:03:39,880 --> 00:03:46,180
And then these labels can be changed to say names and nothing's going to happen to this label and this

58
00:03:46,180 --> 00:03:51,760
label we actually can go ahead and clear out and press ENTER that's going to be empty from the beginning.

59
00:03:51,760 --> 00:03:56,470
So now that we have done this we can go ahead and let me see if I can zoom in at all.

60
00:03:56,490 --> 00:03:57,820
I don't think it will let me.

61
00:03:57,850 --> 00:03:58,060
OK.

62
00:03:58,070 --> 00:04:02,420
Anyway we're going to go ahead and set up some Iby outlets for this.

63
00:04:02,440 --> 00:04:09,370
So go ahead and click on the assistant editor and all we need to do is right click from each of these

64
00:04:09,550 --> 00:04:10,810
and create an IB outlet.

65
00:04:10,810 --> 00:04:18,850
So this is going to be hello label because we'll say hello and then match it to whatever name is there.

66
00:04:18,850 --> 00:04:27,040
We're going to right click and drag and make this baby name and tree text field and make sure you connect

67
00:04:27,030 --> 00:04:27,910
it.

68
00:04:28,000 --> 00:04:30,100
This will be a button.

69
00:04:30,100 --> 00:04:31,450
So we're going to make it an outlet.

70
00:04:31,450 --> 00:04:34,050
We'll just call this submit button.

71
00:04:34,570 --> 00:04:37,400
Then this one we're going to ignore because we never change it.

72
00:04:37,420 --> 00:04:43,300
But the one beneath that is where we're going to go ahead and create another outlet and call this names

73
00:04:43,300 --> 00:04:45,680
label just like that.

74
00:04:45,800 --> 00:04:47,560
OK that's pretty easy.

75
00:04:47,560 --> 00:04:54,970
And now we have our UI totally built that that was pretty easy rider told you this app is not very complicated

76
00:04:55,530 --> 00:05:01,970
but it was the whole point is this to show you how to use our X. swift with certain UI elements.

77
00:05:01,970 --> 00:05:07,350
OK there are some really helpful things we can do and we're going to dive into that in the very next

78
00:05:07,560 --> 00:05:12,280
video so let's go ahead and head over that way now and we're going to start coding this app using our

79
00:05:12,350 --> 00:05:14,340
swift and our X cocoa Acia they're.