Android 布局使用的几种方式

在学习 Android的过程中接触到了几种不同的使用的布局方法，这里总结一下方便以后使用。

这里整理了 3 种方法，

1：直接使用基础的 Layout  xml文件，就是经常接触到的 FrameLayout， LinearLayout等等；

2：使用 include 把不同的 Layout xm l组合使用；

3：在 Layout 的 xml 文件中，使用自定义的View 的 class来实现自己的布局；

一，使用基础的 Layout  xml文件

其中包括：

GridLayout

        GridLayout布局使用虚细线将布局划分为行、列和单元格，可以指定控件占用多少单元格来完成布局。

        GridLayout 相关的属性

                    android:orientation   指定横向或纵向

                    android:rowCount  指定行数

                    android:columnCount  指定列数

        GridLayout 控件单元的相关属性

                    android:layout_row  指定控件所在的行，类似数组，下标从0开始

                    android:layout_column  指定控件所在的列，类似数组，下标从0开始

                    android:layout_rowSpan  表示该控件可以跨个多行

                    android:layout_columnSpan  表示该控件可以跨个多列

                    设置了:layout_rowSpan 和 layout_columnSpan 后需要在设置 layout_gravity = "fill" 让控件把多个单元格空间都填充满。

下面是从网上找到的一个小例子，非常实用，保留下来工作中用吧。

[html]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>    
2. <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"    
3.     android:layout_width="wrap_content"    
4.     android:layout_height="wrap_content"    
5.     android:orientation="horizontal"    
6.     android:rowCount="5"    
7.     android:columnCount="4" >    
8. 　　<Button    
9.         android:id="@+id/one"    
10.         android:text="1"/>    
11. 　　<Button    
12.         android:id="@+id/two"    
13.         android:text="2"/>    
14. 　　　<Button    
15.         android:id="@+id/three"    
16.         android:text="3"/>    
17. 　　<Button    
18.         android:id="@+id/devide"    
19.         android:text="/"/>    
20. 　　<Button    
21.         android:id="@+id/four"    
22.         android:text="4"/>    
23. 　　<Button    
24.         android:id="@+id/five"    
25.         android:text="5"/>    
26. 　　<Button    
27.         android:id="@+id/six"    
28.         android:text="6"/>    
29. 　　<Button    
30.         android:id="@+id/multiply"    
31.         android:text="×"/>    
32. 　　<Button    
33.         android:id="@+id/seven"    
34.         android:text="7"/>    
35. 　　<Button    
36.         android:id="@+id/eight"    
37.         android:text="8"/>    
38. 　　<Button    
39.         android:id="@+id/nine"    
40.         android:text="9"/>    
41.     <Button    
42.         android:id="@+id/minus"    
43.         android:text="-"/>    
44.     <Button    
45.         android:id="@+id/zero"    
46.         android:layout_columnSpan="2"    
47.         android:layout_gravity="fill"    
48.         android:text="0"/>    
49. 　　<Button    
50.         android:id="@+id/point"    
51.         android:text="."/>    
52.     <Button    
53.         android:id="@+id/plus"    
54.         android:layout_rowSpan="2"    
55.         android:layout_gravity="fill"    
56.         android:text="+"/>    
57.     <Button    
58.         android:id="@+id/equal"    
59.         android:layout_columnSpan="3"    
60.         android:layout_gravity="fill"    
61.         android:text="="/>     
62.   </GridLayout>    

效果如下：

LinearLayout (Vertical, Horizontal)

一个盒子模型，控件按水平或垂直方向的相对位置排列在界面中，每行或每列只会有一个控件。好处是在屏幕尺寸有变化的情况下，控件可以填满屏幕上的空间。

RelativeLayout

在这个容器中，其子元素可以使用彼此之间的相对位置或者与容器之间的相对位置进行定位。

第一类: 和父元素的相对位置 属性值为true或false
android:layout_centerHrizontal 水平居中
android:layout_centerVertical   垂直居中
android:layout_centerInparent    相对于父元素完全居中
android:layout_alignParentBottom 贴紧父元素的下边缘
android:layout_alignParentLeft   贴紧父元素的左边缘
android:layout_alignParentRight 贴紧父元素的右边缘
android:layout_alignParentTop    贴紧父元素的上边缘
android:layout_alignWithParentIfMissing 如果对应的兄弟元素找不到的话就以父元素做参照物


第二类：和某个元素的相对位置 属性值必须为某个控件的 id的引用 "@id/id-name"
android:layout_below      在某元素的下方
android:layout_above      在某元素的的上方
android:layout_toLeftOf   在某元素的左边
android:layout_toRightOf 在某元素的右边
android:layout_alignTop   本元素的上边缘和某元素的的上边缘对齐
android:layout_alignLeft   本元素的左边缘和某元素的的左边缘对齐
android:layout_alignBottom 本元素的下边缘和某元素的的下边缘对齐
android:layout_alignRight 本元素的右边缘和某元素的的右边缘对齐


第三类：和边缘的相对关系，属性值为具体的像素值，如30dip，40px
android:layout_marginBottom             离某元素底边缘的距离
android:layout_marginLeft                离某元素左边缘的距离
android:layout_marginRight               离某元素右边缘的距离
android:layout_marginTop                离某元素上边缘的距离


第四类：控件自身的比例关系
android:layout_gravity 用来设置该view相对与父view 的位置．
android:scaleType 控制图片如何resized/moved来匹配ImageView的size。可取值如下：
                  center 不缩放，按图片的原来size居中显示，当图片长/宽超过View的长/宽，则截取图片的居中部分显示；
                  centerCrop 按比例缩放图片居中显示，使得图片长(宽)等于或大于View的长(宽)
                  centerInside 按比例缩放图片居中显示，使得图片长/宽等于或小于View的长/宽
                  fitCenter 按比例缩放到View的宽度，居中显示
                  fitEnd   按比例缩放到View的宽度，显示在View的下部分位置
                  fitStart 按比例缩放到View的宽度，显示在View的上部分位置
                  fitXY 不按比例缩放到View的大小

[html]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3. android:orientation="vertical"  
4. android:layout_width="fill_parent"  
5. android:layout_height="wrap_content">  
6.     <Button      
7.         android:id="@+id/button1"      
8.         android:layout_width="fill_parent"      
9.         android:layout_height="wrap_content"      
10.         android:background="#FF3300"      
11.         android:text="Button1"   
12.         />  
13.   
14.     <Button  
15.         android:id="@+id/button2"  
16.         android:layout_width="fill_parent"  
17.         android:layout_height="wrap_content"  
18.         android:background="#FF3333"  
19.         android:text="Button2"   
20.         android:layout_below="@+id/button3"/>  
21.   
22.     <Button  
23.         android:id="@+id/button3"  
24.         android:layout_width="fill_parent"  
25.         android:layout_height="wrap_content"  
26.         android:background="#FF33AA"  
27.         android:text="Button3"   
28.         android:layout_below="@+id/button1" />  
29.    
30. </RelativeLayout>  

Button2 和 Button3 的位置发生了变化。

   

FrameLayout

FrameLayout是最简单的一个布局对象。它被定制为你屏幕上的一个空白备用区域，之后你可以在其中填充一个单一对象 — 比如，张你要发布的图片。所有的子元素将会固定在屏幕的左上角；你不能为FrameLayout中的一个子元素指定一个位置。后一个子元素将会直接在前一个子元素之上进行覆盖填充，把它们部份或全部挡住。如果没有设置android:layout_gravity属性，FrameLayout中的子元素总是层叠在屏幕的左上角。

可以考虑把一个图片作为背景，然后再设置一个TextView在背景前显示内容。

TableLayout

一个表格的布局，定义行数和列数，在表格中可以添加其他的元素。每行为一个 <TableRow> 对象。

TableLayout 中有些属性可以对整个表格起作用，有些则是可用在单一的一行中。下面的关于表格的属性是从网上摘录的，非常实用的。

整理到这里希望以后能够用到。

1、全局属性也即列属性，有以下3个参数：
android:stretchColumns            设置可伸展的列。该列可以向行方向伸展，最多可占据一整行。
android:shrinkColumns             设置可收缩的列。当该列子控件的内容太多，已经挤满所在行，那么该子控件的内容将往列方向显示。
android:collapseColumns         设置要隐藏的列。

示例：
android:stretchColumns="0"       第0列可伸展
android:shrinkColumns="1,2"     第1,2列皆可收缩
android:collapseColumns="*"    隐藏所有行
说明：列可以同时具备stretchColumns及shrinkColumns属性，若此，那么当该列的内容N多时，将“多行”显示其内容。
（这里不是真正的多行，而是系统根据需要自动调节该行的layout_height）



2、单元格属性，有以下2个参数：
android:layout_column              指定该单元格在第几列显示
android:layout_span                  指定该单元格占据的列数（未指定时，为1）
示例：
android:layout_column="1"      该控件显示在第1列
android:layout_span="2"          该控件占据2列

说明：一个控件也可以同时具备这两个特性。

[html]  view plain  copy

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.     android:padding="3dip">  
7.      
8.     <!-- 第1个TableLayout，<span style="color:#330033;">使用可伸展特性，并指定每个控件宽度一致</span>>  
9.     <TextView  
10.         android:text="表1：均匀布局"  
11.         android:layout_height="wrap_content"  
12.         android:layout_width="wrap_content"  
13.         android:textSize="15sp"  
14.         android:background="#7f00ffff"/>  
15.     <TableLayout  
16.         android:id="@+id/table1"  
17.         android:layout_width="fill_parent"  
18.         android:layout_height="wrap_content"  
19.         android:stretchColumns="*"  
20.         android:padding="3dip">  
21.         <TableRow>  
22.             <Button android:text="A" android:layout_width="1dip"></Button>  
23.             <Button android:text="AAAA" android:layout_width="1dip"></Button>  
24.             <Button android:text="AAAAAA" android:layout_width="1dip"></Button>  
25.         </TableRow>  
26.     </TableLayout>  
27.       
28.     <!-- 第2个TableLayout，使用可伸展特性布局-->  
29.     <TextView  
30.         android:text="表2：非均匀布局 (与表1的按钮对比一下就清楚了)"  
31.         android:layout_height="wrap_content"  
32.         android:layout_width="wrap_content"  
33.         android:textSize="15sp"  
34.         android:background="#7f00ffff"/>  
35.     <TableLayout  
36.         android:id="@+id/table2"  
37.         android:layout_width="fill_parent"  
38.         android:layout_height="wrap_content"  
39.         android:stretchColumns="*"  
40.         android:padding="3dip">  
41.         <TableRow>  
42.             <Button android:text="A" ></Button>  
43.             <Button android:text="AAAA"></Button>  
44.             <Button android:text="AAAAAA" ></Button>  
45.         </TableRow>  
46.     </TableLayout>  
47.    
48.   
49.     <!-- 第3TableLayout，用于描述表中的列属性。第0列可伸展，第1列可收缩，第2列被隐藏-->  
50.     <TextView  
51.         android:text="表3：全局设置：列属性设置  一列向行方向伸展 ， 二列向列方向伸展 ，三列被隐藏"  
52.         android:layout_height="wrap_content"  
53.         android:layout_width="wrap_content"  
54.         android:textSize="15sp"  
55.         android:background="#7f00ffff"/>  
56.     <TableLayout      
57.         android:id="@+id/table3"  
58.         android:layout_width="fill_parent"  
59.         android:layout_height="wrap_content"  
60.         android:stretchColumns="0"  
61.         android:shrinkColumns="1"  
62.         android:collapseColumns="2"  
63.         android:padding="3dip">  
64.         <TableRow>  
65.             <Button android:text="AAAAAAAAAAAAAAAA"/>  
66.             <Button android:text="AAAAAAAAAAAAAAAA"/>  
67.             <Button android:text="AAAAAAAAAAAAAAAA"/>  
68.         </TableRow>  
69.     </TableLayout>  
70.    
71.     <!-- 第4个TableLayout，用于描述表中单元格的属性，包括：android:layout_column 及android:layout_span-->  
72.     <TextView  
73.         android:text="表4:单元格设置：指定单元格属性设置 设定指定的列"  
74.         android:layout_height="wrap_content"  
75.         android:layout_width="wrap_content"  
76.         android:textSize="15sp"  
77.         android:background="#7f00ffff"/>   
78.           
79.     <TableLayout  
80.         android:id="@+id/table4"  
81.         android:layout_width="fill_parent"  
82.         android:layout_height="wrap_content"  
83.         android:stretchColumns="*"  
84.         android:padding="3dip">  
85.         <TableRow>  
86.             <Button android:text="第0列"/>  
87.             <Button android:text="第1列"/>  
88.             <Button android:text="第2列"/>  
89.         </TableRow>  
90.     
91.         <TableRow>  
92.             <TextView android:text="Set to Column 1" android:layout_column="1"/>  
93.         </TableRow>  
94.          
95.         <TableRow>  
96.             <TextView  
97.                 android:text="Span to column 1 and 2"  
98.                 android:layout_column="1"  
99.                 android:layout_span="2"/>  
100.         </TableRow>  
101.     </TableLayout>   
102. </LinearLayout>  

布局结果如下：

二，使用 include 把不同的 Layout xml 组合使用

一个简单的例子就 ok

sub_xml_1.xml

[html]  view plain  copy

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.     <TextView  
8.         android:id="@+id/textView1"  
9.         android:layout_width="wrap_content"  
10.         android:layout_height="wrap_content"  
11.         android:text="I am in sub xml 1" />  
12.   
13. </LinearLayout>  

sub_xml_2.xml

[html]  view plain  copy

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.     <TextView  
8.         android:id="@+id/textView1"  
9.         android:layout_width="wrap_content"  
10.         android:layout_height="wrap_content"  
11.         android:text="I am in sub xml 2" />  
12. </LinearLayout>  

include_test.xml

[html]  view plain  copy

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="wrap_content"  
5.     android:orientation="vertical" >  
6.       
7.   
8.     <include  
9.         android:layout_height="100dp"   
10.         layout="@layout/sub_xml_1" />  
11.       
12.     <include  
13.         android:layout_height="100dp"   
14.         layout="@layout/sub_xml_2" />  
15.       
16. </LinearLayout>  

测试结果：

三，在 Layout 的 xml 文件中，使用自定义的View 的 class来实现自己的布局

方法用起来很灵活，自己定义一个类，其基类是View，在layout xml文件中引入该类作为一个标签，这样我们就可以使用自己定义的View了。

找了个例子很简单，也很实用，工作中用得到。

1) 定义一个 自己的 View 类  MyView.Java，没什么花哨的就是画个圈。

[java]  view plain  copy

1. package com.example.customizeviewinlayout;  
2.   
3.   
4. import android.content.Context;  
5. import android.graphics.Canvas;  
6. import android.graphics.Color;  
7. import android.graphics.Paint;  
8. import android.graphics.Paint.Style;  
9. import android.util.AttributeSet;  
10. import android.view.View;  
11.   
12.   
13. public class MyView extends View  
14. {  
15.     private Paint m_Paint;  
16.       
17.     public MyView(Context context)  
18.     {  
19.         super(context);  
20.   
21.     }  
22.   
23.     public MyView(Context context,AttributeSet attr)  
24.     {  
25.         super(context,attr);  
26.     }  
27.   
28.     protected void onDraw(Canvas canvas)  
29.     {    
30.      super.onDraw(canvas);    
31.          m_Paint = new Paint();    
32.          m_Paint.setColor(Color.BLUE);    
33.          m_Paint.setStyle(Style.FILL);    
34.          canvas.drawCircle(40, 40, 30, m_Paint);    
35.     }    
36. }  

注意

代码MyView中一定要实现接口  public MyView(Context context,AttributeSet attr)  

这样MyView 可以获得layout文件中定义的属性。否则系统会抛出 InflateException

2)  在布局文件中使用自己定义的View

可以注意一下，这里给自定义的View 加了个id，这样我们就可以在程序中找到它并对它进行操作了。

[html]  view plain  copy

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent" >  
5.   
6.     <FrameLayout   
7.             android:layout_width="fill_parent"   
8.             android:layout_height="wrap_content"   
9.             android:layout_weight="1" >  
10.               
11.     <com.example.customizeviewinlayout.MyView   
12.                 android:id="@+id/myView"   
13.                 android:layout_width="fill_parent"   
14.                 android:layout_height="fill_parent"/>                    
15.     </FrameLayout>    
16.   
17.   
18. </LinearLayout>  

3)  修改一下 MainActivity.java 文件

[java]  view plain  copy

1. package com.example.customizeviewinlayout;  
2.   
3. import android.os.Bundle;  
4. import android.app.Activity;  
5. import android.view.Menu;  
6. import android.view.View;  
7. import android.view.Window;  
8. import android.view.WindowManager;  
9.   
10. public class MainActivity extends Activity {  
11.   
12.     private View m_MyView;  
13.       
14.     @Override  
15.     public void onCreate(Bundle savedInstanceState)   
16.     {  
17.         super.onCreate(savedInstanceState);  
18.           
19.         // requesting to turn the title OFF  
20.         requestWindowFeature(Window.FEATURE_NO_TITLE);  
21.         // making it full screen  
22.         getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);  
23.           
24.         setContentView(R.layout.activity_main);  
25.           
26.         m_MyView = (View)findViewById(R.id.myView);  // 我们可以取得自定义View的对象，我们就可以任意操作它了  
27.           
28.         // ..........  
29.     }  
30.   
31.     @Override  
32.     public boolean onCreateOptionsMenu(Menu menu) {  
33.         getMenuInflater().inflate(R.menu.activity_main, menu);  
34.         return true;  
35.     }  
36. }  

测试结果：