Changes

Jump to: navigation, search
no edit summary
With the layout displayed, select the hello world! Text View object and press the keyboard Delete key to remove it from the layout. Next, right-click on the white layout view background and select Change Layout… from the resulting menu. In the Change Layout dialog, select GridLayout from the New Layout Type: menu and click on OK to change the layout type.
For the purposes of this tutorial, the GridLayout is only required to be large enough to contain the child views contained therein. As such, the height and width parameters of the view need to be changed from match_parent to wrap_content. To make this change, select the layout, either by clicking on the white background of the user interface canvas, or from within the Outline panel. With the view selected, unfold the Layout Parameters section of the Properties panel and change the Width and Height values to wrap_content as illustrated in Figure 1615-1:
[[Image:android_wrap_content.png|Changing the height and width properties of an Android GridLayout instance]]
Figure 1615-1
== An Overview of the GridLayout in the Graphical Layout Tool ==
The first point to note about the Graphical Layout tool is that some additional toolbar buttons (Figure 16 15-2) appear when a GridLayout is present in the user interface.
[[Image:graphical_layout_gridlayout_buttons.png|Graphical Layout editor GridLayout buttons]]
Figure 1615-2
The left-most button switches the tool in and out of Grid Model Mode. Grid Model Mode provides a greater level of control over adding, deleting and inserting rows and columns. When dragging views from the palette on to the layout canvas in this mode, options will be provided to insert and add rows to the GridLayout to accommodate the current position of the view as it is dragged over the GridLayout area. When in Grid Model Mode, the two right hand buttons are also visible, allowing new columns and rows to be added respectively. When rows and columns already exist within the grid, two additional buttons appear as shown in Figure 1615-3 for the purposes of deleting rows and columns:
[[Image:graphical_layout_gridlayout_remove_buttons.png|Graphical Layout editor GridLayout buttons when Grid Model Mode is enabled]]
Figure 1615-3
The second button from the left is the Show Structure button which turns on and off visible guidelines indicating the structure of the grid.
When Grid Model Mode is disabled, the add/remove buttons disappear and a new Snap to Grid button (the right-most of the buttons in Figure 1615-4) appears:
[[Image:graphical_layout_gridlayout_snap_to_grid.png|Graphical Layout editor GridLayout buttons when Grid Model Mode is off]]
Figure 1615-4
== Adding Views to GridLayout Cells ==
To place view objects into the cells of a GridLayout, simply click on the required view in the palette and drag it to the GridLayout instance in the layout canvas. As the view passes over the GridLayout, information will appear indicating the placement of the view if it is dropped at that point. Begin by clicking and dragging a Button view from the palette over to the top right hand corner of the GridLayout as illustrated in Figure 1615-5:
[[Image:gridlayout_add_view_to_cell.png|Inserting a view into a GridLayout cell]]
Figure 1615-5
As is evident from the message displayed by the tool, releasing the view at this point will position it in the cell referenced by the co-ordinates of 1,1 with the view aligned to the top left hand corner of the cell. As previously discussed, rows and columns in a GridLayout are numbered started at 0. For some reason, however, the Graphical Layout tool indexes cells starting at 1 instead of 0. Cell position 1,1, therefore, is actually the cell represented by the intersection of row 0 and column 0.
Release the view at this point and note that the Button is placed in the cell as shown in Figure 1615-6:
[[Image:gridlayout_view_in_cell.png|A view added to the cell of a GridLayout]]
Figure 1615-6
Repeat the above steps to place a second button into the cell located at position 2,1 so it appears immediately to the right of the first button.
As an example of how the Grid Model Mode allows columns and rows to be inserted, drag a third Button view to a position to the left of the first Button view to until the message shown in Figure 16 15-7 appears providing the option to shift column 1 right and insert the new view into the cell at 1,1:
[[Image:gridlayout_shift_columns_right.png|Inserting a new column into an Android GridLayout]]
Figure 1615-7
When the view is dropped at this position, the existing columns will be shifted one place to the right, a new column will be inserted at the left hand edge of the GridLayout and the new button placed into the cell.
Following the same sequence of steps, add one Button view on the second row of the grid positioned at cell location 1,2 so that the layout resembles that of Figure 1615-8:
[[Image:gridlayout_two_rows.png|Inserting views into the second row of a GridLayout manager]]
Figure 1615-8
== Implementing Cell Row and Column Spanning ==
For the next phase of this tutorial, two of the Button views will be modified to span multiple cells. To begin with, the far right hand button in the top row will be modified to span both rows. To achieve this, select the button from the layout and locate the Row Span property listed under Layout Parameters in the Properties panel. Once located enter the value of 2 into the field as highlighted in Figure 1615-9:
[[Image:gridlayout_rowspan.png|Setting the rowSpan property on an Android GridLayout child]]
Figure 1615-9
The gravity properties of the child views of a GridLayout dictate the size and positioning of those views relative to the cell in which those views are contained. By default, the views added so far in this chapter have been set up to be aligned with the top left hand corner of the containing cells. In order to make the above cell spanning visible, the gravity of the two Button views need to be changed so that the views occupy the space available.
One option is to center the view within the spanned cells. Begin by selecting the top right hand Button view. In the Properties panel, click on the “…” button on the Gravity line in the Layout Parameters section to display the range of available options (Figure 1615-10). From within the panel, turn off the top and left values and enable the center_vertical setting before clicking on “OK”.
[[Image:gridlayout_gravity_settings.png|Android GridLayout child gravity settings]]
Figure 1615-10
[[Image:gridlayout_cellspanning_center.png|GridLayout cell spanning with vertical center gravity]]
Figure 1615-11
[[Image:gridlayout_cellspanning.png|A completed Android GridLayout example]]
Figure 1615-12

Navigation menu