Play again in this lesson we will talk about the Interface Builder.
This is essentially where you build the visual elements of your application.
Now if you exclude project most probably has a visual side such as this file main that the storyboard
in this client application does not to say that every application must have a storyboard but it is most
likely that you will see a storyboard file.
In most of your application.
So let's get start with that.
I'm going to select.
I'm actually going to maximize this view so it shows me a view controller which is the same proportions
as an iPhone.
Now what a view control in a specific is or what is this hierarchy of different elements.
We'll get to that at some other time when we talk more in-depth about our different part of this storyboard.
Now for now all I want to do is I want to be able to either one or two elements to my storyboard or
to this viewer essentially.
Now depending on the version of I was for X code that you're using you might be seeing your elements
either down in here or you will see a little button up here called the library.
So when I click on this library it shows me a set of different objects that they could be adding to
my to my view controller.
So the school had the library or if you have an older version of Estcourt down here on the utility window
I'm going to look for an outlet called a label somewhere right in here.
And what I just it in a way that it sits nice and tidy on the top.
I mean a little bit.
Right.
So I get like that maybe place it in here.
That I'm going to go on the street even though I'm going to go to the attributes.
Inspector This is what I see that the friend attributes of the currently selected element.
So if we select different things you will obviously see different attributes.
So I'm going to select my label and save my label it actually says hello.
And also it's text is the line to the center is a lot larger and larger font and then down in here I'm
going to say Give me a background color and I'm going to use a custom color such as an orange kind of
I don't know if these things really matter or just play around with them for a little bit to spend some
time just to get a sense of some of them.
Some of them are quite you know easily understandable.
These are the text lines or the color of the text.
Some of them might be a little bit more complicated and we will get to them at some point and be talking
more in-depth about different parts of the outlets.
Now I have this one to one more in here.
Let's say another label.
When I see it with the first one.
And as you have guessed it but of course we're right ward in the second one.
That's a very common practice when you're learning your programming language or your learning you know
development.
So if you write a hello world.
Let me just make this a little bit even larger.
I have a banging on colors such as some sort of green back on something like that.
So that's my application.
It only shows me these two things saying hello world in an interface.
And the next thing I have to do is I have to run this application or essentially compile this application.
That is a process from going from this interface X code interface to an actual iPhone device and be
compiled things.
So to do that they have to press this little by then that is better than wrong.
But before I do that them zoom into them a little bit so we know what I'm talking about this one which
is like a play button essentially build and run the current scheme.
Before I do that I want to mention something quite important to you guys.
IPhone has many different variations.
Do you have iPhone 8 which is the current one in here I'm using.
You have the iPhone 8 plus which is a little bit larger and you have the iPhone 10.
And of course you have the smaller iPhone with the older iPhones now something to keep in mind is that
when you switch from one iPhone to the other one your outlets may not necessarily look the same.
Right.
Right now I have left a similar margin to the left and to the right.
But the moment they switch to the iPhone plus that changes of course down the track we learn different
ways of managing that.
Most notably using the auto layout out constraints.
But for now I want to suggest something that is change your of you to be on iPhone 8.
So you design everything as if you're working for an iPhone 8.
No obligation and change your simulator to iPhone 8 as well and make sure that they're both exactly
the same thing.
If you do that that makes sure that whatever the design in here exactly identically mirrors on the simulator
and this way you don't need to worry about things such as placing the outlets for different devices
or assigning constraints and worrying about or to lay out our models or such.
David keep those for the Section 4 to lay out comes up in a while now.
So with that in mind we can go ahead and simulate our application.
Now if I place the simulate it should take a little while and it should run the Iowa simulator only
to show me this application.
I must mention that there is a chance that this will not work for you and I will tell you how to fix
it in the next lesson.
So if this thing you know you press the play and run on it took a while but this interface didn't load.
Don't worry about it in the next hour so and I will explain what this simulator is and how you can fix
it if it did work however you should see something similar to this on iPhone interface for iPhone 8
which kind of shows us what we have designed in here.
Obviously right now there is no interactivity and nothing is working simply because there are just two
static pieces of text that we have assembled together.
Let's keep it up to here.
Whether it did work for you or not they're going to move on to the next lesson which is about the simulators
where we learn about these different things up here and we learn about how to customize them for the
ways that we need them.
So I'll see you in the next lesson.