1 00:00:00,720 --> 00:00:05,720 To go from this to this will require not only some widgets to be added, 2 00:00:06,570 --> 00:00:11,250 but a little bit more knowledge about how to lay out our widgets on the grid. 3 00:00:11,760 --> 00:00:16,760 Because notice how here we've got a single entry that is spread across the right 4 00:00:18,330 --> 00:00:20,580 side of the screen. But then down here, 5 00:00:20,610 --> 00:00:25,470 we've got an entry that's only taking up a part of that space. Effectively 6 00:00:25,470 --> 00:00:27,060 if we think about our grid, 7 00:00:27,270 --> 00:00:30,930 this particular entry is actually taking up two columns. 8 00:00:31,440 --> 00:00:36,440 So, how can we do this? To demonstrate this I've created a sandbox app. 9 00:00:37,380 --> 00:00:38,700 So it's super simple, 10 00:00:38,730 --> 00:00:42,720 all it has is a red label and a green label. 11 00:00:43,200 --> 00:00:46,320 And you can see that the red label has a width of 20, 12 00:00:46,320 --> 00:00:48,480 a height of 5 as does the green, 13 00:00:48,750 --> 00:00:51,420 but the red is on row 0 column 0 14 00:00:51,870 --> 00:00:54,570 whereas the green is on row 1 column 1. 15 00:00:54,720 --> 00:00:57,240 So we get this kind of checkered kind of look. 16 00:00:57,870 --> 00:01:00,870 If I decide to go and add another label, 17 00:01:00,960 --> 00:01:05,580 let's call it b for blue and I give it a background of blue. 18 00:01:06,150 --> 00:01:10,020 And then I give it the same width and height. Now, 19 00:01:10,020 --> 00:01:15,020 if I put this new label onto the grid and I put it onto the next row, 20 00:01:16,260 --> 00:01:21,210 so row 2, but the column I'm going to put it on column 0. Now, 21 00:01:21,390 --> 00:01:25,590 I think at this point you can probably all predict where that label is going to 22 00:01:25,590 --> 00:01:26,370 go. 23 00:01:26,370 --> 00:01:31,370 And indeed it goes onto the very first left-most column and its on the third 24 00:01:31,800 --> 00:01:32,633 row. 25 00:01:32,820 --> 00:01:37,820 Now what if I wanted that blue label to go across the entire width so that it's 26 00:01:39,630 --> 00:01:43,080 below the red and also below the green? Well, 27 00:01:43,080 --> 00:01:46,710 you might think that I could simply just double the width, right? 28 00:01:46,830 --> 00:01:48,210 Instead of a width of 20, 29 00:01:48,210 --> 00:01:52,830 let's change it to 40. Surely that's going to stretch this label so that it goes 30 00:01:52,830 --> 00:01:55,590 across the entire red and green label. 31 00:01:56,220 --> 00:02:00,480 But unfortunately when I run this, you'll see instead, this happens. 32 00:02:01,140 --> 00:02:04,470 The blue label is still within the first column. 33 00:02:04,890 --> 00:02:09,889 And in fact it stretched that column to a 40 width and that red column is now 34 00:02:10,530 --> 00:02:13,950 centered again in the leftmost or the first column. 35 00:02:14,550 --> 00:02:19,170 And that blue is nowhere near the green label because it's not allowed to go 36 00:02:19,170 --> 00:02:23,670 into that second column. So how can we solve this situation? 37 00:02:24,540 --> 00:02:26,670 Well, the actual answer is 38 00:02:26,670 --> 00:02:29,640 another attribute that the grid has, 39 00:02:29,940 --> 00:02:33,000 which is something called a column span. 40 00:02:33,660 --> 00:02:36,870 Now the column span is exactly what it sounds like 41 00:02:36,870 --> 00:02:41,870 really. It's basically how many columns is this particular thing going to span? 42 00:02:43,170 --> 00:02:46,710 So in our case, we want it to go across two columns, 43 00:02:46,980 --> 00:02:49,230 column 0 and column 1. 44 00:02:49,620 --> 00:02:52,230 So it should start out at column 0 45 00:02:52,290 --> 00:02:57,270 but then span a whole two columns. And now when I run this code, 46 00:02:57,540 --> 00:02:59,250 you can see we get our desired effect. 47 00:03:00,040 --> 00:03:05,040 The blue label is now across the red and the green and it's spanning two 48 00:03:05,680 --> 00:03:06,513 columns. 49 00:03:07,270 --> 00:03:11,380 The link to this playground is in the course resources, 50 00:03:11,410 --> 00:03:13,780 so feel free to head over there and give it a go 51 00:03:13,780 --> 00:03:18,160 if you want to play around with this example. Now in our case, 52 00:03:18,190 --> 00:03:20,920 if we break down the final layout we're looking for, 53 00:03:21,280 --> 00:03:25,540 it's effectively a 3-column and 5-row layout. 54 00:03:25,960 --> 00:03:27,790 So we've already got our canvas 55 00:03:27,880 --> 00:03:32,590 which is actually going to go in the middle, so it probably the second column. 56 00:03:33,010 --> 00:03:37,000 And then we've got the website, the email/username, the password, 57 00:03:37,270 --> 00:03:38,950 and finally our two buttons. 58 00:03:39,580 --> 00:03:44,580 Now I've laid out this entire user interface and I've specified the width of 59 00:03:45,970 --> 00:03:50,140 some of these entries and buttons just because you'll need to do a bit of 60 00:03:50,140 --> 00:03:54,010 tweaking around just to make sure that everything lines up with each other. 61 00:03:54,490 --> 00:03:56,020 I've really done that ahead of time 62 00:03:56,170 --> 00:03:59,440 and I've already worked out the sort of near-optimal width. 63 00:04:00,070 --> 00:04:04,900 So what I want you to do is to use what we've learned about the grid column 64 00:04:04,900 --> 00:04:09,430 span. So if we have our label, a button, new button and entry, 65 00:04:09,700 --> 00:04:13,420 if I want this particular button to go across two columns, 66 00:04:13,840 --> 00:04:16,300 then I have to change that columnspan 67 00:04:16,329 --> 00:04:21,329 attribute to 2 and I have to specify which column it starts out in and how 68 00:04:21,820 --> 00:04:26,820 many columns it's going to go across. Using everything you've learned so far 69 00:04:27,550 --> 00:04:30,490 I want you to recreate this user interface. 70 00:04:31,030 --> 00:04:36,010 Have a look at what's on-screen; these are labels, these are entries 71 00:04:36,310 --> 00:04:41,310 and these two are buttons. Have a look at where they lie within the grid system and 72 00:04:41,440 --> 00:04:45,790 how many columns they go across and also the width of some of these widgets 73 00:04:46,120 --> 00:04:50,470 and see if you can recreate this user interface in your project. 74 00:04:50,680 --> 00:04:52,690 So pause the video and give that a go.