Android學習筆記 RelativeLayout,TableLayout布局
一.RelativeLayout相對布局方式.
RelativeLayout顧名思義，相對布局，在這個容器內部的子元素們可以使用彼此之間的相對位置或者和容器間的相對位置來進行定位。
注意：不能在RelativeLayout容器本身和他的子元素之間產生循環依賴，比如說，不能將RelativeLayout的高設置成為WRAP_CONTENT的時候將子元素的高設置成為 ALIGN_PARENT_BOTTOM。
RelativeLayout相關的布局屬性:
android:layout_above 將該控件置於給定ID的控件之上
android:layout_below 將該控件的置於給定ID控件之下
android:layout_toLeftOf 將該控件置於給定ID的控件之左
android:layout_toRightOf 將該控件置於給定ID的控件之右
RelativeLayout布局中相對於父控件來說位置屬性：
android:layout_alignParentLeft 如果為True，該控件位於父控件的左部
android:layout_alignParentRight 如果為True，該控件位於父控件的右部
android:layout_alignParentTop 如果為True，該控件位於父控件的頂部
android:layout_alignParentBottom 如果為True，該控件位於父控件的底部
RelativeLayout布局時對齊相關的屬性：
android:layout_alignBaseline 該控件基線對齊給定ID的基線
android:layout_alignBottom 該控件於給定ID的控件底部對齊
android:layout_alignLeft 該控件於給定ID的控件左對齊
android:layout_alignRight 該控件於給定ID的控件右對齊
android:layout_alignTop 該控件於給定ID的控件頂對齊
android:layout_centerHorizontal 如果為True，該控件將被置於水平方向的中央
android:layout_centerInParent 如為Ture，該控件將被置於父控件水平方向和垂直方向
android:layout_centerVertical 如果為True，該控件將被置於垂直方向的中央
Relative布局一：效果圖：RelativeLayoutOne布局
布局源碼：
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="10px" android:background="#00aa00" tools:context=".RelativeLayoutActivity" > <TextView android:id="@+id/tv_heard" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:textSize="12pt" android:text="XXX系統登錄界面" /> <TextView android:id="@+id/tv_account" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_below="@id/tv_heard" android:layout_marginTop="30px" android:text="用戶名:"/> <EditText android:id="@+id/txt_account" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_below="@id/tv_heard" android:layout_toRightOf="@id/tv_account" android:layout_alignBaseline="@id/tv_account"/> <TextView android:id="@+id/tv_pwd" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/tv_account" android:layout_marginTop="30px" android:text="密 碼:"/> <EditText android:id="@+id/txt_pwd" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_below="@id/txt_account" android:layout_toRightOf="@id/tv_pwd" android:layout_alignBaseline="@id/tv_pwd"/> <Button android:id="@+id/btn_exit" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/txt_pwd" android:layout_alignParentRight="true" android:layout_marginTop="30px" android:text="退出"/> <Button android:id="@+id/btn_login" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/txt_pwd" android:layout_toLeftOf="@id/btn_exit" android:layout_marginTop="30px" android:layout_marginRight="50px" android:text="登錄"/> </RelativeLayout>
RelativeLayoutSecond布局效果圖：使用 LinearLayout和 RelativeLayout結合布局更加快捷方便。
布局源碼：
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#00aaff" android:padding="10px" tools:context=".RelativeLayoutSecondActivity" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:textSize="12pt" android:text="XXX系統登錄界面" /> <LinearLayout android:id="@+id/linear_one" android:layout_below="@id/tv_heard" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="用戶名:"/> <EditText android:layout_width="fill_parent" android:layout_height="wrap_content"/> </LinearLayout> <LinearLayout android:id="@+id/linear_second" android:layout_height="wrap_content" android:layout_width="fill_parent" android:orientation="horizontal" android:layout_below="@id/linear_one"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="密 碼:"/> <EditText android:layout_width="fill_parent" android:layout_height="wrap_content"/> </LinearLayout> <LinearLayout android:id="@+id/linear_third" android:layout_height="wrap_content" android:layout_width="fill_parent" android:orientation="horizontal" android:layout_below="@id/linear_second" android:gravity="right"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="登錄"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="30px" android:text="退出"/> </LinearLayout> </RelativeLayout>
二.TableLayout表格布局:
1.TableLayout和Html網頁上見到的Table有所不同，TableLayout沒有邊框的
2.它是由多個TableRow對象組成，每個TableRow可以有0個或多個單元格，每個單元格就是一個View。這些TableRow，單元格不能設置layout_width,寬度默認是fill_parent的，只有高度layout_height可以自定義，默認是wrap_content。
3.在TableRow中的單元格可以為empty，並且通過android:layout_column可以設置index值（索引從0開始）實現跳開某些單元格，直接報控件放置指定索引的單元格中。
4.添加View,設置layout_height以及背景色，就可以實現一條間隔線。android:layout_span可以設置合並幾個單元格。
TableLayout主要屬性介紹:
android:collapseColumns：隱藏指定的列
android:shrinkColumns：收縮指定的列以適合屏幕，不會擠出屏幕
android:stretchColumns：盡量把指定的列填充空白部分
android:layout_column:控件放在指定的列
android:layout_span:該控件所跨越的列數
先布局一個效果圖：
布局源碼：
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".TableLayoutOneActivity" > <TableRow> <Button android:text="第一行第一列"/> <Button android:text="第一行第二列"/> <Button android:text="第一行第三列"/> </TableRow> <TableRow> <Button android:text="第二行第一列"/> <Button android:text="第二行第二列"/> <Button android:text="第二行第三列"/> </TableRow> <TableRow> <Button android:text="第三行第一列"/> <Button android:text="第三行第二列"/> </TableRow> </TableLayout>
現在隱藏第二列：android:collapseColumns="1" 如果同時隱藏 第二列和第三列 可以這樣：android:collapseColumns="1,2";用,逗號分割。
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:collapseColumns="1" <!--影藏第二列 列的索引從0開始 --> tools:context=".TableLayoutOneActivity" >
效果圖：
android:stretchColumns="2" 使第三列填充整個屏幕 如果想使 第一列 和 第三列 填充剩余空白區域 （第一列 和 第二列 相同寬度填充空白區域）
設置為：android:stretchColumns="0,2";
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:collapseColumns="1" android:stretchColumns="2" <!--使第三列填充剩余空白部分 -->
tools:context=".TableLayoutOneActivity">
效果圖： android:stretchColumns="0,2"; 效果圖：
android:shrinkColumns：收縮指定的列以適合屏幕，不會擠出屏幕
<TableRow> <Button android:text="第一行第一列"/> <Button android:text="第一行第二列"/> <Button android:text="第一行第三列第一行第三列第一行第三列第一行第三列"/> </TableRow>
將第一行第三列 設置的文本過長。導致多與的文本超出屏幕無法顯示：如圖：
設置 android:shrinkColumns="2";第三列收縮 以適應屏幕的寬度。此時第三列出現換行。
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:shrinkColumns="2"<!---第三列收縮以適應屏幕的寬度--> tools:context=".TableLayoutOneActivity" >
效果圖：
注意：android:shrinkColumns和android:stretchColumns的值都是以0開始的index，
但必須是string值，即用"1,2,5"來表示。可以用"*"來表示all columns。而且同一column可以同時設置為shrinkable和stretchable。
android:layout_column="2":控件放在指定的列,將Button放到第三行第三列的位置。
布局源碼：
<TableRow> <Button android:text="第三行第一列"/> <Button android:text="第三行第二列" android:layout_column="2"/> <!---將此Button放置到第三列--> </TableRow>
效果圖：
android:layout_span="2":該控件所跨越的列數 。此空間跨越2列
<TableRow> <Button android:text="第三行第一列"/> <Button android:text="第三行第二列" android:layout_span="2"/><!---此Button跨越2列。占據第二列和第三列--> </TableRow>
效果圖：
三：TableLayout實現邊框效果：
為了醒目，需要給TableLayout設定邊框來區分不同的表格中的信息：
主要是通過設定TableLayout、TableRow 、View顏色反襯出邊框的顏色。
例如TableLayout的android:layout_margin="2dip"設置為這個數字 ，
在指定一個背景色android:background="#00ff00"，它里面的顏色也是這樣子的設置，就可以呈現出帶邊框的效果了。
四：滾動：
關於TableLayout和HorizontalScrollView一起使用時的寬度問題
我有一個TableLayout，它的內容是動態生成的。我遇到了下面的問題：
當動態生成的一行的內容太長時，靠右邊的內容會被遮住了。於是我想要這個TableLayout在橫向上可以滾動。
解決的辦法是，用HorizontalScrollView包裝TableLayout，這樣，當內容很長時，就會出現橫向滾動條。
修改圖：
布局源碼：
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:fillViewport="true" android:background="#0000ff"> <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_margin="2px" android:background="#00ff00" tools:context=".TableLayoutOneActivity" > <TableRow> <Button android:text="第一行第一列"/> <Button android:text="第一行第二列"/> <Button android:text="第一行第三列第一行第三列第一行第三列第一行第三列第一行第三列"/> </TableRow> <!-- 設置分割線 --> <View android:layout_height="2dip" android:background="#ff0000"/> <TableRow> <Button android:text="第二行第一列"/> <Button android:text="第二行第二列"/> <Button android:text="第二行第三列"/> </TableRow> <!-- 設置分割線 --> <View android:layout_height="2dip" android:background="#ff0000"/> <TableRow> <Button android:text="第三行第一列"/> <Button android:text="第三行第二列"/> </TableRow> </TableLayout> </HorizontalScrollView>
如果：隱藏第三行，此時行的內容比較少，將不能填充所以空白區域就會 出現 行不能占滿這個屏幕:
將布局代碼修改為：
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:fillViewport="true" <!--刪除此處代碼--> android:background="#0000ff"> <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_margin="2px" android:background="#00ff00" android:collapseColumns="2"<---添加此代碼隱藏數據最多的行--> tools:context=".TableLayoutOneActivity" >
效果圖就會出現：
在源碼中添加：
設置HorizontalScrollView的android:fillViewport="true" TableLayout填充剩余部分。
效果為：
注意：
但此時又出現了另一個問題，加上HorizontalScrollView后，雖然我已經設了TableLayout的寬度是fill_parent。但當內容較少時，TableLayout還是根據內容自適應寬度，不能滿屏。
此時，需要設置一個屬性就能解決問題了。設置HorizontalScrollView的android:fillViewport="true"。也就是設置是否將HorizontalScrollView的內容寬度拉伸以適應視口(viewport)