Android 几种布局方式～深入浅出谈`菜鸟入门必备

Android中几种布局方式

　 id="@+id/edtInput",ID 是连接UI 与代码的桥梁

　　Gravity= "center" ，Layout 中的控件居中

　　layout_width="fill_parent" ，自动填充至屏幕宽度，layout_height 同理

　　layout_width="wrap_content" ，自动填充为控件大小，layout_height 同理

　　LinearLayout：在LinearLayout 里面的控件，按照水平或者垂直排列：orientation="horizontal" ：水平排列;orientation=" vertical" ：垂直排列。

　　AbsoluteLayout：AbsoluteLayout是一个按照绝对坐标定义的布局，由于使用绝对坐标去定位控件，因此要实现自适应界面时，应尽少使用 AbsoluteLayout 。 AbsoluteLayout 里面的控件都以layout_x、layout_y 来定义其位置。

　　FrameLayout：这种布局下每个添加的子控件都被放在布局的左上角，并覆盖在前一子控件的上层。其中关键的是layout_gravity，负责控制控件的位置。

　　RelativeLayout：RelativeLayout是一个按照相对位置排列的布局，跟AbsoluteLayout这个绝对坐标布局是个相反的理解。Layout above:选择ID A，则该控件在A控件的上方， Layout below、Layout to left of。。。。等同样用法。使用 RelativeLayout布局的时候，最好在界面设计时 做好布局，尽少程序运行时 做控件布局的更改，因为 RelativeLayout布局里面的属性之间，很容易冲突，例如， Layout below、 Layout above同选 ID A，那就肯定发生冲突了。

下面我们就详细来介绍几种布局的方法：

View的布局显示方式有下面几种：线性布局（Linear Layout）、相对布局（Relative Layout）、表格布局（Table Layout）、网格视图（Grid View）、标签布局（Tab Layout）、列表视图（List View）、绝对布局（AbsoluteLayout）帧布局（Frame Layout）。

本文虽然是介绍View的布局方式，但不仅仅是这样，其中涉及了很多小的知识点，绝对能给你带来Android大餐！

本文的主要内容就是分别介绍以上视图的七种布局显示方式效果及实现，大纲如下：

1、View布局概述
2、线性布局（Linear Layout）
2.1、Tips：android:layout_weight="1"
3、相对布局（Relative Layout）
4、表格布局（Table Layout）
5、列表视图（List View）
5.1、一个小的改进
5.2、补充说明
6、网格视图（Grid View）
7 、绝对布局（）
8、标签布局（Tab Layout）

1、view的布局显示概述
通过前面的学习我们知道：在一个Android应用程序中，用户界面通过View和ViewGroup对象构建。Android中有很多种View和ViewGroup，他们都继承自View类。View对象是Android平台上表示用户界面的基本单元。

View的布局显示方式直接影响用户界面，View的布局方式是指一组View元素如何布局，准确的说是一个ViewGroup中包含的一些View怎么样布局。ViewGroup类是布局（layout）和视图容器（View container）的基类，此类也定义了ViewGroup.LayoutParams类，它作为布局参数的基类，此类告诉父视图其中的子视图想如何显示。例如，XML布局文件中名为layout_something的属性（参加上篇的4.2节）。我们要介绍的View的布局方式的类，都是直接或间接继承自ViewGroup类，如下图所示：

======

视图层次

======

其实，所有的布局方式都可以归类为ViewGroup的5个类别，即ViewGroup的5个直接子类。其它的一些布局都扩展自这5个类。下面分小节分别介绍View的七种布局显示方式。

2、线性布局（Linear Layout）
线性布局：是一个ViewGroup以线性方向显示它的子视图（view）元素，即垂直地或水平地。之前我们的Hello World！程序中view的布局方式就是线性布局的，一定不陌生！如下所示res/layour/main.xml：

1. <?xml version="1.0" encoding="utf-8"?>  
   
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   
3.     android:layout_width="fill_parent"  
   
4.     android:layout_height="fill_parent"  
   
5.     
   
6.     android:orientation="vertical" >  
   
7.   
   
8.     <TextView  
   
9.         android:layout_width="fill_parent"  
   
10.         android:layout_height="wrap_content"  
    
11.         android:text="@string/app_text"   
    
12.         />  
    
13.     <EditText  
    
14.         android:layout_width="fill_parent"  
    
15.         android:layout_height="wrap_content"  
    
16.           
    
17.         />  
    
18.     <Button   
    
19.         android:layout_width="fill_parent"  
    
20.         android:layout_height="wrap_content"  
    
21.         android:text="@string/ok_text"  
    
22.           
    
23.         />  
    
24.     <Button  
    
25.         android:layout_width="fill_parent"  
    
26.         android:layout_height="wrap_content"  
    
27.         android:text="@string/cancel_text"  
    
28.         />  
    
29.   
    
30. </LinearLayout>  

复制代码

从上面可以看出根LinearLayout视图组（ViewGroup）包含4个组件，它的子元素是以线性方式（horizontal，水平的）布局，运行效果如下图所示

======

线性布局

======

如果你在android:orientation="horizontal"设置为vertical，则是是垂直或者说是纵向的，如下图所示：

====

纵向布局

===

2.1、Tips：android:layout_weight="1"
这个属性很关键，如果你没有显示设置它，它默认为0。把上面布局文件（水平显示的那个）中的这个属性都去掉，运行会得出如下结果：

======

加 android:layout_weight="1" 属性的效果
======

没有了这个属性，我们本来定义的5个Button运行后却只显示了2个Button，为什么呢？？

"weight"顾名思义是权重的意思，layout_weight 用于给一个线性布局中的诸多视图的重要程度赋值。所有的视图都有一个layout_weight值，默认为零，意思是需要显示多大的视图就占据多大的屏幕空间。这就不难解释为什么会造成上面的情况了：Button1~Button5都设置了layout_height和layout_width属性为wrap_content即包住文字内容，他们都没有设置layout_weight 属性，即默认为0.，这样Button1和Button2根据需要的内容占据了整个屏幕，别的就显示不了啦！

若赋一个高于零的值，则将父视图中的可用空间分割，分割大小具体取决于每一个视图的layout_weight值以及该值在当前屏幕布局的整体layout_weight值和在其它视图屏幕布局的layout_weight值中所占的比率而定。举个例子：比如说我们在 水平方向上有一个文本标签和两个文本编辑元素。该文本标签并无指定layout_weight值，所以它将占据需要提供的最少空间。如果两个文本编辑元素每一个的layout_weight值都设置为1，则两者平分在父视图布局剩余的宽度(因为我们声明这两者的重要度相等)。如果两个文本编辑元素其中第一个的layout_weight值设置为1，而第二个的设置为2，则剩余空间的三分之二分给第一个，三分之一分给第二个(数值越小，重要度越高)。

3、相对布局（Relative Layout）
相对布局：是一个ViewGroup以相对位置显示它的子视图（view）元素，一个视图可以指定相对于它的兄弟视图的位置（例如在给定视图的左边或者下面）或相对于RelativeLayout的特定区域的位置（例如底部对齐，或中间偏左）。

相对布局是设计用户界面的有力工具，因为它消除了嵌套视图组。如果你发现你使用了多个嵌套的LinearLayout视图组后，你可以考虑使用一个RelativeLayout视图组了。看下面的res/layour/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="match_parent"  
   
4.     android:layout_height="match_parent" >  
   
5.       
   
6.     <TextView   
   
7.         android:layout_width="fill_parent"  
   
8.         android:layout_height="wrap_content"  
   
9.         android:text="@string/app_text"  
   
10.         android:id="@+id/name_info"  
    
11.         />  
    
12.     <EditText   
    
13.         android:layout_width="fill_parent"  
    
14.         android:layout_height="wrap_content"  
    
15.         android:layout_below="@id/name_info"  
    
16.         android:id="@+id/text_info"  
    
17.         />  
    
18.     <Button   
    
19.         android:layout_width="wrap_content"  
    
20.         android:layout_height="wrap_content"  
    
21.         android:text="@string/cancel_text"  
    
22.         android:layout_alignParentRight="true"  
    
23.         android:layout_below="@id/text_info"  
    
24.         android:id="@+id/cancel_btn"  
    
25.         />  
    
26.     <Button   
    
27.         android:layout_width="wrap_content"  
    
28.         android:layout_height="wrap_content"  
    
29.         android:text="@string/ok_text"  
    
30.         android:layout_below="@id/text_info"  
    
31.         android:layout_toLeftOf="@id/cancel_btn"  
    
32.         />  
    
33.        
    
34.       
    
35.   
    
36. </RelativeLayout>  
    

复制代码

从上面的布局文件我们知道，RelativeLayout视图组包含一个TextView、一个EditView、两个Button，注意标记了<!-- have an eye on ! -->的属性，在使用相对布局方式中就是使用这些类似的属性来定位视图到你想要的位置，它们的值是你参照的视图的id。这些属性的意思很简单，就是英文单词的直译，就不多做介绍了。运行之后，得如下结果：

======

相对布局

======

4、 表格布局（Table Layout）
表格布局：是一个ViewGroup以表格显示它的子视图（view）元素，即行和列标识一个视图的位置。其实Android的表格布局跟HTML中的表格布局非常类似，TableRow 就像HTML表格的<tr>标记。

用表格布局需要知道以下几点：

android:shrinkColumns，对应的方法：setShrinkAllColumns(boolean)，作用：设置表格的列是否收缩（列编号从0开始，下同），多列用逗号隔开（下同），如android:shrinkColumns="0,1,2"，即表格的第1、2、3列的内容是收缩的以适合屏幕，不会挤出屏幕。
android:collapseColumns，对应的方法：setColumnCollapsed(int,boolean)，作用：设置表格的列是否隐藏
android:stretchColumns，对应的方法：setStretchAllColumns(boolean)，作用：设置表格的列是否拉伸

1. <?xml version="1.0" encoding="utf-8"?>  
   
2. <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   
3.     android:layout_width="match_parent"  
   
4.     android:layout_height="match_parent"   
   
5.     android:stretchColumns="0,1,2,3"  
   
6.     >  
   
7.   
   
8.     <TableRow >  
   
9.         <TextView  
   
10.         android:layout_width="wrap_content"  
    
11.         android:layout_height="wrap_content"  
    
12.         android:text="@string/name"  
    
13.         />  
    
14.         <TextView  
    
15.         android:layout_width="wrap_content"  
    
16.         android:layout_height="wrap_content"  
    
17.         android:text="@string/gender"  
    
18.         />  
    
19.         <TextView  
    
20.         android:layout_width="wrap_content"  
    
21.         android:layout_height="wrap_content"  
    
22.         android:text="@string/age"  
    
23.         />  
    
24.         <TextView  
    
25.         android:layout_width="wrap_content"  
    
26.         android:layout_height="wrap_content"  
    
27.         android:text="@string/phonenum"  
    
28.         />"  
    
29.     </TableRow>  
    
30.       
    
31.         <TableRow >  
    
32.         <TextView  
    
33.         android:layout_width="wrap_content"  
    
34.         android:layout_height="wrap_content"  
    
35.         android:text="@string/name_zs"  
    
36.         />  
    
37.         <TextView  
    
38.         android:layout_width="wrap_content"  
    
39.         android:layout_height="wrap_content"  
    
40.         android:text="@string/gender_zs"  
    
41.         />  
    
42.         <TextView  
    
43.         android:layout_width="wrap_content"  
    
44.         android:layout_height="wrap_content"  
    
45.         android:text="@string/age_zs"  
    
46.         />  
    
47.         <TextView  
    
48.         android:layout_width="wrap_content"  
    
49.         android:layout_height="wrap_content"  
    
50.         android:text="@string/phonenum_zs"  
    
51.         />  
    
52.     </TableRow>  
    
53.       
    
54.             <TableRow >  
    
55.         <TextView  
    
56.         android:layout_width="wrap_content"  
    
57.         android:layout_height="wrap_content"  
    
58.         android:text="@string/name_ll"  
    
59.         />  
    
60.         <TextView  
    
61.         android:layout_width="wrap_content"  
    
62.         android:layout_height="wrap_content"  
    
63.         android:text="@string/gender_ll"  
    
64.         />  
    
65.         <TextView  
    
66.         android:layout_width="wrap_content"  
    
67.         android:layout_height="wrap_content"  
    
68.         android:text="@string/age_ll"  
    
69.         />  
    
70.         <TextView  
    
71.         android:layout_width="wrap_content"  
    
72.         android:layout_height="wrap_content"  
    
73.         android:text="@string/phonenum_ll"  
    
74.         />  
    
75.     </TableRow>  
    
76.   
    
77. </TableLayout>  

复制代码

布局样式如下：

======

表格布局

后续，android view关于几个属性的问题:

android几种布局

LinearLayout 

orientation：指定控件的方向，分别有horizontal(水平)，vertical(垂直)，在代码里可通过setOrientation()进行动态改变，值分别为HORIZONTAL或者VERTICAL 
fill model：可分别使用android:layout_width和android:layout_height来指定宽度和高度。在指定宽度和高

                   度时，可指定尺寸，如125px，也可以使用“wrap_content”使控件根据内容来自适应或者可以使

                   用“fill_parent”占满该控件所在容器的所有空间。 
Weight：对应的设置为android:layout_weight。layout_weight 用于给一个线性布局中的诸多视图的重要度赋

             值。所有的视图都有一个layout_weight值，默认为零，意思是需要显示多大的视图就占据多大的屏幕

             空间。若赋一个高于零的值，则将父视图中的可用空间分割，分割大小具体取决于每一个视图的

             layout_weight值以及该值在当前屏幕布局的整体layout_weight值和在其它视图屏幕布局的

             layout_weight值中所占的比率而定。举个例子：比如说我们在水平方向上有一个文本标签和两个文本

             编辑元素。该文本标签并无指定layout_weight值，所以它将占据需要提供的最少空间。如果两个文本

             编辑元素每一个的layout_weight值都设置为1，则两者平分在父视图布局剩余的宽度(因为我们声明这

             两者的重要度相等)。如果两个文本编辑元素其中第一个的layout_weight值设置为1，而第二个的设置

             为2， 则剩余空间的三分之二分给第一个，三分之一分给第二个(数值越小，重要度越高)。但是对于

             LinearLayout之间则以反比的形式显示在屏幕上(即数值越小，重要度越小) 
Gravity：各个控件默认是left-and top-aligned的，但可通过对应的xml属性android:layout_gravity重新设置

             (在代码中可通过setGravity()进行设置) 
Padding：为边距，可通过android:padding属性进行设置，4个方向的边距属性为android:paddingLeft,

                android:paddingRight, android:paddingTop, and android:paddingBottom. 

以下为一个简单的演示： 
先建一个Android功能，在main.xml中录入如下内容： 

Activity内容如下： 
Java代码 
1. package com.cenphoenix.demo.linelayout; 
2. 
3. import android.app.Activity; 
4. import android.os.Bundle; 
5. import android.view.Gravity; 
6. import android.widget.LinearLayout; 
7. import android.widget.RadioGroup; 
8. 
9. public class LineLayout extends Activity implements 
10. RadioGroup.OnCheckedChangeListener { 
11.  
12. 
13. RadioGroup orientation; 
14. RadioGroup gravity; 
15. 
16. @Override 
17. public void onCreate(Bundle icicle) { 
18. super.onCreate(icicle); 
19. setContentView(R.layout.main); 
20. orientation = (RadioGroup) findViewById(R.id.orientation); 
21. orientation.setOnCheckedChangeListen er(this); 
22. 
23. gravity = (RadioGroup) findViewById(R.id.gravity); 
24. gravity.setOnCheckedChangeListen er(this); 
25. } 
26. 
27. public void onCheckedChanged(RadioGroup group, int checkedId) { 
28. if (group == orientation) { 
29. if (checkedId == R.id.horizontal) { 
30. orientation.setOrientation(LinearLayout.HORIZONTAL);//水平 
31. } else { 
32. orientation.setOrientation(LinearLayout.VERTICAL);//垂直 
33. } 
34. } else if (group == gravity) { 
35. if (checkedId == R.id.left) { 
36. gravity.setGravity(Gravity.LEFT); // 点击时该组组件居左 
37. } else if (checkedId == R.id.center) { 
38. gravity.setGravity(Gravity.CENTER); //center_horizontal 点击时该组组件居中 
39. } else if (checkedId == R.id.right) { 
40. gravity.setGravity(Gravity.RIGHT); // right 点击时该组组件居右 
41. } 
42. } 
43. } 
44. } 
AbsoluteLayout 
          这是一个按照绝对坐标定义的布局，由于使用绝对坐标去定位控件，因此要实现自适应界面时，应尽少使

用 AbsoluteLayout。AbsoluteLayout 里面的控件都以layout_x 、layout_y 来定义其位置： 
　上图中的TextView01的X坐标为10px，Y坐标为10px：

RelativeLayout 
          RelativeLayout是一个按照相对位置排列的布局，跟AbsoluteLayout这个绝对坐标布局是个相反的理解。

          在RelativeLayout布局里的控件包含丰富的排列属性：

  　Layout above:选择ID A，则该控件在A控件的上方， Layout below、Layout to left 等同样用法。使用

                   RelativeLayout布局的时候，最好在界面设计时 做好布局，尽少程序运行时 做控件布局的更改，

                   因为 RelativeLayout布局里面的属性之间，很容易冲突，例如， Layout below、 Layout above

                   同选 ID A，那就肯定发生冲突了。 
FrameLayout 
           FrameLayout是最简单的一个布局对象。它被定制为你屏幕上的一个空白备用区域，之后你可以在其中填充一个单一对象 — 比如，一张你要发布的图片。所有的子元素将会固定在屏幕的左上角；你不能为FrameLayout中的一个子元素指定一个位置。后一个子元素将会直接在前 一个子元素之上进行覆盖填充，把它们部份或全部挡住（除非后一个子元素是透明的）。

       其中关键的是layout_gravity，负责控制控件的位置。 

我们看一下效果图: 

其中Main.xml 代码如下: 

TableLayout 
           TableLayout跟TableLayout 是一组搭配使用的布局，TableLayout置底，TableRow在TableLayout的上面,而TextView等控件就在 TableRow之上，另外，TableLayout之上也可以单独放控件。TableLayout是一个使用复杂的布局，最简单的用法就仅仅是拖拉控件做出个界面，但实际上，会经常在代码里使用TableLayout，例如做出表格的效果。 

运行结果： 

注意：TableLayout经常用的属性是： 
     android:collapseColumns：以第0行为序，隐藏指定的列，

     android:collapseColumns该属性为空时，则显示所有列，把android:collapseColumns=0,2，意思是把第0

                和第2列去掉。 
     如果android:shrinkColumns：以第0行为序，自动延伸指定的列填充可用部分。