The Table Layout Layout Manager

The TableLayout layout manager is an extension of LinearLayout. This layout manager structures its child controls into rows and columns. Listing 4-28 shows an example.

Listing 4-28. A Simple TableLayout

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent">

<TableRow>

<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="First Name:"/>

<EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Barack"/>

</TableRow>

<TableRow>

<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Last Name:"/>

<EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Obama"/>

</TableRow>

</TableLayout>

To use a TableLayout, you create an instance of TableLayout and then place TableRow elements within it. TableRow elements then contain the controls of the table. The user interface for Listing 4-28 is shown in Figure 4-13.

Common Controls

First Name: Last Name:

Figure 4-13. The TableLayout layout manager

Because the contents of a TableLayout are defined by rows as opposed to columns, Android determines the number of columns in the table by finding the row with the most cells. For example, Listing 4-29 creates a table with two rows where one row has two cells and the other has three cells (see Figure 4-14). In this case, Android creates a table with two rows and three columns.

Listing 4-29. An Irregular Table Definition

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent">

<TableRow>

<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="First Name:"/>

<EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Barack"/>

</TableRow>

<TableRow>

<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Last Name:"/>

<EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hussein"/>

<EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Obama"/>

</TableRow>

</TableLayout>

Common Controls

First Name:

Last Name:

Figure 4-14. An irregular TableLayout

Realize that we have a table with two rows, each of which has three columns. The last column of the first row is an empty cell.

In Listings 4-28 and 4-29, we populated the TableLayout with TableRow elements. Although this is the usual pattern, you can place any android.widget.View as a child of the table. For example, Listing 4-30 creates a table where the first row is an EditText (also see Figure 4-15).

Listing 4-30. Using an EditText Instead of a TableRow

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:stretchColumns="0,1,2">

<EditText android:text="Full Name:"/>

<TableRow>

<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Barack"/>

<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hussein"/>

<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Obama"/>

</TableRow>

</TableLayout>

Common Controls

Barack Hussein

Obama

Figure 4-15. An EditText as a child of a TableLayout

The user interface for Listing 4-30 is shown in Figure 4-15. Notice that the EditText takes up the entire width of the screen, even though we have not specified this in the XML layout. That's because children of TableLayout always span the entire row. In other words, children of TableLayout cannot specify android:layout_width="wrap_content"—they are forced to accept fill_parent. They can, however, set android:layout_height.

Because the content of a table is not always known at design time, TableLayout offers several attributes that can help you control the layout of a table. For example, Listing 4-30 sets the android:stretchColumns property on the TableLayout to "0,1,2". This gives a hint to the TableLayout that columns 0, 1, and 2 can be stretched if required, based on the contents of the table.

Similarly, you can set android:shrinkColumns to wrap the content of a column or columns if other columns require more space. You can also set android:collapseColumns to make columns invisible. Note that columns are identified with a zero-based indexing scheme.

TableLayout also offers android:layout_span. You can use this property to have a cell span multiple columns. This field is similar to the HTML colspan property.

At times, you might also need to provide spacing within the contents of a cell or a control. The Android SDK supports this via android:padding and its siblings. android:padding lets you control the space between a view's outer boundary and its content (see Listing 4-31).

Listing 4-31. Using android:padding

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent">

<EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="one" android:padding="40px" /> </LinearLayout>

Listing 4-31 sets the padding to 40px. This creates 40 pixels of white space between the EditText control's outer boundary and the text displayed within it. Figure 4-16 shows the same EditText with two different padding values. The UI on the left does not set any padding, while the one on the right sets android:padding="40px".

0 0

Post a comment