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>
運行之后的截圖如下:
以上布局就是常見的布局,當然還有其他的布局,等學到了在做筆記吧,從簡到難,慢慢來!