Grid Layout

TheGridLayo ut manager lays out components im a grid We used it in the address application for editPane. Like FlowLayout,GridLayout has the vgap and hgap properties that set the vertical and horizontal spacing between components.

GridLayo ut also has properties that specify the rows and columns of the grid. The row property is dominant. The only component property that GridLayout pays any attention to is minimumSize. If you pack the container (frame .pack()), it uses minimumS ize to create the smallest components that are all the same size. It ignores preferredSize and strete hesthe width and height of the co mponents so that they all have the same area and fill the container (if possible). Here's an example.

Import the classes needed.

>>> from java.awt import GridLayout

>>> from javax.swing import JFrame, JButton

Create a frame and add some co mponents to it.

>>> frame = JFrame("GridLayout Example", size=(300,30 0), visible=1) >>> blist = ("One", "Two", "Three", "Four", "Five", "Six", "Seven", "E >>> for label in blist:

... frame.contentPane.add(JButton(label))

Create a grid layout that lays out components in a 2-by-4 grid.

>>> frame.contentPane.layout = GridLayout(2,4)

Your frame should look like Figure 14-16. Notice that neither the width nor the height is observed from preferredSize. With the mouse, drag the right corner of the frame so that it's twice its original size, which doubles the width and height of the components as well. Now return the frame to its original size.

Figure 14-16. A 2-by-4 Component Layout with GridLayout

m

GridLayout Example

BBB

One

Two

Three

Four

Five

Six

Seven

Eight

Set the row property of the GridLayout instance to 3.

>>> frame.contentPane.layout.rows=3

Your frame should now look like Figure 14-17. Although we didn't change the columns to 3, only three columns show up. That's because GridLayout adjusts the number of columns to fit the desired number of rows. Also, the grid is 3 by 3 and, since we only have eight components, the last cell is left blank.

Figure 14-17. A 3-by-3 Layout (with the Last Cell Blank)

m

GridLayout Example

-

One

Two

Three

Four

Five

Six

Seven

Eight

Now set the rows to four. Then print out the row and column properties (layout. r ows and layout. columns).

»> frame.contentPane.l ayout. rows = 4 >>> frame.contentPane.doLayout() >>> layout=frame.contentPane.layout >>> print layout.rows, layout.columns 4 4

Your frame should look like Figure 14-18. Again, the number of columns has charged to hccommodhta the number of rows; however, the column property is still set to 4 because, as I said earlier, the row property is dominant.

Figure 14-18. A 4-Row Layou t

I^GiidUjiout Example

, nlxl

One

Two

Three

Four

Five

Six

Seven

Eight

Setvgap and hgap of frame . layout to 3. Lmok at the trame, and then set these properties to 7.

>>> layout.vgap, layout.hgap = 3,3 >>> frame.contentPane.doLayout()

Look at the frame.

>>> layout.vgap, layout.hgap = 7,7 >>> frame.invalidate();frame.validate()

It should look like Figure 14-19. Notice that the spacing is betweenthe components and not between the components and the edges. (If you wart to set the area between the components and the edges, you need to set theinsets of the frame.)

Figure 14-19. Horizontal and Vertical Gap Set to 3

Set the layout back to the way it was.

>>> frame.contentPane.layout = GridLayout(2,4)

As we discussed, GridLayout uses minimumSize when you pack the frame. It lays out all components with the same size by checking the minimum size for each one and then setting all of them to the largest size it finds. Pack the frame. It should look like Figure 14-20.

Figure 14-20. Packed Frame

G rtdLoyo ut E ho mp 1 e

-|n|x|

One

Two

Three

Four

Five

Six

Seven

Eight

Now let's go through the components and find the maximum minimumSize. First we'll create two lists to collect the widths and heights from the components.

Iterate through the components in the frame, and collect the widths and heights in the widths and heights lists.

>>> for component in frame.contentPane.components ... widths.append(component.minimumSize.width)

... heights.append(component.minimumSize.height)

Print the maximum minimumSize width.

>>> print "Minimum width " + 'max(widths) ' Minimum width 48

Print the maximum minimumSize he ight .

>>> print "Minimum height " + 'max(heights)' Minimum height 23

Print the actual size of the components. (Remember that with Gr idLayo ut all components aie the same size.) Notice that the width and height match the maximum mi n imumS i z e.

>>> print "Size of all of the components " + frame.components[0].size Size of all of the components java.awt.Dimension[width=4 8,height=2 3]

Try this exercise with layout4.py:

1. SelectGridLayout from the layouts list in the control pane.

2. Hit the Pack button. You should have a frame that looks like Figure 14-21.

Figure 14-21. Packed GridLayout Frame

[^Layout Tutor

-jpjx

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

3. Changehgap and vgap to 5 pixels. Then hit the Apply button. The frame should look; like Figure 1422.

3. Changehgap and vgap to 5 pixels. Then hit the Apply button. The frame should look; like Figure 1422.

Figure 14-22. Frame with Horizontal and Vertical Gaps of 5

^Layout Tutor

_|o|x

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

13

19

20

4. Hit the Pack button again.

5. Change the number of columns to 100. What happens?

6. Set the number of columns to 0. What happens?

7. Set the number of columns back to 5. What happens?

8. Set the rows from 4 to 6. Then hit Pack. Notice that the last two rows are empty (Figure 14-23).

Figure 14-23. Six-Row Packed Frame with Last Two Rows Empty

| m Layout Tutor

i ir 2 a

4

5 6 7

8

9 _11 in J I 11

12

I 13 II 14 II 15 1

16

17 18 19

20

9. Increment the rows by 1 until you reach 10. Be sure to hit Apply each time, and then repack the frame with Pack.

9. Increment the rows by 1 until you reach 10. Be sure to hit Apply each time, and then repack the frame with Pack.

Was this article helpful?

0 0

Post a comment