Android學習筆記④——頁面的佈局方式

時間 2019-11-17

原文原文鏈接

FrameLayout（幀佈局）html

這個佈局的特色是簡單的默認把每個視圖組件都放在邊框內且放在左上角，即便添加多個視圖組件，他們也都是重疊在左上角，新的視圖會遮擋住舊的視圖。能夠根據gravity來改變他所在的位置。java

android:layout_gravity="XXX"  XXX能夠爲 bottom、center、center_horizontal、center_vertical、end、left、right…… 簡單的來講就是上下左右、居中、水平、垂直居中等等等。

在佈局的文件中，添加以下代碼：android

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:app="http://schemas.android.com/apk/res-auto"
 4     xmlns:tools="http://schemas.android.com/tools"
 5     android:id="@+id/activity_main"
 6     android:layout_width="match_parent"
 7     android:layout_height="match_parent"
 8     tools:context="com.doliao.helloworld.MainActivity">
 9 
10     <ImageView
11         android:layout_width="300px"
12         android:layout_height="300px"
13         app:srcCompat="@android:color/holo_orange_dark"
14         android:id="@+id/imageView1" />
15 
16     <ImageView
17         android:layout_width="200px"
18         android:layout_height="200px"
19         app:srcCompat="@android:color/holo_blue_dark"
20         android:id="@+id/imageView2" />
21 
22     <ImageView
23         android:layout_width="100px"
24         android:layout_height="100px"
25         app:srcCompat="@android:color/holo_red_dark"
26         android:id="@+id/imageView3" />
27 
28 </FrameLayout>

上面是佈局的代碼，執行的圖像以下圖所示：網絡

LinearLayout（線性佈局）app

LinearLayout是相對佈局，其按照垂直的方向、或者是水平的方向來對其每個視圖，簡單的來講，就是若是你是垂直的方向，那麼你的視圖就是呈豎着的方向依次排下來，若是你的是水平的方向的話，那麼你的視圖就會呈水平的方向一次排下來。線性佈局管理器容許爲每個子視圖指定一個weight屬性，以控制每個子視圖在空間內的大小佈局

在佈局內文件內，添加代碼：測試

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:app="http://schemas.android.com/apk/res-auto"
 4     android:layout_width="match_parent"
 5     android:layout_height="match_parent"
 6     android:orientation="vertical">
 7 
 8     <ImageView
 9 
10         android:id="@+id/imageView1"
11         android:layout_width="300px"
12         android:layout_height="300px"
13         app:srcCompat="@android:color/holo_orange_dark" />
14 
15     <ImageView
16         android:id="@+id/imageView2"
17         android:layout_width="200px"
18         android:layout_height="200px"
19         app:srcCompat="@android:color/holo_blue_dark" />
20 
21     <ImageView
22         android:id="@+id/imageView3"
23         android:layout_width="100px"
24         android:layout_height="100px"
25         app:srcCompat="@android:color/holo_red_dark" />
26 </LinearLayout>

根據上面的測試代碼，運行的截圖以下左所示，若是改變 android:orientation="vertical" 的屬性，改爲horizontal 獲得的爲下右邊的截圖ui

在java代碼中設置垂直或者水平的佈局方式是調用組件的 setorientation(int )；方法參數1 爲垂直佈局，參數0爲水平佈局。spa

RelativeLayout(相對佈局)code

相對佈局，跟線性佈局已經簡單佈局比較來講，是一種較靈活性的佈局，簡單來講就是，相對於上一個控件，或者至關於上下左右的邊界的某一個位置，假若有一個視圖控件的ID爲A，還有一個視圖控件ID爲B,B能夠設置爲相對A的上、下、左、右的位置，相對的屬性有 layout_above、layout_below、layout_toRightOf、layout_toRightOf 等等等。

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:app="http://schemas.android.com/apk/res-auto"
 4     android:layout_width="match_parent"
 5     android:layout_height="match_parent">
 6 
 7     <ImageView
 8         android:id="@+id/imageView1"
 9         android:layout_width="200px"
10         android:layout_height="200px"
11         android:layout_centerInParent="true"
12         app:srcCompat="@android:color/holo_blue_dark" />
13 
14     <ImageView
15         android:id="@+id/imageView2"
16         android:layout_width="200px"
17         android:layout_height="200px"
18         android:layout_toRightOf="@id/imageView1"
19         app:srcCompat="@android:color/holo_orange_dark" />
20 
21     <ImageView
22         android:id="@+id/imageView4"
23         android:layout_width="200px"
24         android:layout_height="200px"
25         android:layout_below="@id/imageView1"
26         app:srcCompat="@android:color/holo_purple" />
27 
28     <ImageView
29         android:id="@+id/imageView3"
30         android:layout_width="200px"
31         android:layout_height="200px"
32         android:layout_toLeftOf="@id/imageView1"
33         app:srcCompat="@android:color/holo_red_dark" />
34 </RelativeLayout>

執行的截圖爲下圖所示：

看了上面的運行截圖，確定想，運行的圖片跟我想要的不同啊、按道理如我想的以1爲中心點，2在1的右邊，3在1的上方，4在1的下方，理想的應該是上面右圖所示，可是爲何不是呢，那是由於視圖控件1中有 android:layout_centerInParent="true" 屬性，只要在其餘控件中添加這個屬性就能夠了。

除了有相對於已存在的視圖組件，還有相對於當前的佈局邊框的，屬性有layout_alignParentRight(相對與大邊框的右邊)、layout_alignParentLeft(相對與大邊框的左邊)、layout_alignParentBottom(相對與大邊框的底部)、layout_alignParentTop="true"(相對與大邊框的頂部)、layout_centerInParent="true"(相對於大邊框的中間)等等等，屬性也能夠同時用，可是若是同時用相反的屬性，好比用了left又用right，那麼這個視圖將會變成左右平鋪。

在佈局文件中，添加以下代碼：

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:app="http://schemas.android.com/apk/res-auto"
 4     android:layout_width="match_parent"
 5     android:layout_height="match_parent">
 6 
 7     <ImageView
 8         android:id="@+id/imageView1"
 9         android:layout_width="200px"
10         android:layout_height="200px"
11         android:layout_alignParentLeft="true"
12         app:srcCompat="@android:color/holo_blue_dark" />
13 
14     <ImageView
15         android:id="@+id/imageView2"
16         android:layout_width="200px"
17         android:layout_height="200px"
18         android:layout_alignParentRight="true"
19         android:layout_alignParentBottom="true"
20         app:srcCompat="@android:color/holo_orange_dark" />
21 
22     <ImageView
23         android:id="@+id/imageView3"
24         android:layout_width="200px"
25         android:layout_height="200px"
26         android:layout_alignParentRight="true"
27         app:srcCompat="@android:color/holo_red_dark" />
28 
29     <ImageView
30         android:id="@+id/imageView4"
31         android:layout_width="200px"
32         android:layout_height="200px"
33         android:layout_centerInParent="true"
34         android:layout_alignParentLeft="true"
35         android:layout_alignParentRight="true"
36         app:srcCompat="@android:color/holo_purple" />
37 
38 </RelativeLayout>

運行的截圖爲下面所示，對於控件的id與數字對應。

相對佈局除了上面列出來的一些屬性以外，還有其餘不少的屬性以下所示(參照 http://www.miui.com/thread-574167-1-1.html )

相對於兄弟元素
android:layout_below="@id/aaa"：在指定View的下方
android:layout_above="@id/xxx"：在指定View的上方
android:layout_toLeftOf="@id/bbb"：在指定View的左邊
android:layout_toRightOf="@id/cccc"：在指定View的右邊
相對於父元素
android:layout_alignParentLeft="true"：在父元素內左邊
android:layout_alignParentRight="true"：在父元素內右邊
android:layout_alignParentTop="true"：在父元素內頂部
android:layout_alignParentBottom="true"：在父元素內底部
對齊方式
android:layout_centerInParent="true"：居中佈局
android:layout_centerVertical="true"：水平居中佈局
android:layout_centerHorizontal="true"：垂直居中佈局
android:layout_alignTop="@id/xxx"：與指定View的上邊界一致
android:layout_alignBottom="@id/xxx"：與指定View下邊界一致
android:layout_alignLeft="@id/xxx"：與指定View的左邊界一致
android:layout_alignRight="@id/xxx"：與指定View的右邊界一致
間隔
android:layout_marginBottom=""; 離某元素底邊緣的距離
android:layout_marginLeft=""; 離某元素左邊緣的距離
android:layout_marginRight ="";離某元素右邊緣的距離
android:layout_marginTop=""; 離某元素上邊緣的距離
android:layout_paddingBottom=""; 離父元素底邊緣的距離
android:layout_paddingLeft=""; 離父元素左邊緣的距離
android:layout_paddingRight ="";離父元素右邊緣的距離
android:layout_paddingTop=""; 離父元素上邊緣的距離

GridLayout(網格佈局)

網格佈局是在androd4.0中引入的，它是使用一個由細線構成的矩形網絡，在一系列行和列中添加布局的視圖。

在佈局文件中，添加以下代碼：

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="300px"
 5     android:orientation="horizontal"
 6     android:rowCount="3"
 7     android:columnCount="3"
 8     >
 9 
10     <Button
11         android:id="@+id/b1"
12         android:width="20px"
13         android:height="20px"
14         android:text="1"
15         />
16     <Button
17         android:id="@+id/b2"
18         android:width="20px"
19         android:height="20px"
20         android:text="2"
21         />
22     <Button
23         android:id="@+id/b3"
24         android:width="20px"
25         android:height="20px"
26         android:text="3"
27         />
28 
29     <Button
30         android:id="@+id/b4"
31         android:layout_row="2"
32         android:layout_columnSpan="2"
33         android:width="20px"
34         android:height="20px"
35         android:text="4"
36         />
37 
38     <Button
39         android:id="@+id/b5"
40         android:width="20px"
41         android:height="20px"
42         android:text="5"
43         />
44 </GridLayout>

運行的截圖以下圖所示:

由於在gridlayout的頭部設置了 android:orientation="horizontal" 即按照行的方式來依次顯示控件，因此順序爲一、二、3… 依次從左到右，其中的4佔用了2個格子，由於參數 android:layout_columnSpan="2" 表示該控件佔2行。它和 android:layout_columnSpan相似；而 android:layout_row="2" 表示在第3行顯示該控件；android:layout_row="2"，表示在第3行顯示該控件。它和 android:layout_column相似，行的基數是從0開始的。

AbsoluteLayout(絕對佈局)

絕對佈局是給視圖組件指定一個左邊，就是當前的佈局內 x 、 y 軸的座標，可是如今已經基本不用了，因此這裏就不記錄了。

TableLayout(表格佈局) 參考了傳送門

對於表格佈局來講，與網格佈局是有必定的類似的。屬性有

android:stretchColumns
設置可伸展的列。該列能夠向行方向伸展，最多可佔據一整行。
android:shrinkColumns
設置可收縮的列。當該列子控件的內容太多，已經擠滿所在行，那麼該子控件的內容將往列方向顯示。
android:collapseColumns
設置要隱藏的列。

android:layout_column
指定該單元格在第幾列顯示
android:layout_span
指定該單元格佔據的列數（未指定時，爲1）

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:orientation="vertical"
 6     >
 7 
 8     <TextView
 9         android:id="@+id/text1"
10         android:layout_width="wrap_content"
11         android:layout_height="wrap_content"
12         android:text="①隱藏、收縮、擴展" />
13 
14     <TableLayout
15         android:layout_width="match_parent"
16         android:layout_height="wrap_content"
17         android:collapseColumns="2"
18         android:shrinkColumns="1"
19         android:stretchColumns="0">
20         <TableRow>
21             <Button
22                 android:id="@+id/b1"
23                 android:text="第一列能夠行擴展" />
24             <Button
25                 android:id="@+id/b2"
26                 android:text="第二列能夠列擴展" />
27             <Button
28                 android:id="@+id/b3"
29                 android:text="第三列是被隱藏的列" />
30         </TableRow>
31         <TableRow>
32             <TextView android:text="這行設置了stretchColumns能夠行方向擴展"/>
33             <TextView android:text="這行設置了shrinkColumns能夠列方向擴展"/>
34         </TableRow>
35     </TableLayout>
36     <TextView
37         android:id="@+id/text2"
38         android:layout_width="wrap_content"
39         android:layout_height="wrap_content"
40         android:text="②單元格的屬性設置" />
41     <TableLayout
42         android:layout_width="wrap_content"
43         android:layout_height="wrap_content">
44         <TableRow>
45             <Button
46                 android:id="@+id/b11"
47                 android:text="第一列" />
48             <Button
49                 android:id="@+id/b22"
50                 android:text="第二列" />
51             <Button
52                 android:id="@+id/b33"
53                 android:text="第三列" />
54         </TableRow>
55         <TableRow>
56             <TextView android:text="橫跨了1到2列………………………"
57                 android:layout_span="2"
58                 android:layout_column="1"/>
59         </TableRow>
60     </TableLayout>
61 
62     <TextView
63         android:id="@+id/text3"
64         android:layout_width="wrap_content"
65         android:layout_height="wrap_content"
66         android:text="③單元格的分佈與均勻分佈" />
67     <TableLayout
68         android:layout_width="match_parent"
69         android:layout_height="wrap_content">
70         <TableRow>
71             <Button
72                 android:id="@+id/b111"
73                 android:text="第一列" />
74             <Button
75                 android:id="@+id/b222"
76                 android:text="第二列" />
77             <Button
78                 android:id="@+id/b333"
79                 android:text="第三列" />
80         </TableRow>
81         <TableRow>
82             <Button
83                 android:id="@+id/b1111"
84                 android:layout_weight="1"
85                 android:text="第一列" />
86             <Button
87                 android:id="@+id/b2222"
88                 android:layout_weight="1"
89                 android:text="第二列" />
90             <Button
91                 android:id="@+id/b3333"
92                 android:layout_weight="1"
93                 android:text="第三列" />
94         </TableRow>
95     </TableLayout>
96 </LinearLayout>