android基础之六大布局

                     Android 布局详解【图文】

Android 布局是开发中非常重要的一个知识部分，它的布局分为以下几种：

Linear Layout：线性布局 
Relative Layout：相对布局 
Table Layout：表格布局 
Grid View：网格布局 
Tab Layout：选项卡布局 
List View：列表布局

 

一、Linear Layout---线性布局

简单来说，直着排，横着排都可以，还可以嵌套，此布局运用的非常多。下面直接上示例代码及截图： 

 

 

 

接下来，看一下布局XML文件:

<!--l version="<?xml version="1.0" encoding="utf-8"?>


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical" android:layout_width="fill_parent"

android:layout_height="fill_parent">


<LinearLayout android:orientation="horizontal"

android:layout_width="fill_parent" android:layout_height="fill_parent"

android:layout_weight="1">

<TextView android:text="red" android:gravity="center_horizontal"

android:background="#aa0000" android:layout_width="wrap_content"

android:layout_height="fill_parent" android:layout_weight="1" />

<TextView android:text="green" android:gravity="center_horizontal"

android:background="#00aa00" android:layout_width="wrap_content"

android:layout_height="fill_parent" android:layout_weight="1" />

<TextView android:text="blue" android:gravity="center_horizontal"

android:background="#0000aa" android:layout_width="wrap_content"

android:layout_height="fill_parent" android:layout_weight="1" />

<TextView android:text="yellow" android:gravity="center_horizontal"

android:background="#aaaa00" android:layout_width="wrap_content"

android:layout_height="fill_parent" android:layout_weight="1" />

</LinearLayout>


<LinearLayout android:orientation="vertical"

android:layout_width="fill_parent" android:layout_height="fill_parent"

android:layout_weight="1">

<TextView android:text="row one" android:textSize="15pt"

android:layout_width="fill_parent" android:layout_height="wrap_content"

android:layout_weight="1" />

<TextView android:text="row two" android:textSize="15pt"

android:layout_width="fill_parent" android:layout_height="wrap_content"

android:layout_weight="1" />

<TextView android:text="row three" android:textSize="15pt"

android:layout_width="fill_parent" android:layout_height="wrap_content"

android:layout_weight="1" />

<TextView android:text="row four" android:textSize="15pt"

android:layout_width="fill_parent" android:layout_height="wrap_content"

android:layout_weight="1" />

</LinearLayout>


</LinearLayout>

下面详细详解这些配置的含义：

LinearLayout 标签的常用属性 
android:orientation="horizontal"：定义方向水平或垂直（horizontal/vertical ） 
android:layout_width="fill_parent" ：宽度填充满父控件的宽度 
android:layout_height="fill_parent"：高度填充满父控件的高度 
android:layout_weight="1"：重量?可解释为权重，这是个什么意思呢，请看下图

 

 

我将这里的配置变了一下， 

<LinearLayout android:orientation="horizontal" 
        android:layout_width="fill_parent" android:layout_height="fill_parent" 
        android:layout_weight="1"> 
        <TextView android:text="red" android:gravity="center_horizontal" 
            android:background="#aa0000" android:layout_width="wrap_content" 
            android:layout_height="fill_parent" android:layout_weight="1" /> 
        <TextView android:text="green" android:gravity="center_horizontal" 
            android:background="#00aa00" android:layout_width="wrap_content" 
            android:layout_height="fill_parent" android:layout_weight="2" /> 
        <TextView android:text="blue" android:gravity="center_horizontal" 
            android:background="#0000aa" android:layout_width="wrap_content" 
            android:layout_height="fill_parent" android:layout_weight="3" /> 
        <TextView android:text="yellow" android:gravity="center_horizontal" 
            android:background="#aaaa00" android:layout_width="wrap_content" 
            android:layout_height="fill_parent" android:layout_weight="4" /> 
    </LinearLayout>

可以看到我设置成了1，2，3，4，这四TextView显示的宽度不一样了，具体是怎么算的，这个追究了，意思清楚就行，都设置为1则平分，否则数给的越大，占的位置就越多。

再看一下TextView的解释 
<TextView android:text="red" android:gravity="center_horizontal" 
            android:background="#aa0000" android:layout_width="wrap_content" 
            android:layout_height="fill_parent" android:layout_weight="1" /> 

android:text="red"：要显示的内容 
android:gravity="center_horizontal"：显示内容的对齐方式 
android:background="#aa0000" ：背景色 
android:layout_width="wrap_content"：宽度，包括自己的内容的宽度 
android:layout_height="fill_parent"：高度，填充父控件的高度 
android:layout_weight="1"：权重

其实含义如果懂些CSS属性的话，还是蛮好懂的，布局跟Div有点类似 
//类似一个外层DIV，里面的内容垂直布局android:orientation="vertical" 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical" android:layout_width="fill_parent" 
    android:layout_height="fill_parent">  

    //类似第一个子DIV，内容水平布局android:orientation="horizontal" 
    <LinearLayout android:orientation="horizontal" 
        android:layout_width="fill_parent" android:layout_height="fill_parent" 
        android:layout_weight="1"></LinearLayout>

     //类似第二个子DIV，内容垂直布局android:orientation="vertical" 
    <LinearLayout android:orientation="vertical" 
        android:layout_width="fill_parent" android:layout_height="fill_parent" 
        android:layout_weight="1"></LinearLayout>

</LinearLayout>

先把大的框框画好，再在各个子框里面细画内容，这个布局蛮简单的。

 

 

 

二、Relative Layout ----相对布局

Relative Layout

Relative Layout布局:相对位置布局，类似于Word中的位置对齐，总共有九个方位，如下图所示 

 

 

下面,我们来看看布局文件的代码与详解:

view plain

1. <?xml version="1.0" encoding="utf-8"?>   
2.   
3. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"   
4.     android:layout_width="fill_parent"   
5.     android:layout_height="fill_parent">   
6.     <TextView   
7.         android:id="@+id/label"   
8.         android:layout_width="fill_parent"   
9.         android:layout_height="wrap_content"   
10. 10.         android:text="Type here:"/>   
11. 11.     <EditText   
12. 12.         android:id="@+id/entry"   
13. 13.         android:layout_width="fill_parent"   
14. 14.         android:layout_height="wrap_content"   
15. 15.         android:background="@android:drawable/editbox_background"   
16. 16.         android:layout_below="@id/label"/>   
17. 17.     <Button   
18. 18.         android:id="@+id/ok"   
19. 19.         android:layout_width="wrap_content"   
20. 20.         android:layout_height="wrap_content"   
21. 21.         android:layout_below="@id/entry"   
22. 22.         android:layout_alignParentRight="true"   
23. 23.         android:layout_marginLeft="10dip"   
24. 24.         android:text="OK" />   
25. 25.     <Button   
26. 26.         android:layout_width="wrap_content"   
27. 27.         android:layout_height="wrap_content"   
28. 28.         android:layout_toLeftOf="@id/ok"   
29. 29.         android:layout_alignTop="@id/ok"   
30. 30.         android:text="Cancel" />   

31. </RelativeLayout>  

 
 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent">

RelativeLayout 声明此Activity使用相对布局, 
android:layout_width="fill_parent":宽度填充父控件的宽度 
android:layout_height="fill_parent":高度填充父控件的高度

 

TextView    //一个标签 
android:id="@+id/label"    //组件ID 
android:layout_width="fill_parent"    //宽,填充父控件 
android:layout_height="wrap_content" //高,刚刚包含自己的内容的高度,相当于自适应 
android:text="Type here:"    //标签显示的内容

EditText    //一个文本框 
android:id="@+id/entry"    //组件ID 
android:layout_width="fill_parent"    //宽 
android:layout_height="wrap_content"    //高 
android:background="@android:drawable/editbox_background"    //背景色 
android:layout_below="@id/label"    //below英文单词译为在…下,这里引用前面的标签组

件,意为摆在这个标签的下面

Button    //一个按钮 
android:id="@+id/ok"    //组件ID 
android:layout_width="wrap_content"    //宽度自适应 
android:layout_height="wrap_content"    //高度自适应 
android:layout_below="@id/entry"    //在前面组件文本框的下面 
android:layout_alignParentRight="true" //相对父控件右对齐,这里的父控件应该是屏幕,

即屏幕的右边 
android:layout_marginLeft="10dip"//组件的外边距10个像素,margin,padding

可以看看CSS的讲解. 
android:text="OK"//按钮上显示的内容

Button 
android:layout_width="wrap_content"//宽自适应 
android:layout_height="wrap_content"//高自适应 
android:layout_toLeftOf="@id/ok" //使当前控件置于id为ok的控件的左边。 
android:layout_alignTop="@id/ok" //使当前控件与id为ok控件的上端排齐。 
android:text="Cancel"//按钮上显示的内容

可以看到相对位置的对齐方式有以下图中所示的这么多: 

 

 

可以分别对应Word中的九个方位,以及还可以设置类似CSS中的组件与组件之间的外边距,如margin即是设置这一项,注意layout_margin这一项设置像素以后,则是设置的上下左右四个方位的值,如果只想设置某一边的话,则使用下面的marginLeft……之一, 
设置组件内文字与组件边距可用属性padding,如下图: 

 

最后效果图为

 

 

三、Table Layout----表格布局

view plain

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.     android:stretchColumns="1">  
6.   
7.     <TableRow>  
8.         <TextView  
9.             android:layout_column="1"  
10. 10.             android:text="Open..."  
11. 11.             android:padding="3dip" />  
12. 12.         <TextView  
13. 13.             android:text="Ctrl-O"  
14. 14.             android:gravity="right"  
15. 15.             android:padding="3dip" />  
16. 16.     </TableRow>  
17. 17.   
18. 18.     <TableRow>  
19. 19.         <TextView  
20. 20.             android:layout_column="1"  
21. 21.             android:text="Save..."    // 保存
22. 22.             android:padding="3dip" />  
23. 23.         <TextView  
24. 24.             android:text="Ctrl-S"  
25. 25.             android:gravity="right"  
26. 26.             android:padding="3dip" />  
27. 27.     </TableRow>  
28. 28.   
29. 29.     <TableRow>  
30. 30.         <TextView  
31. 31.             android:layout_column="1"  
32. 32.             android:text="Save As..."    // 另存为
33. 33.             android:padding="3dip" />  
34. 34.         <TextView  
35. 35.             android:text="Ctrl-Shift-S"  
36. 36.             android:gravity="right"  
37. 37.             android:padding="3dip" />  
38. 38.     </TableRow>  
39. 39.   
40. 40.     <View  
41. 41.         android:layout_height="2dip"  
42. 42.         android:background="#FF909090" />  
43. 43.   
44. 44.     <TableRow>  
45. 45.         <TextView  
46. 46.             android:text="X"  
47. 47.             android:padding="3dip" />  
48. 48.         <TextView  
49. 49.             android:text="Import..."   // 导入  输入
50. 50.             android:padding="3dip" />  
51. 51.     </TableRow>  
52. 52.   
53. 53.     <TableRow>  
54. 54.         <TextView  
55. 55.             android:text="X"  
56. 56.             android:padding="3dip" />  
57. 57.         <TextView  
58. 58.             android:text="Export..."  // 输出
59. 59.             android:padding="3dip" />  
60. 60.         <TextView  
61. 61.             android:text="Ctrl-E"  // 关机
62. 62.             android:gravity="right"  
63. 63.             android:padding="3dip" />  
64. 64.     </TableRow>  
65. 65.   
66. 66.     <View  
67. 67.         android:layout_height="2dip"  
68. 68.         android:background="#FF909090" />  
69. 69.   
70. 70.     <TableRow>  
71. 71.         <TextView  
72. 72.             android:layout_column="1"  // column 专栏
73. 73.             android:text="Quit"  //   退出  离开
74. 74.             android:padding="3dip" />  
75. 75.     </TableRow>  

76. </TableLayout>  

 

注意:这类似于一个HTML表的结构。 
TableLayout类似于HTML元素的table; 
TableRow的类似于HTML元素的tr; 
但对于单元格,您可以使用任何一种组件。在这个例子中,一个TextView相当于一个单元格。 
TableRow与TableRow之间的View用来绘制一条水平线。

TableLayout xmlns:android="http://schemas.android.com/apk/res/android" //表明此Activity使用表格布局 
android:layout_width="fill_parent"    //自适应宽 
android:layout_height="fill_parent"    //自适应高 
android:stretchColumns="1" //是设置 TableLayout所有行的第二列为扩展列,也就是说如果每行都有三列的话，剩余的空间由第二列补齐

第一行: 

view plain

1. 第一行:  
2. <TableRow >  
3. <TextView  
4. android:background="#3300cc"    //背景色  
5. android:layout_column="0"   //单元格的索引,0为第一个  
6. android:text="Open..."  //内容  
7. android:padding="3dip" />    //组件间的边距  
8. <TextView  
9. android:background="#996600"  

10. android:text="Ctrl-O"   

11. android:gravity="right" //指定如何对齐文本,因为单元格过宽,所以需要指定  

12. android:padding="3dip" />  

13. </TableRow>  

android:layout_column="0"    //单元格的索引,0为第一个 
这里要特别说明一下，经试验感觉Android中Table布局，这个Table并不像网页中的Table，

列是固定的，你可以合并单元格，但是这里的列数是不固定，你如果设置为0，

此组件排列在第一个列，如果你设置为1，则自动前面会多出一列，排列在第二列了。 
我这样变了一下： 

view plain

1. <TableRow>  
2.     <TextView     android:layout_column="0"  android:text="Open..."  android:padding="3dip"  
3. android:background="#ffff00" />  
4.   
5.     <TextView android:layout_column="3"  
6.     android:text="Ctrl-O"               android:gravity="right" android:padding="3dip"  
7. android:background="#660000" />  
8. </TableRow>  

 

表格自动变成了四列，这里并不像HTML的表格那样，网页中如果要四列 

view plain

1. <table>  
2.     <tr>  
3.         <td>1</td>  
4.         <td>2</td>  
5.         <td>3</td>  
6.         <td>4</td>  
7.     </tr>  
8. </table>  

Android中却是 

view plain

1. <table>  
2.     <tr>  
3.         <td layout_column=0></td>  
4.         <td layout_column=4></td>  
5.     </tr>  
6. </table>  

这样就实现了四列，他的列是根据列的下标来定的，所以布局时要注意这一点。

其它的地方解释一下

view plain

1. <View  
2.         android:layout_height="2dip"  
3.         android:background="#FF909090" />  

 一条线，相当于HTML中的<hr /> 

android:padding="3dip"相当于HTML中的CSS中的padding属性，指容器内的内容与容器的

边距，不过这里不是用px为单位，而是dip为单位，注意一下就可以了。

 

四、Tabel布局,计算器的实现

 

MyCalculator.java

view plain

1. package com.zhd.mc;  
2. import java.math.BigDecimal;  
3. import android.app.Activity;  
4. import android.os.Bundle;  
5. import android.view.View;  
6. import android.view.View.OnClickListener;  
7. import android.widget.Button;  
8. import android.widget.EditText;  
9. public class MyCalculator extends Activity {  
10. 10.     private Button[] btnNum = new Button[11];// 数值按钮  
11. 11.     private Button[] btnCommand = new Button[5];// 符号按钮  
12. 12.     private EditText editText = null;// 显示区域  
13. 13.     private Button btnClear = null; // clear按钮  
14. 14.     private String lastCommand; // 用于保存运算符  
15. 15.     private boolean clearFlag; // 用于判断是否清空显示区域的值,true需要,false不需要  
16. 16.     private boolean firstFlag; // 用于判断是否是首次输入,true首次,false不是首次  
17. 17.     private double result; // 计算结果  
18. 18.     public MyCalculator() {  
19. 19.         // 初始化各项值  
20. 20.         result = 0; // x的值  
21. 21.         firstFlag = true; // 是首次运算  
22. 22.         clearFlag = false; // 不需要清空  
23. 23.         lastCommand = "="; // 运算符  
24. 24.     }  
25. 25.     @Override  
26. 26.     public void onCreate(Bundle savedInstanceState) {  
27. 27.         super.onCreate(savedInstanceState);  
28. 28.         setContentView(R.layout.calculator);  
29. 29.         // 获取运算符  
30. 30.         btnCommand[0] = (Button) findViewById(R.id.add);  
31. 31.         btnCommand[1] = (Button) findViewById(R.id.subtract);  
32. 32.         btnCommand[2] = (Button) findViewById(R.id.multiply);  
33. 33.         btnCommand[3] = (Button) findViewById(R.id.divide);  
34. 34.         btnCommand[4] = (Button) findViewById(R.id.equal);  
35. 35.         // 获取数字  
36. 36.         btnNum[0] = (Button) findViewById(R.id.num0);  
37. 37.         btnNum[1] = (Button) findViewById(R.id.num1);  
38. 38.         btnNum[2] = (Button) findViewById(R.id.num2);  
39. 39.         btnNum[3] = (Button) findViewById(R.id.num3);  
40. 40.         btnNum[4] = (Button) findViewById(R.id.num4);  
41. 41.         btnNum[5] = (Button) findViewById(R.id.num5);  
42. 42.         btnNum[6] = (Button) findViewById(R.id.num6);  
43. 43.         btnNum[7] = (Button) findViewById(R.id.num7);  
44. 44.         btnNum[8] = (Button) findViewById(R.id.num8);  
45. 45.         btnNum[9] = (Button) findViewById(R.id.num9);  
46. 46.         btnNum[10] = (Button) findViewById(R.id.point);  
47. 47.         // 初始化显示结果区域  
48. 48.         editText = (EditText) findViewById(R.id.result);  
49. 49.         editText.setText("0.0");  
50. 50.         // 实例化监听器对象  
51. 51.         NumberAction na = new NumberAction();  
52. 52.         CommandAction ca = new CommandAction();  
53. 53.         for (Button bc : btnCommand) {  
54. 54.             bc.setOnClickListener(ca);  
55. 55.         }  
56. 56.         for (Button bc : btnNum) {  
57. 57.             bc.setOnClickListener(na);  
58. 58.         }  
59. 59.         // clear按钮的动作  
60. 60.         btnClear = (Button) findViewById(R.id.clear);  
61. 61.         btnClear.setOnClickListener(new OnClickListener() {  
62. 62.             @Override  
63. 63.             public void onClick(View view) {  
64. 64.                 editText.setText("0.0");  
65. 65.                 // 初始化各项值  
66. 66.                 result = 0; // x的值  
67. 67.                 firstFlag = true; // 是首次运算  
68. 68.                 clearFlag = false; // 不需要清空  
69. 69.                 lastCommand = "="; // 运算符  
70. 70.             }  
71. 71.         });  
72. 72.     }  
73. 73.     // 数字按钮监听器  
74. 74.     private class NumberAction implements OnClickListener {  
75. 75.         @Override  
76. 76.         public void onClick(View view) {  
77. 77.             Button btn = (Button) view;  
78. 78.             String input = btn.getText().toString();  
79. 79.             if (firstFlag) { // 首次输入  
80. 80.                 // 一上就".",就什么也不做  
81. 81.                 if (input.equals(".")) {  
82. 82.                     return;  
83. 83.                 }  
84. 84.                 // 如果是"0.0"的话,就清空  
85. 85.                 if (editText.getText().toString().equals("0.0")) {  
86. 86.                     editText.setText("");  
87. 87.                 }  
88. 88.                 firstFlag = false;// 改变是否首次输入的标记值  
89. 89.             } else {  
90. 90.                 String editTextStr = editText.getText().toString();  
91. 91.                 // 判断显示区域的值里面是否已经有".",如果有,输入的又是".",就什么都不做  
92. 92.                 if (editTextStr.indexOf(".") != -1 && input.equals(".")) {  
93. 93.                     return;  
94. 94.                 }  
95. 95.                 // 判断显示区域的值里面只有"-",输入的又是".",就什么都不做  
96. 96.                 if (editTextStr.equals("-") && input.equals(".")) {  
97. 97.                     return;  
98. 98.                 }  
99. 99.                 // 判断显示区域的值如果是"0",输入的不是".",就什么也不做  
100. 100.                 if (editTextStr.equals("0") && !input.equals(".")) {  
101. 101.                     return;  
102. 102.                 }  
103. 103.             }  
104. 104.             // 如果我点击了运算符以后,再输入数字的话,就要清空显示区域的值  
105. 105.             if (clearFlag) {  
106. 106.                 editText.setText("");  
107. 107.                 clearFlag = false;// 还原初始值,不需要清空  
108. 108.             }  
109. 109.             editText.setText(editText.getText().toString() + input);// 设置显示区域的值  
110. 110.         }  
111. 111.     }  
112. 112.     // 符号按钮监听器  
113. 113.     private class CommandAction implements OnClickListener {  
114. 114.         @Override  
115. 115.         public void onClick(View view) {  
116. 116.             Button btn = (Button) view;  
117. 117.             String inputCommand = (String) btn.getText();  
118. 118.             if (firstFlag) {// 首次输入"-"的情况  
119. 119.                 if (inputCommand.equals("-")) {  
120. 120.                     editText.setText("-");// 显示区域的内容设置为"-"  
121. 121.                     firstFlag = false;// 改变首次输入的标记  
122. 122.                 }  
123. 123.             } else {  
124. 124.                 if (!clearFlag) {// 如果flag=false不需要清空显示区的值,就调用方法计算  
125. 125.                     calculate(Double.parseDouble(editText.getText().toString()));// 保存显示区域的值,并计算  
126. 126.                 }  
127. 127.                 // 保存你点击的运算符  
128. 128.                 lastCommand = inputCommand;  
129. 129.                 clearFlag = true;// 因为我这里已经输入过运算符,  
130. 130.             }  
131. 131.         }  
132. 132.     }  
133. 133.     // 计算用的方法  
134. 134.     private void calculate(double x) {  
135. 135.         /*BigDecimal bdX = new BigDecimal(result);  
136. 136.         BigDecimal bdY = new BigDecimal(y); 
137. 137.         BigDecimal bdResult = null; 
138. 138.         if (lastCommand.equals("+")) { 
139. 139.             bdResult = bdX.add(bdY); 
140. 140.         } else if (lastCommand.equals("-")) { 
141. 141.             bdResult = bdX.subtract(bdY); 
142. 142.         } else if (lastCommand.equals("*")) { 
143. 143.             bdResult = bdX.multiply(bdY); 
144. 144.         } else if (lastCommand.equals("/")) { 
145. 145.             bdResult = bdX.divide(bdY); 
146. 146.         } else if (lastCommand.equals("=")) { 
147. 147.             bdResult = bdX; 
148. 148.         } 
149. 149.         editText.setText(bdResult.toString()); 
150. 150.         result = bdResult.doubleValue();*/  
151. 151.           
152. 152.         if (lastCommand.equals("+")) {  
153. 153.             result += x;  
154. 154.         } else if (lastCommand.equals("-")) {  
155. 155.             result -= x;  
156. 156.         } else if (lastCommand.equals("*")) {  
157. 157.             result *= x;  
158. 158.         } else if (lastCommand.equals("/")) {  
159. 159.             result /= x;  
160. 160.         } else if (lastCommand.equals("=")) {  
161. 161.             result = x;  
162. 162.         }  
163. 163.         editText.setText("" + result);  
164. 164.     }  

165. }  

 

布局配置文件:

view plain

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" android:layout_height="wrap_content"  
4.     android:textSize="42sp" android:stretchColumns="1">  
5.     <TableRow>  
6.         <EditText android:id="@+id/result" android:layout_width="fill_parent"  
7.             android:layout_height="wrap_content"  
8.             android:background="@android:drawable/editbox_background"  
9.             android:layout_span="4" android:textSize="48sp" android:gravity="right|center_vertical"  
10. 10.             android:cursorVisible="false" android:editable="false" android:lines="1" />  
11. 11.     </TableRow>  
12. 12.     <TableRow>  
13. 13.         <LinearLayout android:orientation="horizontal"  
14. 14.             android:layout_width="fill_parent" android:layout_height="wrap_content"  
15. 15.             android:textSize="42sp" android:layout_weight="1">  
16. 16.             <Button android:id="@+id/num7" android:layout_width="fill_parent"  
17. 17.                 android:layout_height="wrap_content" android:textSize="42sp"  
18. 18.                 android:text="7" android:layout_weight="1" />  
19. 19.             <Button android:id="@+id/num8" android:layout_width="fill_parent"  
20. 20.                 android:layout_height="wrap_content" android:textSize="42sp"  
21. 21.                 android:text="8" android:layout_weight="1" />  
22. 22.             <Button android:id="@+id/num9" android:layout_width="fill_parent"  
23. 23.                 android:layout_height="wrap_content" android:textSize="42sp"  
24. 24.                 android:text="9" android:layout_weight="1" />  
25. 25.             <Button android:id="@+id/divide" android:layout_width="fill_parent"  
26. 26.                 android:layout_height="wrap_content" android:textSize="42sp"  
27. 27.                 android:text="/" android:layout_weight="1" />  
28. 28.         </LinearLayout>  
29. 29.     </TableRow>  
30. 30.     <TableRow>  
31. 31.         <LinearLayout android:orientation="horizontal"  
32. 32.             android:layout_width="fill_parent" android:layout_height="wrap_content"  
33. 33.             android:textSize="42sp" android:layout_weight="1">  
34. 34.             <Button android:id="@+id/num4" android:layout_width="fill_parent"  
35. 35.                 android:layout_height="wrap_content" android:textSize="42sp"  
36. 36.                 android:text="4" android:layout_weight="1" />  
37. 37.             <Button android:id="@+id/num5" android:layout_width="fill_parent"  
38. 38.                 android:layout_height="wrap_content" android:textSize="42sp"  
39. 39.                 android:text="5" android:layout_weight="1" />  
40. 40.             <Button android:id="@+id/num6" android:layout_width="fill_parent"  
41. 41.                 android:layout_height="wrap_content" android:textSize="42sp"  
42. 42.                 android:text="6" android:layout_weight="1" />  
43. 43.             <Button android:id="@+id/multiply" android:layout_width="fill_parent"  
44. 44.                 android:layout_height="wrap_content" android:textSize="42sp"  
45. 45.                 android:text="*" android:layout_weight="1" />  
46. 46.         </LinearLayout>  
47. 47.     </TableRow>  
48. 48.     <TableRow>  
49. 49.         <LinearLayout android:orientation="horizontal"  
50. 50.             android:layout_width="fill_parent" android:layout_height="wrap_content"  
51. 51.             android:textSize="42sp" android:layout_weight="1">  
52. 52.             <Button android:id="@+id/num1" android:layout_width="fill_parent"  
53. 53.                 android:layout_height="wrap_content" android:textSize="42sp"  
54. 54.                 android:text="1" android:layout_weight="1" />  
55. 55.             <Button android:id="@+id/num2" android:layout_width="fill_parent"  
56. 56.                 android:layout_height="wrap_content" android:textSize="42sp"  
57. 57.                 android:text="2" android:layout_weight="1" />  
58. 58.             <Button android:id="@+id/num3" android:layout_width="fill_parent"  
59. 59.                 android:layout_height="wrap_content" android:textSize="42sp"  
60. 60.                 android:text="3" android:layout_weight="1" />  
61. 61.             <Button android:id="@+id/subtract" android:layout_width="fill_parent"  
62. 62.                 android:layout_height="wrap_content" android:textSize="42sp"  
63. 63.                 android:text="-" android:layout_weight="1" />  
64. 64.         </LinearLayout>  
65. 65.     </TableRow>  
66. 66.     <TableRow>  
67. 67.         <LinearLayout android:orientation="horizontal"  
68. 68.             android:layout_width="fill_parent" android:layout_height="wrap_content"  
69. 69.             android:textSize="42sp" android:layout_weight="1">  
70. 70.             <Button android:id="@+id/num0" android:layout_width="fill_parent"  
71. 71.                 android:layout_height="wrap_content" android:textSize="42sp"  
72. 72.                 android:text="0" android:layout_weight="1" />  
73. 73.             <Button android:id="@+id/point" android:layout_width="fill_parent"  
74. 74.                 android:layout_height="wrap_content" android:textSize="42sp"  
75. 75.                 android:text="." android:layout_weight="1" />  
76. 76.             <Button android:id="@+id/add" android:layout_width="fill_parent"  
77. 77.                 android:layout_height="wrap_content" android:textSize="42sp"  
78. 78.                 android:text="+" android:layout_weight="1" />  
79. 79.             <Button android:id="@+id/equal" android:layout_width="fill_parent"  
80. 80.                 android:layout_height="wrap_content" android:textSize="42sp"  
81. 81.                 android:text="=" android:layout_weight="1" />  
82. 82.         </LinearLayout>  
83. 83.     </TableRow>  
84. 84.     <TableRow>  
85. 85.         <Button android:id="@+id/clear" android:layout_width="fill_parent"  
86. 86.             android:layout_height="wrap_content" android:textSize="30sp"  
87. 87.             android:text="clear" android:layout_span="4" android:gravity="center_vertical|center_horizontal"/>  
88. 88.     </TableRow>  

89. </TableLayout>  

 

最终效果如下图:

 

 

但是还是有些不好处理的地方,如结果位数过多时的处理,如图:

 

 

 

暂时就这样告一段落,需要解释一下布局,
<TableRow>
        <LinearLayout
使用了嵌套布局, 每一行里面都套一个流布局,android:layout_weight="1"设置一下权重,好控制按钮的宽度,android:textSize="42sp"如果不设置按钮上面显示的文字的大小,那么这时,下半部会空出来一部分,不好看,设置了一下字体,撑大布局,占满屏幕.