Android中的五大布局

本文轉載自查看原文 2016-11-23 00:01 2794 Android

Android中的五大布局

1.了解布局

　　一個豐富的界面總是要由很多個控件組成的，那我們如何才能讓各個控件都有條不紊地擺放在界面上，而不是亂糟糟的呢？這就需要借助布局來實現了。布局是一種可用於放置很多控件的容器，它可以按照一定的規律調整內部控件的位置，從而編寫出精美的界面。當然，布局的內部除了放置控件外，也可以放置布局，通過多層布局的嵌套，我們就能夠完成一些比較復雜的界面實現.

2.布局的分類

　 線性布局(LinearLayout)

　 相對布局(RelativeLayout)

　 表格布局(TableLayout)

　 幀布局(FrameLayout)

　 絕對布局(了解)

下面我們來看一下線性布局

　　創建線性布局步驟:

　　首先我們找到Android項目res/layout

　　然后右鍵,彈出下面操作

　　當創建布局文件后,我們來瀏覽一下該文件的內容

 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"
 6  android:orientation="vertical" >
 7 
 8   
 9 </LinearLayout>

　　然后我們修改一下文件中的內容

 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"
 6  android:orientation="vertical" >
 7 
 8    
34 
35    
36      <TextView 37         android:layout_width="wrap_content"
38  android:layout_height="wrap_content"
39  android:background="#ffff00"
40  android:text="AAA"
41  android:textSize="25sp" />
45     
46          <TextView 47         android:layout_width="wrap_content"
48  android:layout_height="wrap_content"
49  android:background="#eee"
50  android:text="BBB"
51  android:textSize="25sp" />
52   
55          <TextView 56         android:layout_width="wrap_content"
57  android:layout_height="wrap_content"
58  android:background="#ccc"
59  android:text="CCC"
60  android:textSize="25sp"/>
61    
63 </LinearLayout>

下面我們部署一下Android項目,看看運行的結果是如何的

　　　　　　　　　　　　圖1　　　　　　　　　　　　　　　　　　　　　　　　　　　　圖2

　　運行可以看到控件是垂直放置的,那么有垂直就有水平放置的,其實是垂直還是水平的根LinearLayout中的android:orientation有關,該屬性有兩個值,一個vertical(垂直的),另一個是horizontal(水平的),如果android:orientation屬性設置為vertical那么效果圖就是圖1,如果android:orientation屬性設置為horizontal,那么效果圖就是圖2

了解 LinearLayout 的排列規律后，我們再來學習一下它的幾個關鍵屬性的用法吧。

android:layout_gravity 屬性

android:layout_gravity 是用於指定控件在布局中的對齊方式。 android:layout_gravity 的可選值和 android:gravity 差不多，但是需要注意，當 LinearLayout 的排列方向是 horizontal 時，只有垂直方向上的對齊方式才會生效，因為此時水平方向上的長度是不固定的，每添加一個控件，水平方向上的長度都會改變，因而無法指定該方向上的對齊方式。同樣的道理，當 LinearLayout 的排列方向是 vertical 時，只有水平方向上的對齊方式才會生效

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2 　　android:layout_width="match_parent"
 3 　　android:layout_height="match_parent"
 4　　 android:orientation="horizontal" >


 5 　　<Button
 6 　　　　android:id="@+id/button1"
 7 　　　　android:layout_width="wrap_content"
 8 　　　　android:layout_height="wrap_content"
 9 　　　　android:layout_gravity="top"
10 　　　　android:text="Button 1" />

11 　　<Button
12 　　　　android:id="@+id/button2"
13　　　　 android:layout_width="wrap_content"
14　　　　 android:layout_height="wrap_content"
15 　　　　android:layout_gravity="center_vertical"
16 　　　　android:text="Button 2" />


17 　　<Button
18 　　　　android:id="@+id/button3"
19　　　　 android:layout_width="wrap_content"
20　　　　 android:layout_height="wrap_content"
21　　　　 android:layout_gravity="bottom"
22 　　　　android:text="Button 3" />
23 </LinearLayout>

我們一起來看看運行結果吧

android:layout_weight屬性

layout_weight解析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:baselineAligned="false"
 6  android:orientation="horizontal" >
 7 
 8     <TextView  9         android:layout_width="0dp"
10  android:layout_height="48dp"
11  android:layout_weight="1"
12  android:background="#ffff00"
13  android:gravity="center"
14  android:text="1"
15  android:textSize="25sp" />
16 
17     <TextView 18         android:layout_width="0dp"
19  android:layout_height="48dp"
20  android:layout_weight="2"
21  android:background="#ccc"
22  android:gravity="center"
23  android:text="2"
24  android:textSize="25sp" /> 
25 
26   <TextView 27         android:layout_width="0dp"
28  android:layout_height="48dp"
29  android:layout_weight="3"
30  android:background="#ff0000"
31  android:gravity="center"
32  android:text="3"
33  android:textSize="25sp" /> 
34 </LinearLayout>
　　
　　運行結果:

　　結果為什么是這樣的呢?其實系統會先把 LinearLayout 下所有控件指定的 layout_weight 值相加，得到一個總值，然后每個控件所占大小的比例就是用該控件的 layout_weight 值除以剛才算出的總值

layout_weight解析2

 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="horizontal" >
 6 
 7     <TextView  8         android:layout_width="0dp"
 9  android:layout_height="48dp"
10  android:layout_weight="1"
11  android:background="#ffff00"
12  android:gravity="center"
13  android:text="1111111111"
14  android:textSize="25sp" />
15 
16     <TextView 17         android:layout_width="0dp"
18  android:layout_height="48dp"
19  android:layout_weight="2"
20  android:background="#ccc"
21  android:gravity="center"
22  android:text="2"
23  android:textSize="25sp" /> 
24 
25   <TextView 26         android:layout_width="0dp"
27  android:layout_height="48dp"
28  android:layout_weight="3"
29  android:background="#ff0000"
30  android:gravity="center"
31  android:text="3"
32  android:textSize="25sp" /> 
33 </LinearLayout>

運行結果

　　由於TextView會參考父元素LinearLayout的android:baselineAligned的基線,解決辦法把baselineAligned設置為false,如:android:baselineAligned="false",運行結果如下:

layout_weight解析3

 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:baselineAligned="false"
 6  android:orientation="horizontal" >
 7 
 8     <TextView  9         android:layout_width="wrap_content"
10  android:layout_height="48dp"
11  android:layout_weight="1"
12  android:background="#ffff00"
13  android:gravity="center"
14  android:text="1111111111"
15  android:textSize="25sp" />
16 
17     <TextView 18         android:layout_width="0dp"
19  android:layout_height="48dp"
20  android:layout_weight="2"
21  android:background="#ccc"
22  android:gravity="center"
23  android:text="2"
24  android:textSize="25sp" /> 
25 
26   <TextView 27         android:layout_width="0dp"
28  android:layout_height="48dp"
29  android:layout_weight="3"
30  android:background="#ff0000"
31  android:gravity="center"
32  android:text="3"
33  android:textSize="25sp" /> 
34 </LinearLayout>

運行結果:

結果明顯不是我們預期想的那樣,不再是按1:2:3的比例顯示結果,其實原因是這樣的,第一個TextView設置了android:layout_width="wrap_content",首先它會用屏幕的總寬度減去控件所占的寬度,然后再把剩下的屏幕寬度按比例分配給控件

layout_weight解析4

 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:baselineAligned="false"
 6  android:orientation="horizontal" >
 7 
 8     <TextView  9         android:layout_width="match_parent"
10  android:layout_height="48dp"
11  android:layout_weight="1"
12  android:background="#ffff00"
13  android:gravity="center"
14  android:text="1111111111"
15  android:textSize="25sp" />
16 
17     <TextView 18         android:layout_width="match_parent"
19  android:layout_height="48dp"
20  android:layout_weight="2"
21  android:background="#ccc"
22  android:gravity="center"
23  android:text="2"
24  android:textSize="25sp" />
25 
26     <TextView 27         android:layout_width="match_parent"
28  android:layout_height="48dp"
29  android:layout_weight="2"
30  android:background="#ff0000"
31  android:gravity="center"
32  android:text="3"
33  android:textSize="25sp" />
34 
35 </LinearLayout>

運行結果

　　結果為什么不是按1:2:2顯示呢?而且權重為1占的寬度比較大呢?其實當控件的屬性設置為android:layout_width="match_parent"時,表示控件的寬度與屏幕的寬度一樣寬,如果要計算出控件占屏幕的多少寬度,可以通過這個公式計算 : 控件的寬度+父控件剩余寬度*比例 ,假如整個屏幕寬度是480,而且每個控件的屬性設置成了android:layout_width="match_parent" ,那么說明每一個控件也是480, 父控件剩余寬度=總屏幕寬度 - 每一個控件相加后的和 ,這里的是 480 - 3*480 = -2*480 ,根據控件的寬度+父控件剩余寬度*比例,可以算出第一個控件所占屏幕的寬度 : 480 + (-2*480)/5 ,第二,三個控件 480 + (-2*480)*2/5

相對布局(RelativeLayout)

　　RelativeLayout 又稱作相對布局，也是一種非常常用的布局。和 LinearLayout 的排列規則不同，RelativeLayout 顯得更加隨意一些，它可以通過相對定位的方式讓控件出現在布局的任何位置

　　創建相對布局步驟

　　創建完相對布局文件后,我們來看看內容

1 <?xml version="1.0" encoding="utf-8"?>
2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3  android:layout_width="match_parent"
4  android:layout_height="match_parent" >
5     
6 
7 </RelativeLayout>

下面我們添加控件到相對布局文件中

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3  android:layout_width="match_parent"
 4  android:layout_height="match_parent" >
 5 
 6     <Button  7         android:id="@+id/btn1"
 8  android:layout_width="wrap_content"
 9  android:layout_height="wrap_content"
10  android:layout_alignParentLeft="true"
11  android:layout_alignParentTop="true"
12  android:text="Button 1" />
13 
14     <Button 15         android:id="@+id/btn2"
16  android:layout_width="wrap_content"
17  android:layout_height="wrap_content"
18  android:layout_alignParentRight="true"
19  android:layout_alignParentTop="true"
20  android:text="Button 2" />
21 
22     <Button 23         android:id="@+id/btn3"
24  android:layout_width="wrap_content"
25  android:layout_height="wrap_content"
26  android:layout_centerInParent="true"
27  android:text="Button 3" />
28 
29     <Button 30         android:id="@+id/btn4"
31  android:layout_width="wrap_content"
32  android:layout_height="wrap_content"
33  android:layout_alignParentBottom="true"
34  android:layout_alignParentLeft="true"
35  android:text="Button 4" />
36 
37     <Button 38         android:id="@+id/btn5"
39  android:layout_width="wrap_content"
40  android:layout_height="wrap_content"
41  android:layout_alignParentBottom="true"
42  android:layout_alignParentRight="true"
43  android:text="Button 5" />
44 
45 </RelativeLayout>

運行結果

　　上面例子中的每個控件都是相對於父布局進行定位的，那控件可不可以相對於控件進行定位呢？

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3  android:layout_width="match_parent"
 4  android:layout_height="match_parent" >
 5     
 6       <Button  7         android:id="@+id/btn1"
 8  android:layout_width="wrap_content"
 9  android:layout_height="wrap_content"
10  android:layout_above="@+id/btn3"
11  android:layout_toLeftOf="@+id/btn3"
12  android:text="Button 1" />
13 
14     <Button 15         android:id="@+id/btn2"
16  android:layout_width="wrap_content"
17  android:layout_height="wrap_content"
18  android:layout_above="@+id/btn3"
19  android:layout_toRightOf="@+id/btn3"
20  android:text="Button 2" />
21 
22     <Button 23         android:id="@+id/btn3"
24  android:layout_width="wrap_content"
25  android:layout_height="wrap_content"
26  android:layout_centerInParent="true"
27  android:text="Button 3" />
28 
29     <Button 30         android:id="@+id/btn4"
31  android:layout_width="wrap_content"
32  android:layout_height="wrap_content"
33  android:layout_below="@+id/btn3"
34  android:layout_toLeftOf="@+id/btn3"
35  android:text="Button 4" />
36 
37     <Button 38         android:id="@+id/btn5"
39  android:layout_width="wrap_content"
40  android:layout_height="wrap_content"
41  android:layout_below="@+id/btn3"
42  android:layout_toRightOf="@+id/btn3"
43  android:text="Button 5" />
44 </RelativeLayout>

　　運行結果

android:layout_above 屬性可以讓一個控件位於另一個控件的上方，需要為這個屬性指定相對控件 id 的引用,android:layout_below 表示讓一個控件位於另一個控件的下方，android:layout_toLeftOf 表示讓一個控件位於另一個控件的左側，android:layout_toRightOf 表示讓一個控件位於另一個控件的右側。RelativeLayout 中還有另外一組相對於控件進行定位的屬性，android:layout_alignLeft 表示讓一個控件的左邊緣和另一個控件的左邊緣對齊，android:layout_alignRight 表示讓一個控件的右邊緣和另一個控件的右邊緣對齊，還有 android:layout_alignTop 和 android:layout_ alignBottom

幀布局(FrameLayout)

　　創建幀布局

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3  android:layout_width="match_parent"
 4  android:layout_height="match_parent" >
 5 
 6     <Button  7         android:id="@+id/btn1"
 8  android:layout_width="wrap_content"
 9  android:layout_height="wrap_content"
10  android:text="Button 1" />
11 
12     <ImageView 13         android:id="@+id/image_view"
14  android:layout_width="wrap_content"
15  android:layout_height="wrap_content"
16  android:src="@drawable/ic_launcher" />
17 
18 </FrameLayout>
運行結果:

　　可以看到，按鈕和圖片都是位於布局的左上角。由於圖片是在按鈕之后添加的，因此圖片壓在了按鈕的上面

免責聲明！

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

猜您在找 Android常用五大布局 android 五大布局 android中的五大布局(控件的容器，可以放button等控件) Android studio 五大布局控件 Android UI基礎之五大布局 Android五大布局詳解——TableLayout（表格布局） Android五大布局詳解——LinearLayout（線性布局） Android五大布局詳解——RelativeLayout（相對布局） Android五大布局之一相對布局(RelativeLayout) Android五大布局之一幀布局(FrameLayout)