So you're probably wondering now how we're going to get this you button to have a nice circular look
to it.
And so I'm going to teach you how to do that before I do that though.
Let's go ahead and do some best practices here.
We're going to create a group for our model which actually in this app we won't have one but I just
kind of have a habit of doing this.
We need a view folder right click new group and a control or folder.
And so let's do some clean up here.
Whoops we don't want to add that inside the group we want it to be outside OK.
So models should be appear on the top.
Just this is the way I do it.
So the controller is going to go inside the controller folder.
There's really no model so we don't need that.
But inside you.
Let's go ahead and Right-Click new file and we want to create an Iowa us Cocco touch class that is going
to subclass you button.
And I'm going to call this let's call it circle button.
And we are sending it to the right place.
Yes click Create.
OK so we can get rid of this boilerplate code boilerplate code because we don't need it.
And inside of this we're going to actually set this up so that we can see the graphical update of the
round button within the main storyboard.
So we're going to do what's called IB desirable and IB inspectable.
So first go into your circle button class and do at IB inspectable var corner radius
of type CDF float equals thirty point zero.
And this is just basically setting up a variable that stores what we want the corner radius of our shape
to be and it's giving us an error here cannot call.
OK so let's just go ahead and get rid of that see if that helps.
No strange.
Let me see if after I add all of my stuff here if it helps.
OK.
So we're going to say layer corner radius equals corner radius.
And let's check to see what the deal is here.
Oh you know what I just realized in order to get IB inspectable to work we have to declare.
Did set and it's not always intuitive to understand that just right off the bat.
But it is mandatory.
OK there we go.
Beautiful and now our C.G. float is working properly.
So at Ivy inspectable var corner radius is 30 and we just set our corner radius here to do the right
thing.
So this is now set up as Iby inspectable.
What this does is it allows us in our storyboard to edit the corner radius of our button here but it'll
pop up right here as soon as we tell the interface builder that this button is a subclass of circle
button.
So go ahead and type circle button and watch what happens when we click back.
Now our corner radius here has shown up.
So if I add a corner radius of 15 when we build the gap this rectangle arming the square would have
a corner radius of 15.
But you know what we want to see it in Interface Builder.
So let's go back to our circle button class and we're going to add a couple of functions that will help
us do this.
One of them is prepare for Interface Builder.
And you know what we actually need all of this code in here too.
But we shouldn't repeat ourselves.
So I will create a function that we can just call twice so we don't have to write the code twice.
So create a function down below.
Prepare for Interface Builder called the funk.
Set up view just like this and inside of this we're actually going to paste this code and we're going
to drop it right in there.
Now we can just call set up view and inside of this one we can call set up you.
And now it can run the code in both spots without having to repeat ourselves.
Now the only thing that we need to do to make this show up in the interface builder is go up above our
class and type at IB desirable and check out what happens when we go back.
It'll take about a minute to process everything and you can see there we have a little spinning wheel
of doom.
But after a moment we'll close out of it and come back in and let's see if it likes us.
OK not yet.
Still processing still compiling.
Let's go up there and did you see it.
Awesome.
So now we have a circular button.
And the reason it is circular is because this button is 60 by 60 high meaning that in order to get it
to be round we need to give it a corner radius of 30.
So if you think about it the square is 60 high.
And if we round the corners 30 that goes right to the middle.
So since it's a square all of those corners rounded perfectly to four different spots and it makes a
perfect circle kind of a cool little hack to make a circle in Interface Builder.
So now we have a circular button.
We've got our UI built.
We're just forgetting one thing and that is the little spinning activity indicator.
So over there on the right search for an activity indicator and drop it down right here on your button.
Now this cannot be scaled on its own.
So we're going to need to give it some constraints to change its size.
So go ahead and click pin height and width and we're going to make it the same size as our button because
this is going to cover up our button while our audio is transcribing.
Go ahead and add those constraints.
And it's actually going to allow us to disable our button because it'll be in front of it so that we
can tap it again and call the transcription again.
OK so now that the size constraints are done let's go ahead and select it and then we're going to change
the style to large white and look at that looks pretty good.
Now of course it is not showing up the right way but that's OK because we are going to take a look and
see what the deal is here.
So it's telling us that our size class is not correct.
But if I change one of these it works 60 and 60.
OK.
So if it's doing what it just did for me just kind of move it around and change it and then edit it
and resave it and it will probably fix itself.
So center it right there on your nice round button and it can be over the top a bit because that's what
we want it to do.
But now we need to make sure this stays centered to this button and our button is already anchored.
So click on your activity indicator hold command and click your button and just give it the same horizontal
and vertical centers.
OK so there we go.
Let's go ahead and check this out.
In the preview to see how it looks on the device OK so it may not show up the right way here unless
after these files load Let's see if it actually is nice to us that way.
Regardless this looks great.
If this button is round I'm happy.
So let's go ahead and build it to a test device and see if it worked.
All right.
Hey hey there we go.
Looks good except our button is still not coming through the right way.
So let's go figure out why that is.
I see that in Interface Builder it's coming through properly.
Let's select that button and go in and make sure.
Maybe I should set our corner radius here to 30 as well so that it is absolutely getting a value.
Oh there we go that change that in Preview.
So now let's try building it one more time and see if that made a difference.
All right.
Good.
So just make sure that you do that.
Make sure that you go back and you actually add in the corner radius to the inspectable function there.