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


 

FrameLayout(幀布局)

這個布局的特點是簡單的默認把每一個視圖組件都放在邊框內且放在左上角,即使添加多個視圖組件,他們也都是重疊在左上角,新的視圖會遮擋住舊的視圖。可以根據gravity來改變他所在的位置。

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

在布局的文件中,添加如下代碼:

 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(線性布局)

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 得到的為下右邊的截圖

                        

 在java代碼中設置垂直或者水平的布局方式是 調用 組件的 setorientation(int  );方法  參數1 為垂直布局,參數0為水平布局。

RelativeLayout(相對布局)

 相對布局,跟線性布局已經簡單布局比較來說,是一種較靈活性的布局,簡單來說就是,相對於上一個控件,或者相當於上下左右的邊界的某一個位置,假如有一個視圖控件的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" 即按照行的方式來依次顯示控件,所以順序為  1、2、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>

 

 運行之后的截圖如下:

 

 

以上布局就是常見的布局,當然還有其他的布局,等學到了在做筆記吧,從簡到難,慢慢來!

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM