To go from this to this will require not only some widgets to be added,
but a little bit more knowledge about how to lay out our widgets on the grid.
Because notice how here we've got a single entry that is spread across the right
side of the screen. But then down here,
we've got an entry that's only taking up a part of that space. Effectively
if we think about our grid,
this particular entry is actually taking up two columns.
So, how can we do this? To demonstrate this I've created a sandbox app.
So it's super simple,
all it has is a red label and a green label.
And you can see that the red label has a width of 20,
a height of 5 as does the green,
but the red is on row 0 column 0
whereas the green is on row 1 column 1.
So we get this kind of checkered kind of look.
If I decide to go and add another label,
let's call it b for blue and I give it a background of blue.
And then I give it the same width and height. Now,
if I put this new label onto the grid and I put it onto the next row,
so row 2, but the column I'm going to put it on column 0. Now,
I think at this point you can probably all predict where that label is going to
go.
And indeed it goes onto the very first left-most column and its on the third
row.
Now what if I wanted that blue label to go across the entire width so that it's
below the red and also below the green? Well,
you might think that I could simply just double the width, right?
Instead of a width of 20,
let's change it to 40. Surely that's going to stretch this label so that it goes
across the entire red and green label.
But unfortunately when I run this, you'll see instead, this happens.
The blue label is still within the first column.
And in fact it stretched that column to a 40 width and that red column is now
centered again in the leftmost or the first column.
And that blue is nowhere near the green label because it's not allowed to go
into that second column. So how can we solve this situation?
Well, the actual answer is
another attribute that the grid has,
which is something called a column span.
Now the column span is exactly what it sounds like
really. It's basically how many columns is this particular thing going to span?
So in our case, we want it to go across two columns,
column 0 and column 1.
So it should start out at column 0
but then span a whole two columns. And now when I run this code,
you can see we get our desired effect.
The blue label is now across the red and the green and it's spanning two
columns.
The link to this playground is in the course resources,
so feel free to head over there and give it a go
if you want to play around with this example. Now in our case,
if we break down the final layout we're looking for,
it's effectively a 3-column and 5-row layout.
So we've already got our canvas
which is actually going to go in the middle, so it probably the second column.
And then we've got the website, the email/username, the password,
and finally our two buttons.
Now I've laid out this entire user interface and I've specified the width of
some of these entries and buttons just because you'll need to do a bit of
tweaking around just to make sure that everything lines up with each other.
I've really done that ahead of time
and I've already worked out the sort of near-optimal width.
So what I want you to do is to use what we've learned about the grid column
span. So if we have our label, a button, new button and entry,
if I want this particular button to go across two columns,
then I have to change that columnspan
attribute to 2 and I have to specify which column it starts out in and how
many columns it's going to go across. Using everything you've learned so far
I want you to recreate this user interface.
Have a look at what's on-screen; these are labels, these are entries
and these two are buttons. Have a look at where they lie within the grid system and
how many columns they go across and also the width of some of these widgets
and see if you can recreate this user interface in your project.
So pause the video and give that a go.