"Turn" Pro Android Learning Note (25): User interface and Control (+): LinearLayout and Tablelayout

Directory (?) [-]

1. Layout layouts
1. Linear layout LinearLayout
2. Table Layout Tablelayout

Layout layouts

Layout is a container that is used to lay out the contained view. Layout is a subclass of view, so it can be embedded in other layout as a view. Android layout has linearlayout, Tablelayout,relativelayout, Framelayout, GridLayout.

Linear layout: LinearLayout

This is most commonly used, and there are anroid:orientation to determine the direction of the arrangement. The common properties associated with layouts in the View property are weight and gravity. Here is an example of a vertical layout.

<?xml version= "1.0" encoding= "Utf-8"?>
<linearlayout ...android:orientation= "Vertical">
<edittext android:layout_width= "Match_parent"
android:layout_height= "Wrap_content"
android:text= "One"
android:gravity= "left"
android:layout_weight= "0.0"/>
<edittext android:layout_width= "Match_parent"
android:layout_height= "Wrap_content"
Android:text= "The Other"
android:gravity= "Center"
Android:layout_weight= "1.0"/>
<edittext android:layout_width= "Match_parent"
android:layout_height= "Wrap_content"
Android:text= "three"
android:gravity= "Right"
android:layout_weight= "0.0"/>
</LinearLayout>

Android:gravity is the position of the content in the view in the view, which can be top,buttom,left, center, right, top, bottom, center_vertical (out of range, cropped up and down), clip _horizontal,fill,fill_vertical,fill_horizion. View has another property similar to it, that is, the android:layout_gravity,android:layout_gravity is the position of the view in the container.

<button android:layout_width= "Wrap_content"
android:layout_height= "Wrap_content"
android:text= "TEST"
android:layout_gravity= "right"/>

The android:layout_weight is the weight of the space occupied by the view. 0.0 is a more specific indication that it is necessary to occupy the space required and not to participate in the division of space. In the example, both one and three are 0.0, the system has reserved the top and bottom positions for them, and the other has occupied 1, indicating that the remaining allocated space, because there are only a few of the remaining controls, are given to both. 0.0 is a very useful way, such as Pro Android Learning Note (19): User interface and Control (7): ListView, to ensure that the bottom of the ListView left a button, no matter how long the list, the user does not need to pull to the end to see the button, Make sure the button appears below the screen.

Table layout: Tablelayout

Tablelayout is the way the table is laid out. The following is the simplest example:

<?xml version= "1.0" encoding= "Utf-8"?>
<TablelayoutXmlns:android= "Http://schemas.android.com/apk/res/android"
Android:layout_width= "Match_parent"
android:layout_height= "Match_parent" >
<tablerow >
<textview android:text= "one:"
Android:layout_width= "Wrap_content"
android:layout_height= "Wrap_content"/>
<edittext android:text= "Hello"
Android:layout_width= "Wrap_content"
android:layout_height= "Wrap_content"/>
</TableRow>

<tablerow >
<textview android:text= "both:"
Android:layout_width= "Wrap_content"
android:layout_height= "Wrap_content"/>
<edittext android:text= "World"
Android:layout_width= "Wrap_content"
android:layout_height= "Wrap_content"/>
</TableRow>

</TableLayout>

Tablelayout's Child view is Tablerow,tablerow is a row of the table. But Tablelayout can also use other view as its child, each child is a row, even if we set android:layout_width= "Wrap_content" does not work, think that all occupy a row position. The number of columns in the table, determined by the TableRow of the most columns. The test is as follows:

<?xml version= "1.0" encoding= "Utf-8"?>
<tablelayout ......>
<tablerow > <!--has 2--
<textview android:text= "one:" ....../>
<edittext android:text= "Hello" ....../>
</TableRow>

<tablerow > <!--has 3 columns and table columns of 3--
<textview android:text= "The other:" .../>
<edittext android:text= "World" .../>
<edittext android:text= "History" ....../>
</TableRow>
<!--use EditText as child, occupy the entire line, even if set wrap_content, also occupy whole line--
<edittext android:text= "Hello my friend!"
Android:layout_width= "Wrap_content"
android:layout_height= "Wrap_content"/>
</TableLayout>

Lack of savings, the table cell is a compact layout, often leads to the right of the table to have a vacant position. If we want a column or some column to be stretched, assigning the spare location to those columns, you can indicate the columns that need to be stretched by Strechcolumns, starting with 0. Similarly, you can use Shirnkcolumns to set compressible columns and compress the set of Shirnkcolumns if other column locations are not sufficient.

<?xml version= "1.0" encoding= "Utf-8"?>
<tablelayout ...
android:stretchcolumns= "0,1,2" >
<edittext android:text= "full Space here" .../>
<tablerow >
<textview android:text= "One" ....../>
<textview android:text= "The other" ....../>
<textview android:text= "three" ....../>
</TableRow>
</TableLayout>

Below, let's try a few changes and review the settings for the control interval.

<?xml version= "1.0" encoding= "Utf-8"?>
<tablelayout. android:stretchcolumns= "0,1,2" >
<tablerow >
<textview android:text= "one" .../>
<textview android:text= ".../>
<textview android:text= "three" .../>
</TableRow>
<!--can occupy multiple locations via Layout_span,cell--
<tablerow >
<edittext android:text= "One" ...android:layout_span= "2"/>
<edittext android:text= "The other" ....../>
</TableRow>
<!--test padding,padding represents the distance from the view border within the view, which can be set by four--and
<TableRow>
<button android:text= "One" ...android:padding= "30px"/>
<button android:text= ".../>
<button android:text= "three" .../>
</TableRow>
<!--test Margin,margin is the distance between the view and the container's border, which is left blank to set the view outside. The padding is left blank inside the view, in general, the attribute with Layout_xxx, is the relationship with the external container. -
<TableRow>
<button android:text= "one" .../>
<button android:text= "...android:layout_marginleft= "20px"/>
<button android:text= "three" .../>
</TableRow>
</TableLayout>

RELATED Links: My Android development related articles

"Turn" Pro Android Learning Note (25): User interface and Control (+): LinearLayout and Tablelayout