So now that we know more about Swift classes, let's continue building out this class, 1
our SecondViewController. 2
So now that we've got this SecondViewController file that's managing our second screen, we're going 3
to do a few other things. 4
First, I want to show you how we can create the layout and design of our second screen without using 5
the Storyboard, 6
instead we're purely going to be using Swift code to programmatically generate the design. 7
Secondly, I want to initialize our SecondViewController and show it on the screen when the calculate 8
button gets pressed. 9
And finally, we're going to pass over the calculated BMI value that we've got from our first screen over 10
to our second screen, so that it can be displayed. Once you're ready, 11
let's get started. Inside of viewDidLoad is, of course, the code that will be triggered when our view 12
loads up. 13
Now, in our case, what we want to happen as the first thing is to create a new label. 14
Now, whereas previously, we had access to the storyboard. 15
In this case, I'm going to create the label entirely programmatically and it's easy when we can rely 16
on our UIKit. 17
So inside our UIKit, there is a component called a UILabel. And previously, we were able to drag it from 18
the Object library and put this UILabel onto the storyboard, and then link it to an IBOutlet. 19
But at the end of the day, it's still a UILabel. 20
So in this case, we're going to create a new constant code "label" and I'm going to initialize a new 21
UILabel object from the UILabel class. So similar to how we initialize struct, we put the name of the class 22
that we want to initialize, and then we put a set of parentheses. 23
So now we have a label and we can modify some of the properties of our label, 24
so, for example, let's say I wanted to change the text property of our label, 25
I simply just tap into the object that was created to the label, and then write the dot to access the 26
properties and methods, and then I'm going to get hold of the text property, and set it to equal the 27
string "Hello." 28
So now I should have a label that has the word "Hello" as its text. This line of code should be pretty 29
familiar to you by now. 30
It's exactly what we've been doing with our labels created from the object library and referenced with 31
an IBOutlet. 32
And if you're ever confused when you're working with components that come from the Object library, you 33
can always just hold down option and click to see what lies under the hood. 34
So in this case, heightSlider is a UISlider, and our weightLabel is simply a UILabel. 35
However, unlike the UILabel that came from the Object library, that we were able to resize it and move 36
it around and adjust it, 37
well, in this case, we just have a normal label and it currently doesn't actually have a size yet. 38
So to do that, we have to define the frame property. So we write label.frame. 39
And this is the frame rectangle which describes the location and the size of our label. 40
And you can see when you click on it that it expects a CGRect which stands for a cool graphics rectangle. 41
And the way that we would create a CGRect is the same as we would create an object from any class. 42
We write the name of the class CGRect, and then we initialize it with our parentheses. 43
You can see that there's quite a few ways of creating a CGRect or initializing CGRect. 44
But the simplest way is to simply provide an x position, y position, width, and height, all as whole numbers. 45
So that's what I'm gonna choose. And the x position, I'm gonna set as zero, so left, and then y position, also 46
zero. 47
So the very top. 48
So my label is currently gonna go into the top left corner. And then, the width, let's say, 100 points, 49
and the height, maybe 50. 50
So now I should have a rectangle that's at position zero, zero, with a width of 100, and a height of 50. 51
The next thing we have to do is to actually put our label onto the screen. And the screen, 52
in this case, or the very, very basic component that is in every single view controller is this thing 53
called a View, and the view is the very background that comes with any view controller. 54
So if I go into my Object library and I search for a View Controller, and I drag it onto the screen, you 55
can see that it doesn't come with much, but it does always come with a view. 56
So that view is going to be the thing that we want to tap into in order to add our label onto it. 57
So we can't just drag and drop our label onto the screen, 58
we have to tap into this view property, which is the view that this controller manages, which is, again, 59
exactly the same as this thing here in the storyboard. 60
And we're going to use a method code addSubview, addSubview will add a view to a parent view. 61
So this will become the child and this will become the parent. 62
Let's delete the place holder there. And the view that we want to add is our label. 63
Now, notice how our label has a data type of UILabel, but our addSubview needs a UIView. 64
So there seems to be some sort of a mismatch. 65
Why is it possible that we can put this label in even though it's expecting a UIView data type? Well, 66
that's because if we option click on our UILabel, you can see that it inherits directly from the 67
UIView. 68
So this is the parent of the UILabel and the UILabel can do everything that a UIView does and more. 69
So that's why our inputs, our UI Label is, in fact, compatible with the expected data type of a UIView. 70
Because at the end of the day, a label is also a view. 71
Now, the other thing to remember is that when we get a new UIViewController, the view starts out being 72
transparent. 73
So in order to easily differentiate this secondViewController and the view that gets put onto the 74
screen, we should really set its background color. So we can right view.background color, and let's 75
set it to something really obvious like a red color, so we can write UIColor.red, or a much quicker 76
way of doing this is to simply delete that part. And because Xcode knows that the background color needs 77
to be a UIColor, when we simply just write ".red," it already knows that what we want is a UIColor.red. 78
So we can modify our label and our view and customize it all day long, and change all the properties 79
and mess around with it in our code, but currently, there's actually no way of accessing this 80
secondViewController to be able to see our label and our view with the red background color. So we know that the 81
first thing that comes on screen is our view controller. 82
So this is also a good place to make the transition to display our secondViewController and the perfect 83
place is our calculatePressed IBAction, so that when we press the calculate button, we can show the 84
secondViewController. Right here, 85
I'm gonna create a new object from that class that we just created just now. 86
So here is the blueprint for a secondViewController. 87
And here I'm going to create the object called secondVC which is going to be created from the 88
SeondViewController blueprint. 89
And then I'm going to add a set of parentheses to initialize it. And now that I have this object, the 90
secondVC, to be able to actually see it, and to be able to make it display on screen, I have to get 91
the current view controller which is on the screen to present this SecondViewController. 92
So I'm going to tap into the current view controller which can be accessed through the "self" method, which 93
you can see is of type ViewController, which is going to be this class right here. 94
And this is currently on screen. 95
So if it's able to present a ViewController, then I can show my second VC. 96
So I'm going to set it to present animated as true. 97
so I have a little animation when that transition happens. And completion is going to be equal to nil. 98
So once the animation and presentation is done, I don't want it to do anything else. 99
So now if I run my app 100
and I press on my calculate button, 101
well, now I get my second VC, remember with the red background popping up on top, and I've got my label 102
that I've created shown at the 00 position, top left corner of this secondViewController. 103
And we've done all of that entirely with code. 104
Now, we can see our label and our secondViewController, 105
but how can we pass over our BMI value to be displayed on this secondViewController and placed into 106
our label that we created. 107
Well, let's create a property for our secondViewController, let's call it the bmiValue and I'm gonna 108
set it to equals"0.0" to begin with. Next, we're going to use this property, the bmiValue 109
inside our label. 110
So instead of the label text saying "Hello," it's going to display the bmiValue. 111
So now that we have our SecondViewController class with a bmiValue property, we can now pass over 112
our BMI 113
when we create a new SecondViewController object. 114
So here we've initialized a SecondViewController and we can tap into that object, 115
secondVC, accessed that property code bmiValue, and set it equal to the BMI that we've worked out 116
over here. 117
The only problem here is that this bmiValue here is a string, whereas this BMI that we've calculated 118
is a floating point number. 119
So let's go ahead and use our string format method, so we'll use formats, we'll round this down to 120
"%.1f" and then we'll pass in the BMI as the value to be formatted. 121
So now if we run our app and I'm going to delete my print statement now, let's take a look at what happens. 122
Let's go ahead and move our sliders around, and when I click on calculate, you can see the calculated 123
BMI getting placed into the label that we've created entirely from scratch, and it's being populated 124
with the text that comes from that bmiValue property of the SecondViewController. 125
We've now managed to see how we can create our UI entirely with just code without touching the storyboard.