0
1
00:00:00,270 --> 00:00:07,080
Now, as the developers of the app, we can, of course, see what's printed inside our debug console.
1

2
00:00:07,170 --> 00:00:13,080
So when I press on one of these buttons, we can see that our timer is firing and that we're getting our
2

3
00:00:13,080 --> 00:00:15,370
countdown for our egg timer.
3

4
00:00:15,540 --> 00:00:18,820
But of course, the user can't see any of that.
4

5
00:00:18,840 --> 00:00:23,700
So how can we relay this information to them in an intuitive way?
5

6
00:00:23,700 --> 00:00:30,510
Well, one of the ways we could do that is by using something called a ProgressView. The ProgressView
6

7
00:00:30,510 --> 00:00:35,430
will help us show the user how much time is left until their eggs are done.
7

8
00:00:35,430 --> 00:00:39,690
We'll use the ProgressView to visualize the value of seconds remaining.
8

9
00:00:39,690 --> 00:00:48,030
So if we go back to our Main.storyboard, press the plus button and search for a Progress View, then
9

10
00:00:48,030 --> 00:00:54,150
you can see that this will be able to show a lengthy task is underway and indicate the percentage that
10

11
00:00:54,150 --> 00:00:55,430
has been completed.
11

12
00:00:55,560 --> 00:01:01,040
So we could use this to show the percentage that our egg is complete.
12

13
00:01:01,080 --> 00:01:05,190
So in order to use it, we're going to drag it onto our screen.
13

14
00:01:05,190 --> 00:01:14,520
Now, notice that I've got a Vertical Stack with three things in it, a Egg Stack, a Title View,
14

15
00:01:14,520 --> 00:01:15,270
and a Timer View.
15

16
00:01:15,480 --> 00:01:20,370
So I want that ProgressView to go into the existing Timer View.
16

17
00:01:20,400 --> 00:01:26,460
So making sure that it's indented like this under the Timer View, and then drop it in.
17

18
00:01:26,460 --> 00:01:29,800
So that now goes inside my Timer View.
18

19
00:01:30,180 --> 00:01:36,450
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

20
00:01:36,450 --> 00:01:40,920
the left and from the right of the Containing View,
20

21
00:01:40,920 --> 00:01:42,870
so the Timer View.
21

22
00:01:43,020 --> 00:01:48,330
And once I've added those two constraints, I'm going to make sure that it's vertically centered in its
22

23
00:01:48,330 --> 00:01:51,450
container, so that it's right in the middle there.
23

24
00:01:52,560 --> 00:02:00,240
Now, the next thing I'm going to do is I'm going to change this ProgressView from a normal sort of default
24

25
00:02:00,330 --> 00:02:03,460
ProgressView to a bar.
25

26
00:02:03,540 --> 00:02:10,800
And the reason for this is because I can now go into my constraints and actually give it a height.
26

27
00:02:10,920 --> 00:02:15,480
So I'm going to make it 5 pixels high so that we can actually see it better.
27

28
00:02:16,440 --> 00:02:23,260
And once that's done, then you can see it's now a square bar that looks something like this.
28

29
00:02:23,520 --> 00:02:30,650
And we're going to change some of the colors, so that it stands out a little bit better. So making sure
29

30
00:02:30,650 --> 00:02:34,840
that you select the progress bar, instead of the Timer View.
30

31
00:02:35,240 --> 00:02:41,300
We're going to change the progress tint so the part that's really done to the system yellow to match
31

32
00:02:41,330 --> 00:02:46,090
our yolks, and the track tint so the part that's not done,
32

33
00:02:46,160 --> 00:02:53,370
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

34
00:02:54,000 --> 00:03:00,780
Now, the way that a progress bar works is you can see that it has this property called its progress.
34

35
00:03:01,320 --> 00:03:05,170
And when it's naught .5, it means the progress is going to be halfway.
35

36
00:03:05,520 --> 00:03:08,330
If it was a naught .1, then it's gonna be a tenth of the way.
36

37
00:03:08,760 --> 00:03:13,650
So it goes from zero all the way up to one, essentially.
37

38
00:03:13,650 --> 00:03:15,380
Now, here's a challenge for you.
38

39
00:03:15,690 --> 00:03:22,050
Without changing anything in the Attribute Inspector, can you write some code so that when you press
39

40
00:03:22,080 --> 00:03:28,260
one of these egg buttons, the progress bar goes to 100 percent?
40

41
00:03:28,320 --> 00:03:29,460
Have a think about that.
41

42
00:03:29,460 --> 00:03:34,160
Pause the video and try to complete the challenge.
42

43
00:03:34,600 --> 00:03:34,930
All right.
43

44
00:03:34,960 --> 00:03:42,270
So first things first, we need to link the progress bar to our viewController with an IBOutlet.
44

45
00:03:42,430 --> 00:03:47,860
So making sure that you're dragging not from the time of you, but the progress bar. And that when you
45

46
00:03:47,860 --> 00:03:55,390
see the type here, it should say UIProgressView in the dropdown. So let's name this our progressBar
46

47
00:03:55,630 --> 00:03:58,060
and hit enter.
47

48
00:03:58,300 --> 00:04:01,610
And now, we can go into our ViewController,
48

49
00:04:01,610 --> 00:04:03,760
have a full screen to see what's going on,
49

50
00:04:03,910 --> 00:04:09,670
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

51
00:04:09,700 --> 00:04:13,460
get pressed we're going to change our progress bars.
51

52
00:04:13,690 --> 00:04:20,620
And remember the property that we were changing before when we were making this bar move around was
52

53
00:04:20,650 --> 00:04:23,590
the progress property right here.
53

54
00:04:23,590 --> 00:04:28,780
So we're gonna do the same in code. So we're gonna tap into the progressBar when you use the dot to
54

55
00:04:28,780 --> 00:04:30,230
find its properties
55

56
00:04:30,370 --> 00:04:33,070
and we want this particular property,
56

57
00:04:33,610 --> 00:04:39,400
so the current progress shown by the receiver which is the progressBar. And noticed that over here, it tells
57

58
00:04:39,400 --> 00:04:41,170
you what data type it in needs.
58

59
00:04:41,170 --> 00:04:44,840
So it wants to have a floating point number.
59

60
00:04:44,860 --> 00:04:52,600
So now if we hit enter, we can set it to equal 1.0 which is basically 100 percent and it's
60

61
00:04:52,600 --> 00:04:55,640
expressed as a decimal point number.
61

62
00:04:55,660 --> 00:05:02,590
Now, if we run our app and we press on any of the buttons, it will increase our progressBar straight
62

63
00:05:02,590 --> 00:05:04,940
up to 100 percent.
63

64
00:05:05,290 --> 00:05:11,020
We're getting closer to achieving what we want, but we're still not quite there yet.
64

65
00:05:11,080 --> 00:05:14,170
We still have to adjust our code a little bit.
65

66
00:05:14,170 --> 00:05:19,960
Now, before I show you how we do it, I want you to really pause and think about how you might tackle this
66

67
00:05:19,960 --> 00:05:25,960
problem, at least list down the logical steps which you might change the code or you might think would
67

68
00:05:25,960 --> 00:05:32,080
work to make our progressBar show the amount of time that remains.
68

69
00:05:32,080 --> 00:05:33,450
So pause the video,
69

70
00:05:33,490 --> 00:05:34,600
have a think about that.
70

71
00:05:34,600 --> 00:05:38,530
And once you're ready, head over to the next lesson, and I'll show you how it's done.