It's time to add a little custom this to our app, so let's open up the main DOT storyboard and this
contains the main screen of our app.
Now, we would like to add a simple button that allows us to turn the screen torch from blue to red
to blue to back again.
So how do we do that?
Well, if you look at the top right corner, there's a little plus icon.
And if you tap that, we get a list of objects that we can add.
And if you scroll up and down, you can see the various built-In UI elements.
Now, you're never going to need anything beyond this, at least for the first five, 10 years of your
development life.
Famous last words.
But, you know, I very rarely had to have anything custom.
I would say piece of advice here.
Don't go down the custom route for anything.
Try to keep it stock standard so your apps have a good shelf life.
Anyway, back to the task.
We have this button item here.
So if you just click and drag it, you can drop it onto your display and it gives you little handy alignment
lines.
So if you release the button, it is now aligned to those items, but it isn't yet fixed if you load
the app in this condition.
So I'm going to hit play.
I'm going to put this on the iPod Touch.
Let's see what happens to that build button.
I'm willing to bet that one of two things is going to happen.
That button is going to be exactly in the middle or the button is going to be in some weird position
or not even visible.
And as soon as it loads, I'm going to tell you why.
So here it comes, spending beachball.
There we go, right, because we have used a larger pixel density device, as in an iPhone.
What is this, the iPhone 11?
We've put it in the center of that because we haven't given it any alignment.
What happens is that it just puts that button in an absolute position.
So if you imagine an iPhone 11 compared to this iPod Touch, it would be much, much bigger, wider,
slightly wider and much taller pixel wise.
So, of course, the solution is to add some kind of reference to the button so it knows where to sit
in the display reference to the top bottom and the sides and also probably the size of button.
So if you look at the bottom right of the interface, editors are not the far right, but the bottom
right.
There are four little buttons that are highlighted and if you hover over them, it gives you add new
constraints and a line.
If we click a line, we can click horizontally, vertically and then click add to constraints.
And again, I'm sorry about the font size.
I have tried endlessly to change this.
If you search for change font size and Xcode, not the idy, then you'll see how many people are annoyed
at this anyway.
Now we've added these blue lines which aren't visible when you load the app, but if you click them,
they tell you what they are over in the top.
Right?
We're going from the center of the button.
Equal to the center of the super view, which is the background canvas of the view, and of course,
it's the same with the horizontal line.
Now, of course, you don't see these lines when the uploads, but the button will be dead center.
The other thing we're going to do is click the button and click the icon next to that one that says
add new constraints.
And if you tap that, you can space it to the nearest neighbor.
I'm going to unclick that or you can click width and height, so your button is a fixed width and height.
And if you look carefully, let's zoom in.
We have these little blue bars that tell you what height the button is.
And what with the battle is over in the top, right, you have the properties, so this is forty six.
Forty six what?
Well, it's not pixels because devices have different pixel densities.
Most apps, Android included, use device independent pixels, so it says, you know, this is supposed
to be four pixels and if the device says, but I have eight in that space, the device will allocate
eight to the button.
OK, so that's the button sorted and now if we play that, it doesn't matter what device we run it on.
It should be dead center now in the simulator.
You have some menu options up top, and what we would like to do is rotate the device.
So if you go to device, you can rotate left and look how it resists device rotate right and back we
go.
So that works perfectly.
In the simulator, you've learned how to constrain a button relative to the canvas it sits in and how
to constrain the width and height of the button.