6.Android-五大布局
- 2020 年 2 月 11 日
- 筆記
Android 五大布局如下所示:
|
LinearLayout |
線性布局 |
只能指定一個方向(垂直/水平)來布局 |
|---|---|---|
|
RelativeLayout |
相對布局 |
通過某個控制項為參照物，來定位其它控制項的位置的布局方式（解決螢幕適配) |
|
TableLayout |
表格布局 |
如果子元素為<TableRow>，則可在一行中放各種控制項 |
|
FrameLayout |
幀布局 |
子元素任意 |
|
AbsoluteLayout |
絕對布局 |
通過android:layout_x和android:layout_y來指定元素絕對位置,由於不支援適配,已過時 |
1.如何創建布局
在layout下選擇New Android XML File：
然後輸入名稱,即可完成:
2.LinearLayout線性布局
LinearLayout特有的屬性如下所示:
android:orientation= //設置布局方向,填寫「horizontal」或者「vertaical」
vertaical方向
xml如下所示:
對應的布局則是垂直向下的,一排只能擁有一個控制項:
horizontal方向
xml如下所示:
對應的布局則是水平向右的,一列只能擁有一個控制項:
設置控制項不同比例
如果要想設置兩個控制項的比例大小,則設置android:layout_weight(不是android:layout_width),值越大則比例越大(垂直布局則設置高度大小比例,水平布局則設置寬度大小比例)
以垂直線性布局為例,我們設置TextView1佔據高度為2倍,其餘為1倍
xml設置如下:
介面如下所示:
3.RelativeLayout相對布局
為某一個組件為參照物，來定位下一個組件的位置的布局方式。一般為了解決螢幕解析度不同的自適應問題（適配神器）
LinearLayout特有的屬性如下所示:
|
android:layout_alignParentLeft android:layout_alignParentRight android:layout_alignParentTop android:layout_alignParentBottom |
「true」 「false」 |
控制項在LinearLayout布局中的相對位置 |
|---|---|---|
|
android:orientation |
「horizontal」 「vertaical」 |
布局中子控制項排布方向 |
|
android:layout_toRightOf android:layout_toLeftOf android:layout_below android:layout_above |
「@+id/***」 |
控制項和某個控制項的位置關係(居右、左、下、上) |
|
android:layout_alignTop android:layout_alignBottom android:layout_alignLeft android:layout_alignRight android:layout_alignBaseline |
「@+id/***」 |
控制項與其他控制項對齊(頂部對齊、底部、左、右對齊、基準線(文本內容)對齊) |
|
android:layout_centerHorizontal android:layout_centerVirtical android:layout_centerInParent |
「true」 「false」 |
指定控制項位於水平/垂直/父控制項的中間位置 |
如下圖所示:
注意:在指定位置關係時，引用的ID必須在引用之前，先被定義，否則將出現異常。
示例-通過RelativeLayout實現固定九宮格(如果要動態實現增刪格子,最好還是用GridLayout)
xml如下:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <Button android:id="@+id/button5" android:layout_width="50dp" android:layout_height="50dp" android:layout_centerInParent="true" android:text="5" /> <Button android:id="@+id/button2" android:layout_width="50dp" android:layout_height="50dp" android:layout_centerHorizontal="true" android:layout_above="@id/button5" android:text="2" /> <Button android:id="@+id/button8" android:layout_width="50dp" android:layout_height="50dp" android:layout_centerHorizontal="true" android:layout_below="@id/button5" android:text="8" /> <Button android:id="@+id/button1" android:layout_width="50dp" android:layout_height="50dp" android:layout_alignTop="@id/button2" android:layout_toLeftOf="@id/button2" android:text="1" /> <Button android:id="@+id/button3" android:layout_width="50dp" android:layout_height="50dp" android:layout_alignTop="@id/button2" android:layout_toRightOf="@id/button2" android:text="3" /> <Button android:id="@+id/button4" android:layout_width="50dp" android:layout_height="50dp" android:layout_alignTop="@id/button5" android:layout_toLeftOf="@id/button5" android:text="4" /> <Button android:id="@+id/button6" android:layout_width="50dp" android:layout_height="50dp" android:layout_alignTop="@id/button5" android:layout_toRightOf="@id/button5" android:text="6" /> <Button android:id="@+id/button7" android:layout_width="50dp" android:layout_height="50dp" android:layout_alignTop="@+id/button8" android:layout_toLeftOf="@+id/button8" android:text="7" /> <Button android:id="@+id/button9" android:layout_width="50dp" android:layout_height="50dp" android:layout_alignTop="@+id/button8" android:layout_toRightOf="@+id/button8" android:text="9" /> </RelativeLayout>
布局如下:
4.FrameLayout幀布局
默認所有的控制項都是左上對齊(每個控制項對應每個介面)。控制項可以通過android:layout_gravity屬性控制自己在父控制項中的位置。
而android:gravity表示:設置文本位置，如設置成」center」，文本將居中顯示。
比如下面xml:
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <TextView android:id="@+id/textView1" android:layout_width="100dp" android:layout_height="50dp" android:textColor="#000000" android:background="#ffFF00" android:text="TextView1" /> <TextView android:id="@+id/textView2" android:layout_width="200dp" android:layout_height="30dp" android:textColor="#000000" android:background="#00FFf0" android:text="TextView2" /> </FrameLayout>
布局如下:
可以看到TextView1已經被覆蓋了.
修改textview1,設置為居中:
布局效果如下所示:
5.TableLayout表格布局
TableLayout特有元素TableRow
通過TableRow可以在一行中放各種控制項.
示例如下:
<?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:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView1" android:background="#FF0000"/> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView2" android:background="#FFF000" /> </TableRow> <TextView android:id="@+id/textView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView3" /> </TableLayout>
布局效果如下:
如上圖所示,可以看到只有通過TableRow元素包含的控制項才能佔據為1行.
TableLayout特有屬性如下所示:
- android:collapseColumns: 設置需要被隱藏的列的序號
- android:shrinkColumns: 設置允許被收縮的列的列序號
- android:stretchColumns: 設置運行被拉伸的列的列序號
collapseColumns和android:stretchColumns屬性示例
<?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" android:collapseColumns="1,2" android:stretchColumns="3" > <TableRow> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView0" android:background="#FF0000"/> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView1" android:background="#FFF000" /> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="2" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="3" /> <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="4" /> </TableRow> </TableLayout>
布局效果如下:
由於設置android:collapseColumns="1,2",所以TextView1和TextView2所在的列被隱藏了.
然後android:stretchColumns="3",由於第一個button位於第3列,所以被拉伸了(列數是從0開始的)
android:shrinkColumns屬性示例
<?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" android:shrinkColumns="1" > <TableRow> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView0" android:background="#FF0000"/> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView1" android:background="#FFF000" /> <Button android:id="@+id/button1" android:layout_width="80dp" android:layout_height="wrap_content" android:text="2" /> <Button android:id="@+id/button2" android:layout_width="80dp" android:layout_height="wrap_content" android:text="3" /> <Button android:id="@+id/button3" android:layout_width="80dp" android:layout_height="wrap_content" android:text="4" /> </TableRow> </TableLayout>
布局如下所示:
由於android:shrinkColumns="1",所以第二個列支援收縮.
6.AbsoluteLayout絕對布局
已過時, 通過android:layout_x和android:layout_y來指定元素絕對位置,所以不能適配各個不同螢幕大小.
示例如下:
<?xml version="1.0" encoding="utf-8"?> <AbsoluteLayoutxmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_x="91dp" android:layout_y="108dp" android:text="TextView" /> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_x="130dp" android:layout_y="202dp" android:text="Button" /> </AbsoluteLayout>
布局如下:
