6. Sizing GUI Components
This tutorial will teach you how you can change size of GUI components.
Positioning children
First, some quick repetition.
The child components in Rows are as wide as the Rows component, and their height are just tall enough to surround their content, and the children are positioned at the top of Rows. To position the child components elsewhere in Rows, you can insert extra Space components in Rows to push apart the children. The Space children will share the remaining space available in Rows evenly among themselves.
It works the same for the Columns component, but the children are instead positioned as columns, and not as rows.
Try resizing the app below, and notice how the Space children gets smaller/bigger, while the three other children stay at the same size.
class RowsPage extends Page{
createGui(){
return Rows.children(
Text.text(`First`).backgroundColor(`red`),
Space.backgroundColor(`pink`),
Text.text(`Second`).backgroundColor(`yellow`),
Space.backgroundColor(`purple`),
Button.text(`To columns`).page(ColumnsPage)
)
}
}class ColumnsPage extends Page{
createGui(){
return Columns.children(
Text.text(`First`).backgroundColor(`red`),
Space.backgroundColor(`pink`),
Text.text(`Second`).backgroundColor(`yellow`),
Space.backgroundColor(`purple`),
Button.text(`To Rows`).page(RowsPage)
)
}
}Sizing children
It's not only Space children that can grab some shares of the remaining available space; any child component used in Rows and Columns can grab some of the remaining available space. But it's only the Space children that grabs it by default, and by default they grab equally much of it. But all this can be changed with the configuration method .size() on the children. Let's go through how this works in detail.
First, let us ignore the Space children, and instead focus on all other children, such as Text and Button.
By default, all children in Rows will be just tall enough to surround their content. If you want them to also grab some of the remaining available space, you can call the method .size() on the child, and pass it a number indicating how many shares of the remaining available space it should also occupy.
A few examples.
class FirstPage extends Page{
createGui(){
return Rows.children(
Text.text(`FirstPage`),
Text.backgroundColor(`red`).text(`None of the children here call .size(), so all children are just tall enough to surround their content.`),
Button.text(`Go to second page`).page(SecondPage)
)
}
}class SecondPage extends Page{
createGui(){
return Rows.children(
Text.text(`SecondPage`),
Text.size(1).backgroundColor(`red`).text(`This text component wants 1 share of the remaining avaialble space. Since this is the only child that wants some shares, it will get all of it (1 out of 1 shares)`),
Button.text(`Go to third page`).page(ThirdPage)
)
}
}class ThirdPage extends Page{
createGui(){
return Rows.children(
Text.text(`ThirdPage`),
Text.size(100).backgroundColor(`red`).text(`This text component wants 100 shares of the remaining avaialble space. Since this is the only child that want some shares, it will get all of it (100 out of 100 shares)`),
Button.text(`Go to fourth page`).page(FourthPage)
)
}
}class FourthPage extends Page{
createGui(){
return Rows.children(
Text.text(`FourthPage`),
Text.size(4).backgroundColor(`red`).text(`This text component wants 4 shares of the remaining avaialble space. The Button below wants 1 share of the remaninig available space, so this component will get 4 of 5 shares.`),
Button.size(1).text(`Go to first page`).page(FirstPage)
)
}
}The special thing with the Space component is that it has the size 1 by default (it has been made like this because that's often how one wants to use it), while all other components has the size 0 by default (which means they will be just big enough to surround their content).
So when you use the Space component like this:
SpaceIt has the same functionality as being used like this:
Space.size(1)class StartPage extends Page{
createGui(){
return Rows.children(
Space.backgroundColor(`yellow`),
Text.size(1).backgroundColor(`red`).text(`I occupy one third of the space.`),
Space.backgroundColor(`pink`),
)
}
}You can still call .size() on Space if you want it to claim another amount of shares of the remaning available space.
class StartPage extends Page{
createGui(){
return Rows.children(
Space.backgroundColor(`yellow`),
Text.size(1).backgroundColor(`red`).text(`I occupy one fifth of the space.`),
Space.size(3).backgroundColor(`pink`),
)
}
}Exercises
Complete the exercises below to see if you have fully mastered what has been taught in this tutorial.
The code in this BagaWork project currently displays a page looking like this:
Your task is to change the code, so The main content component covers as much space as possible, so the page instead looks like this:
Hint
A carefully chosen .size(1) should do the trick. But on which component?
The code in this BagaWork project contains no pages. Your task is to add a new page to the project named StartPage, and make it look as the page shown below.
Hint
Hmm... Is that GUI conisting of two Rows that contain two Columns each? Or two Columns that contain two Rows each? Hmm... Seems impossible to tell... Wait, does that mean any of the two approaches will work?
And remember, .size() can be called on any child component in Rows and Columns. So if Columns is being used as a child in Rows, you can call .size() on that Columns component!
Continue on your project from Exercise 2, but make the GUI look like this:
Hint
You need more .size(1). Add as many as you can. And then add some more. Ehh... No, scratch that last sentence 😅
That's it!
Good work, now you know how to change the size of GUI components! 🥳 Using Rows and Columns with .size() on the children is enough to create almost any layout you want.