Now, as the developers of the app, we can, of course, see what's printed inside our debug console. 1
So when I press on one of these buttons, we can see that our timer is firing and that we're getting our 2
countdown for our egg timer. 3
But of course, the user can't see any of that. 4
So how can we relay this information to them in an intuitive way? 5
Well, one of the ways we could do that is by using something called a ProgressView. The ProgressView 6
will help us show the user how much time is left until their eggs are done. 7
We'll use the ProgressView to visualize the value of seconds remaining. 8
So if we go back to our Main.storyboard, press the plus button and search for a Progress View, then 9
you can see that this will be able to show a lengthy task is underway and indicate the percentage that 10
has been completed. 11
So we could use this to show the percentage that our egg is complete. 12
So in order to use it, we're going to drag it onto our screen. 13
Now, notice that I've got a Vertical Stack with three things in it, a Egg Stack, a Title View, 14
and a Timer View. 15
So I want that ProgressView to go into the existing Timer View. 16
So making sure that it's indented like this under the Timer View, and then drop it in. 17
So that now goes inside my Timer View. 18
And now, I'm going to select my ProgressView and then I'm going to pin it, so that it's zero pixels from 19
the left and from the right of the Containing View, 20
so the Timer View. 21
And once I've added those two constraints, I'm going to make sure that it's vertically centered in its 22
container, so that it's right in the middle there. 23
Now, the next thing I'm going to do is I'm going to change this ProgressView from a normal sort of default 24
ProgressView to a bar. 25
And the reason for this is because I can now go into my constraints and actually give it a height. 26
So I'm going to make it 5 pixels high so that we can actually see it better. 27
And once that's done, then you can see it's now a square bar that looks something like this. 28
And we're going to change some of the colors, so that it stands out a little bit better. So making sure 29
that you select the progress bar, instead of the Timer View. 30
We're going to change the progress tint so the part that's really done to the system yellow to match 31
our yolks, and the track tint so the part that's not done, 32
we're going to change it to System Gray. So now we've got a part that's done and a part that's not done. 33
Now, the way that a progress bar works is you can see that it has this property called its progress. 34
And when it's naught .5, it means the progress is going to be halfway. 35
If it was a naught .1, then it's gonna be a tenth of the way. 36
So it goes from zero all the way up to one, essentially. 37
Now, here's a challenge for you. 38
Without changing anything in the Attribute Inspector, can you write some code so that when you press 39
one of these egg buttons, the progress bar goes to 100 percent? 40
Have a think about that. 41
Pause the video and try to complete the challenge. 42
All right. 43
So first things first, we need to link the progress bar to our viewController with an IBOutlet. 44
So making sure that you're dragging not from the time of you, but the progress bar. And that when you 45
see the type here, it should say UIProgressView in the dropdown. So let's name this our progressBar 46
and hit enter. 47
And now, we can go into our ViewController, 48
have a full screen to see what's going on, 49
and we can change our progressBar and what we're going to do is we said as soon as one of the EG buttons 50
get pressed we're going to change our progress bars. 51
And remember the property that we were changing before when we were making this bar move around was 52
the progress property right here. 53
So we're gonna do the same in code. So we're gonna tap into the progressBar when you use the dot to 54
find its properties 55
and we want this particular property, 56
so the current progress shown by the receiver which is the progressBar. And noticed that over here, it tells 57
you what data type it in needs. 58
So it wants to have a floating point number. 59
So now if we hit enter, we can set it to equal 1.0 which is basically 100 percent and it's 60
expressed as a decimal point number. 61
Now, if we run our app and we press on any of the buttons, it will increase our progressBar straight 62
up to 100 percent. 63
We're getting closer to achieving what we want, but we're still not quite there yet. 64
We still have to adjust our code a little bit. 65
Now, before I show you how we do it, I want you to really pause and think about how you might tackle this 66
problem, at least list down the logical steps which you might change the code or you might think would 67
work to make our progressBar show the amount of time that remains. 68
So pause the video, 69
have a think about that. 70
And once you're ready, head over to the next lesson, and I'll show you how it's done.