Pro Android學習筆記(二五):使用者介面和控制(13):LinearLayout和TableLayout
佈局Layout
Layout是容器,用於對所包含的view進行佈局。layout是view的子類,所以可以作為view嵌入到其他的layout中。Android的layout有LinearLayout、TableLayout,RelativeLayout、FrameLayout、GridLayout。
線性佈局:LinearLayout
這是最常用的,有anroid:orientation來確定排列的方向。在view屬性中與佈局相關的常用的屬性有weight和gravity。下面是一個例子垂直的佈局。
<?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="two"
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是view中內容在該view中的位置,可以為top,buttom,left, center, right, top, bottom, center_vertical(超出範圍,將上下裁剪掉), clip_horizontal,fill,fill_vertical,fill_horizion。view有另一個屬性和它相似,就是android:layout_gravity,android:layout_gravity是view在容器中的位置。
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TEST"
android:layout_gravity="right"/>
android:layout_weight是view所佔空間的權重。0.0是比較特別的表示,表明必須佔據所需的空間,不參與空間的分割。在例子中one和three都是0.0,系統為他們預留了最上和最下的位置,而two佔據了1,表明剩餘參與分配的空間,由於剩餘只有two一個控制元件,全部給了two。0.0是很有用的方式,例如Pro Android學習筆記(十九):使用者介面和控制(7):ListView,能夠確保listview最下方留下一button的空間,無論list有多長,使用者都不需要拉到最後才看到button,確保button一定出現在螢幕的下方。
表格佈局:TableLayout
TableLayout是表格佈局方式。下面是最簡單的例子:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns: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="Two:"
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的子view是TableRow,TableRow是表格的一行。但是TableLayout也可以用其它view作為它的child,每個child就是一行,即使我們設定android:layout_width=”wrap_content“也不起作用,認為都是佔據一行位置。表格的列數是多少,由最多列的TableRow決定。試驗如下:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout ......>
<TableRow > <!-- 有2列 -->
<TextView android:text="One:" ……/>
<EditText android:text="Hello" ……/>
</TableRow>
<TableRow > <!-- 有3列,表格列數為3 -->
<TextView android:text="Two:" …… />
<EditText android:text="World" …… />
<EditText android:text="History" ……/>
</TableRow>
<!-- 採用EditText作為child,佔據整行,即便設定wrap_content,也是佔據整行 -->
<EditText android:text="Hello my Friend!"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/> </TableLayout>
預設下,表格的cell都是緊湊佈局,常會導致表格的最右方讓有空餘位置。如果我們希望某列或者某些列能夠延展,將空餘位置分配給這些列,可以通過strechColumns指出需要延展的列,從0開始計算。同樣的可以使用shirnkColumns設定可壓縮的列,如果其他列位置不夠,則壓縮所設定的shirnkColumns。
<?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="Two" ……/>
<TextView android:text="Three" ……/>
</TableRow>
</TableLayout>
下面,我們試驗幾個變化,同時溫習一下控制元件間隔的設定。
<?xml version="1.0" encoding="utf-8"?>
<TableLayout …… android:stretchColumns="0,1,2">
<TableRow >
<TextView android:text="One" …… />
<TextView android:text="Two"…… />
<TextView android:text="Three" …… />
</TableRow>
<!-- 通過layout_span,cell可以佔據多個位置 -->
<TableRow >
<EditText android:text="One" …… android:layout_span="2"/>
<EditText android:text="Two" ……/>
</TableRow>
<!-- 試驗padding,padding表示在view內部,內容到view邊框的距離,可以分別設定四邊 -->
<TableRow>
<Button android:text="One" ...... android:padding="30px"/>
<Button android:text="Two" … … />
<Button android:text="Three" … … />
</TableRow>
<!-- 試驗margin,margin是view與容器邊框的距離,這是設定view外部的留空。而padding是view內部的留空,一般而言,屬性中帶有layout_xxx,都是與外部容器之間的關係。 -->
<TableRow>
<Button android:text="One" …… />
<Button android:text="Two" …… android:layout_marginLeft="20px"/>
<Button android:text="Three" …… />
</TableRow>
</TableLayout>