Linear Layout

LinearLayouts are used extensively in Android applications, and we used them in example code earlier. A LinearLayout asks that the contained Views be layed out as either a series of rows (vertical LinearLayout) or a series of columns (horizontal LinearLayout). In a vertical LinearLayout, all the rows are the same width (the width of the widest child). In a horizontal LinearLayout, there is one row of Views, all the same height (the height of the tallest child).

Figure 11-11 shows an example of a vertical LinearLayout, and Figure 11-12 is an example of a horizontal one. Both have EditText Views as children. Example 11-9 shows the XML resource file that produces the vertical layout, and Example 11-10 shows the file that created the horizontal one.

Example 11-9. Vertical LinearLayout resource file <?xml version="1.0" encoding="utf-8"?>

<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="fill_parent"

android:layout_height="wrap_content"

android:text="EditText1"

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

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

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

</LinearLayout>

EditTextl|

EditText2

EditText3

EditText4

Figure 11-11. Vertical LinearLayout

Example 11-10. Horizontal LinearLayout resource file <?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="horizontal" android:layout_width="fill_parent"

android:layout_height="fill_parent" >

<EditText android:layout_width="wrap_content" android:layout_height="fill_parent"

<EditText android:layout_width="wrap_content" android:layout_height="fill_parent"

<EditText android:layout_width="wrap_content" android:layout_height="fill_parent"

<EditText android:layout_width="wrap_content" android:layout_height="fill_parent"

</LinearLayout>

BSEflO 2:14 PM

LaycutWeight

El

E2

E3

E4

Figure 11-12. Horizontal LinearLayout

Gtaue2:14 PM

EditText2

EditText3

EditText4

Figure 11-13. Weighted LinearLayout

The horizontal layout might not look exactly as you would think: how come E4 is narrower than the other three? The answer is that there is a default minimum width for an EditText. If you build and run the horizontal example and type something into EditText E1, you'll see that it expands in width as the line gets longer, which is just what we asked for with android:layout_width = "wrap_content".

In addition to the usual dimensional parameters for child Views (width, height, padding), you can include a weight for each child (attribute android:layout_weight=;weight). The weight tells the layout manager how you want to use unfilled space, and defaults to a value of 0. If you specify children with weights greater than zero, the layout manager will allocate unused space to each child in proportion to its weight.

Figure 11-13 shows an example of a LinearLayout containing four EditTexts. The first two have no weights assigned. EditText3 has a weight of 1 and EditText4 has a weight of 2. The effect is to make EditText4 twice as big as EditText3, while EditText1 and EditText2 just split whatever space the layout leaves over.

0 0

Post a comment