1
00:00:07,350 --> 00:00:14,520
So you're probably wondering now how we're going to get this you button to have a nice circular look

2
00:00:14,520 --> 00:00:14,960
to it.

3
00:00:14,970 --> 00:00:18,210
And so I'm going to teach you how to do that before I do that though.

4
00:00:18,210 --> 00:00:21,440
Let's go ahead and do some best practices here.

5
00:00:21,450 --> 00:00:26,550
We're going to create a group for our model which actually in this app we won't have one but I just

6
00:00:26,550 --> 00:00:28,390
kind of have a habit of doing this.

7
00:00:28,590 --> 00:00:35,490
We need a view folder right click new group and a control or folder.

8
00:00:35,490 --> 00:00:37,210
And so let's do some clean up here.

9
00:00:37,240 --> 00:00:43,410
Whoops we don't want to add that inside the group we want it to be outside OK.

10
00:00:43,690 --> 00:00:46,160
So models should be appear on the top.

11
00:00:46,290 --> 00:00:47,860
Just this is the way I do it.

12
00:00:47,890 --> 00:00:52,620
So the controller is going to go inside the controller folder.

13
00:00:52,930 --> 00:00:54,750
There's really no model so we don't need that.

14
00:00:54,760 --> 00:00:56,290
But inside you.

15
00:00:56,320 --> 00:01:03,340
Let's go ahead and Right-Click new file and we want to create an Iowa us Cocco touch class that is going

16
00:01:03,340 --> 00:01:05,350
to subclass you button.

17
00:01:05,650 --> 00:01:09,010
And I'm going to call this let's call it circle button.

18
00:01:10,790 --> 00:01:13,020
And we are sending it to the right place.

19
00:01:13,040 --> 00:01:15,550
Yes click Create.

20
00:01:15,590 --> 00:01:21,570
OK so we can get rid of this boilerplate code boilerplate code because we don't need it.

21
00:01:21,830 --> 00:01:29,060
And inside of this we're going to actually set this up so that we can see the graphical update of the

22
00:01:29,060 --> 00:01:32,180
round button within the main storyboard.

23
00:01:32,180 --> 00:01:35,970
So we're going to do what's called IB desirable and IB inspectable.

24
00:01:36,320 --> 00:01:44,770
So first go into your circle button class and do at IB inspectable var corner radius

25
00:01:47,440 --> 00:01:51,900
of type CDF float equals thirty point zero.

26
00:01:52,440 --> 00:01:58,350
And this is just basically setting up a variable that stores what we want the corner radius of our shape

27
00:01:58,380 --> 00:02:02,120
to be and it's giving us an error here cannot call.

28
00:02:02,340 --> 00:02:07,990
OK so let's just go ahead and get rid of that see if that helps.

29
00:02:08,000 --> 00:02:10,090
No strange.

30
00:02:10,090 --> 00:02:13,700
Let me see if after I add all of my stuff here if it helps.

31
00:02:13,720 --> 00:02:13,980
OK.

32
00:02:13,990 --> 00:02:25,300
So we're going to say layer corner radius equals corner radius.

33
00:02:25,390 --> 00:02:27,720
And let's check to see what the deal is here.

34
00:02:30,990 --> 00:02:36,210
Oh you know what I just realized in order to get IB inspectable to work we have to declare.

35
00:02:36,210 --> 00:02:42,030
Did set and it's not always intuitive to understand that just right off the bat.

36
00:02:42,420 --> 00:02:43,470
But it is mandatory.

37
00:02:43,480 --> 00:02:44,310
OK there we go.

38
00:02:44,310 --> 00:02:47,220
Beautiful and now our C.G. float is working properly.

39
00:02:47,410 --> 00:02:54,210
So at Ivy inspectable var corner radius is 30 and we just set our corner radius here to do the right

40
00:02:54,210 --> 00:02:55,270
thing.

41
00:02:55,290 --> 00:02:58,720
So this is now set up as Iby inspectable.

42
00:02:58,890 --> 00:03:07,620
What this does is it allows us in our storyboard to edit the corner radius of our button here but it'll

43
00:03:07,620 --> 00:03:15,360
pop up right here as soon as we tell the interface builder that this button is a subclass of circle

44
00:03:15,360 --> 00:03:15,630
button.

45
00:03:15,630 --> 00:03:20,700
So go ahead and type circle button and watch what happens when we click back.

46
00:03:20,700 --> 00:03:22,470
Now our corner radius here has shown up.

47
00:03:22,470 --> 00:03:30,140
So if I add a corner radius of 15 when we build the gap this rectangle arming the square would have

48
00:03:30,140 --> 00:03:31,870
a corner radius of 15.

49
00:03:32,240 --> 00:03:35,800
But you know what we want to see it in Interface Builder.

50
00:03:35,810 --> 00:03:42,320
So let's go back to our circle button class and we're going to add a couple of functions that will help

51
00:03:42,320 --> 00:03:43,230
us do this.

52
00:03:43,250 --> 00:03:46,430
One of them is prepare for Interface Builder.

53
00:03:47,120 --> 00:03:51,430
And you know what we actually need all of this code in here too.

54
00:03:51,650 --> 00:03:53,270
But we shouldn't repeat ourselves.

55
00:03:53,330 --> 00:03:58,340
So I will create a function that we can just call twice so we don't have to write the code twice.

56
00:03:58,370 --> 00:04:00,120
So create a function down below.

57
00:04:00,120 --> 00:04:02,640
Prepare for Interface Builder called the funk.

58
00:04:02,930 --> 00:04:11,320
Set up view just like this and inside of this we're actually going to paste this code and we're going

59
00:04:11,320 --> 00:04:13,720
to drop it right in there.

60
00:04:14,110 --> 00:04:19,310
Now we can just call set up view and inside of this one we can call set up you.

61
00:04:19,780 --> 00:04:24,540
And now it can run the code in both spots without having to repeat ourselves.

62
00:04:24,550 --> 00:04:29,500
Now the only thing that we need to do to make this show up in the interface builder is go up above our

63
00:04:29,500 --> 00:04:36,050
class and type at IB desirable and check out what happens when we go back.

64
00:04:36,170 --> 00:04:41,060
It'll take about a minute to process everything and you can see there we have a little spinning wheel

65
00:04:41,060 --> 00:04:41,590
of doom.

66
00:04:41,660 --> 00:04:47,500
But after a moment we'll close out of it and come back in and let's see if it likes us.

67
00:04:47,510 --> 00:04:48,240
OK not yet.

68
00:04:48,290 --> 00:04:51,140
Still processing still compiling.

69
00:04:51,200 --> 00:04:53,250
Let's go up there and did you see it.

70
00:04:53,690 --> 00:04:54,440
Awesome.

71
00:04:54,440 --> 00:04:56,470
So now we have a circular button.

72
00:04:56,780 --> 00:05:04,700
And the reason it is circular is because this button is 60 by 60 high meaning that in order to get it

73
00:05:04,700 --> 00:05:08,480
to be round we need to give it a corner radius of 30.

74
00:05:08,600 --> 00:05:12,200
So if you think about it the square is 60 high.

75
00:05:12,320 --> 00:05:16,220
And if we round the corners 30 that goes right to the middle.

76
00:05:16,280 --> 00:05:21,800
So since it's a square all of those corners rounded perfectly to four different spots and it makes a

77
00:05:21,800 --> 00:05:26,060
perfect circle kind of a cool little hack to make a circle in Interface Builder.

78
00:05:26,210 --> 00:05:28,310
So now we have a circular button.

79
00:05:28,520 --> 00:05:30,080
We've got our UI built.

80
00:05:30,080 --> 00:05:34,780
We're just forgetting one thing and that is the little spinning activity indicator.

81
00:05:34,820 --> 00:05:42,450
So over there on the right search for an activity indicator and drop it down right here on your button.

82
00:05:42,510 --> 00:05:45,250
Now this cannot be scaled on its own.

83
00:05:45,290 --> 00:05:49,220
So we're going to need to give it some constraints to change its size.

84
00:05:49,250 --> 00:05:55,640
So go ahead and click pin height and width and we're going to make it the same size as our button because

85
00:05:55,640 --> 00:05:59,020
this is going to cover up our button while our audio is transcribing.

86
00:05:59,240 --> 00:06:00,780
Go ahead and add those constraints.

87
00:06:00,980 --> 00:06:07,400
And it's actually going to allow us to disable our button because it'll be in front of it so that we

88
00:06:07,400 --> 00:06:10,790
can tap it again and call the transcription again.

89
00:06:11,150 --> 00:06:16,940
OK so now that the size constraints are done let's go ahead and select it and then we're going to change

90
00:06:16,940 --> 00:06:23,070
the style to large white and look at that looks pretty good.

91
00:06:23,910 --> 00:06:31,080
Now of course it is not showing up the right way but that's OK because we are going to take a look and

92
00:06:31,080 --> 00:06:32,780
see what the deal is here.

93
00:06:33,030 --> 00:06:37,070
So it's telling us that our size class is not correct.

94
00:06:37,380 --> 00:06:40,390
But if I change one of these it works 60 and 60.

95
00:06:40,600 --> 00:06:41,150
OK.

96
00:06:42,040 --> 00:06:48,310
So if it's doing what it just did for me just kind of move it around and change it and then edit it

97
00:06:48,550 --> 00:06:51,790
and resave it and it will probably fix itself.

98
00:06:51,790 --> 00:06:57,730
So center it right there on your nice round button and it can be over the top a bit because that's what

99
00:06:57,730 --> 00:06:58,960
we want it to do.

100
00:06:59,200 --> 00:07:03,960
But now we need to make sure this stays centered to this button and our button is already anchored.

101
00:07:04,150 --> 00:07:11,020
So click on your activity indicator hold command and click your button and just give it the same horizontal

102
00:07:11,020 --> 00:07:12,700
and vertical centers.

103
00:07:12,830 --> 00:07:14,800
OK so there we go.

104
00:07:15,070 --> 00:07:16,090
Let's go ahead and check this out.

105
00:07:16,090 --> 00:07:26,050
In the preview to see how it looks on the device OK so it may not show up the right way here unless

106
00:07:26,140 --> 00:07:29,990
after these files load Let's see if it actually is nice to us that way.

107
00:07:30,550 --> 00:07:32,020
Regardless this looks great.

108
00:07:32,020 --> 00:07:34,060
If this button is round I'm happy.

109
00:07:34,120 --> 00:07:50,030
So let's go ahead and build it to a test device and see if it worked.

110
00:07:50,050 --> 00:07:50,810
All right.

111
00:07:50,810 --> 00:07:52,400
Hey hey there we go.

112
00:07:52,400 --> 00:07:56,930
Looks good except our button is still not coming through the right way.

113
00:07:57,170 --> 00:07:59,680
So let's go figure out why that is.

114
00:07:59,840 --> 00:08:03,290
I see that in Interface Builder it's coming through properly.

115
00:08:03,530 --> 00:08:07,150
Let's select that button and go in and make sure.

116
00:08:07,640 --> 00:08:13,390
Maybe I should set our corner radius here to 30 as well so that it is absolutely getting a value.

117
00:08:13,550 --> 00:08:15,540
Oh there we go that change that in Preview.

118
00:08:15,680 --> 00:08:19,970
So now let's try building it one more time and see if that made a difference.

119
00:08:28,720 --> 00:08:29,080
All right.

120
00:08:29,110 --> 00:08:29,350
Good.

121
00:08:29,350 --> 00:08:30,920
So just make sure that you do that.

122
00:08:30,940 --> 00:08:36,330
Make sure that you go back and you actually add in the corner radius to the inspectable function there.