【Android開發學習筆記之一】5大布局方式詳解

本文轉載自查看原文 2017-11-28 23:29 1259 language：Android

Android中常用的5大布局方式有以下幾種：

線性布局（LinearLayout）：按照垂直或者水平方向布局的組件。
幀布局（FrameLayout）：組件從屏幕左上方布局組件。
表格布局（TableLayout）：按照行列方式布局組件。
相對布局（RelativeLayout）：相對其它組件的布局方式。
絕對布局（AbsoluteLayout）：按照絕對坐標來布局組件。

1. 線性布局

線性布局是Android開發中最常見的一種布局方式，它是按照垂直或者水平方向來布局，通過“android:orientation”屬性可以設置線性布局的方向。屬性值有垂直（vertical）和水平（horizontal）兩種。

常用的屬性：

android:orientation：可以設置布局的方向
android:gravity:用來控制組件的對齊方式
layout_weight：控制各個組件在布局中的相對大小

第一個實例

①效果圖：

②核心代碼如下：

main.xml

 1     <?xml version="1.0" encoding="utf-8"?> 
 2     <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
 3         android:orientation="vertical" 
 4         android:layout_width="fill_parent" 
 5         android:layout_height="fill_parent" 
 6         >       
 7         <LinearLayout 
 8             android:layout_width="fill_parent" 
 9             android:layout_height="wrap_content" 
10             android:orientation="vertical" 
11             > 
12             <EditText 
13                 android:layout_width="fill_parent" 
14                 android:layout_height="wrap_content" 
15                 /> 
16         </LinearLayout> 
17         <LinearLayout 
18             android:layout_width="fill_parent" 
19             android:layout_height="wrap_content" 
20             android:orientation="horizontal" 
21             android:gravity="right" 
22             > 
23         <!-- android:gravity="right"表示Button組件向右對齊 --> 
24             <Button 
25                 android:layout_height="wrap_content" 
26                 android:layout_width="wrap_content" 
27                 android:text="確定" 
28                 /> 
29             <Button 
30                 android:layout_height="wrap_content" 
31                 android:layout_width="wrap_content" 
32                 android:text="取消" 
33                 />    
34          </LinearLayout> 
35     </LinearLayout>

第二個實例

①效果圖：

②核心代碼：

mian.xml

 1     <?xml version="1.0" encoding="utf-8"?> 
 2     <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
 3         android:orientation="vertical" android:layout_width="fill_parent" 
 4         android:layout_height="fill_parent"> 
 5      
 6         <LinearLayout 
 7         android:orientation="horizontal" 
 8         android:layout_width="fill_parent" 
 9         android:layout_height="fill_parent" 
10         android:layout_weight="1"> 
11           
12         <TextView 
13             android:text="red" 
14             android:gravity="center_horizontal" 
15             android:background="#aa0000" 
16             android:layout_width="wrap_content" 
17             android:layout_height="fill_parent" 
18             android:layout_weight="1" 
19             /> 
20          <!--android:gravity="center_horizontal"水平居中 -->   
21          <!--layout_weight屬性以控制各個控件在布局中的相對大小。layout_weight屬性是一個非負整數值。  
22              線性布局會根據該控件layout_weight值與其所處布局中所有控件layout_weight值之和的比值為該控件分配占用的區域。  
23             例如，在水平布局的LinearLayout中有兩個Button，這兩個Button的layout_weight屬性值都為1，  
24             那么這兩個按鈕都會被拉伸到整個屏幕寬度的一半。如果layout_weight指為0，控件會按原大小顯示，不會被拉伸；  
25             對於其余layout_weight屬性值大於0的控件，系統將會減去layout_weight屬性值為0的控件的寬度或者高度，  
26             再用剩余的寬度或高度按相應的比例來分配每一個控件顯示的寬度或高度--> 
27         <TextView 
28             android:text="Teal" 
29             android:gravity="center_horizontal" 
30             android:background="#008080" 
31             android:layout_width="wrap_content" 
32             android:layout_height="fill_parent" 
33             android:layout_weight="1"/> 
34           
35         <TextView 
36             android:text="blue" 
37             android:gravity="center_horizontal" 
38             android:background="#0000aa" 
39             android:layout_width="wrap_content" 
40             android:layout_height="fill_parent" 
41             android:layout_weight="1" 
42             /> 
43           
44         <TextView 
45             android:text="orange" 
46             android:gravity="center_horizontal" 
47             android:background="#FFA500" 
48             android:layout_width="wrap_content" 
49             android:layout_height="fill_parent" 
50             android:layout_weight="1" 
51             /> 
52               
53         </LinearLayout>   
54         <LinearLayout 
55         android:orientation="vertical" 
56         android:layout_width="fill_parent" 
57         android:layout_height="fill_parent" 
58         android:layout_weight="1"> 
59           
60         <TextView 
61             android:text="row one" 
62             android:textSize="15pt" 
63             android:background="#aa0000" 
64             android:layout_width="fill_parent" 
65             android:layout_height="wrap_content" 
66             android:layout_weight="1" 
67             /> 
68         <!--  -->   
69         <TextView 
70             android:text="row two" 
71             android:textSize="15pt" 
72             android:background="#DDA0DD" 
73             android:layout_width="fill_parent" 
74             android:layout_height="wrap_content" 
75             android:layout_weight="1" 
76             /> 
77           
78         <TextView 
79             android:text="row three" 
80             android:textSize="15pt" 
81             android:background="#008080" 
82             android:layout_width="fill_parent" 
83             android:layout_height="wrap_content" 
84             android:layout_weight="1" 
85             />    
86         <TextView 
87             android:text="row four" 
88             android:textSize="15pt" 
89             android:background="#FFA500" 
90             android:layout_width="fill_parent" 
91             android:layout_height="wrap_content" 
92             android:layout_weight="1" 
93             />       
94         </LinearLayout>   
95     </LinearLayout>

2. 幀布局

幀布局是從屏幕的左上角（0,0）坐標開始布局，多個組件層疊排列，第一個添加的組件放到最底層，最后添加到框架中的視圖顯示在最上面。上一層的會覆蓋下一層的控件。

簡單的例子

①效果圖：

② 核心代碼：

main.xml

 1     <?xml version="1.0" encoding="utf-8"?> 
 2     <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
 3         android:layout_width="fill_parent" 
 4         android:layout_height="fill_parent" 
 5         > 
 6         <TextView    
 7             android:layout_width="300dp"   
 8             android:layout_height="300dp"   
 9             android:background="#00BFFF"          
10             /> 
11         <TextView    
12             android:layout_width="260dp"   
13             android:layout_height="260dp"   
14             android:background="#FFC0CB"          
15             /> 
16         <TextView    
17             android:layout_width="220dp"   
18             android:layout_height="220dp"   
19             android:background="#0000FF"          
20             /> 
21     </FrameLayout>

3. 表格布局

表格布局是一個ViewGroup以表格顯示它的子視圖（view）元素，即行和列標識一個視圖的位置。

表格布局常用的屬性如下：

android:collapseColumns：隱藏指定的列
android:shrinkColumns：收縮指定的列以適合屏幕，不會擠出屏幕
android:stretchColumns：盡量把指定的列填充空白部分
android:layout_column:控件放在指定的列
android:layout_span:該控件所跨越的列數

簡單的例子：

①效果圖：

② 核心代碼：

main.xml

 1     <?xml version="1.0" encoding="utf-8"?> 
 2     <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" 
 3         android:layout_width="fill_parent" 
 4         android:layout_height="fill_parent" 
 5         > 
 6         <TableRow> 
 7             <Button 
 8                 android:text="Button1" 
 9                 /> 
10             <Button 
11                 android:text="Button2" 
12                 /> 
13             <Button 
14                 android:text="Button3" 
15                 /> 
16         </TableRow> 
17         <TableRow> 
18             <Button 
19                 android:text="Button4" 
20                 /> 
21             <Button 
22                 android:layout_span="2" 
23                 android:text="Button5" 
24                 /> 
25         </TableRow> 
26           
27     </TableLayout>

4. 相對布局

相對布局是按照組件之間的相對位置來布局，比如在某個組件的左邊，右邊，上面和下面等。

相對布局常用屬性請參考我博客的： http://www.cnblogs.com/ECJTUACM-873284962/p/7912841.html

簡單的例子

①效果圖：

② 核心代碼：

main.xml

 1     <?xml version="1.0" encoding="utf-8"?> 
 2     <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
 3         android:layout_width="fill_parent" 
 4         android:layout_height="wrap_content" 
 5         android:padding="10px" 
 6         > 
 7         <TextView    
 8             android:id="@+id/tev1" 
 9             android:layout_width="wrap_content"   
10             android:layout_height="wrap_content"   
11             android:layout_marginBottom="30dp" 
12             android:text="Please Type Here:" 
13             /> 
14         <EditText 
15             android:id="@+id/tx1" 
16             android:layout_width="match_parent" 
17             android:layout_height="wrap_content" 
18             android:layout_below="@id/tev1" 
19             /> 
20         <Button 
21             android:id="@+id/btn1" 
22             android:layout_height="wrap_content" 
23             android:layout_width="wrap_content" 
24             android:layout_below="@id/tx1" 
25             android:layout_alignParentRight="true" 
26             android:text="確定" 
27             /> 
28         <Button 
29             android:id="@+id/btn2" 
30             android:layout_height="wrap_content" 
31             android:layout_width="wrap_content" 
32             android:layout_below="@id/tx1" 
33             android:layout_toLeftOf="@id/btn1" 
34             android:layout_marginRight="30dp" 
35             android:text="取消" 
36             /> 
37     </RelativeLayout>

5. 絕對布局

絕對布局通過指定子組件的確切X,Y坐標來確定組件的位置，在Android2.0 API文檔中標明該類已經過期，可以使用FrameLayout或者RelativeLayout來代替。所以這里不再詳細介紹。

免責聲明！

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

猜您在找 Android學習筆記④——頁面的布局方式 Android學習筆記---布局方式(一)(LinearLayout,AbsoluteLayout,FrameLayout布局) Android學習筆記---布局方式(二)(RelativeLayout,TableLayout布局) android開發學習筆記系列（4）--android動態布局 Android開發之基本控件和詳解四種布局方式 Android開發之線性布局詳解（布局權重） Android 布局學習之——Layout(布局)詳解二（常見布局和布局參數） Android 布局學習之——Layout(布局)詳解一 Android開發學習筆記：Service的簡介和啟動方式（轉） bootstrap學習筆記--bootstrap布局方式