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" 可以看到我设置成了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中的位置对齐,总共有九个方位,如下图所示
下面,我们来看看布局文件的代码与详解:
- <?xml version="1.0" encoding="utf-8"?>
- <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent">
- <TextView
- android:id="@+id/label"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- 10. android:text="Type here:"/>
- 11. <EditText
- 12. android:id="@+id/entry"
- 13. android:layout_width="fill_parent"
- 14. android:layout_height="wrap_content"
- 15. android:background="@android:drawable/editbox_background"
- 16. android:layout_below="@id/label"/>
- 17. <Button
- 18. android:id="@+id/ok"
- 19. android:layout_width="wrap_content"
- 20. android:layout_height="wrap_content"
- 21. android:layout_below="@id/entry"
- 22. android:layout_alignParentRight="true"
- 23. android:layout_marginLeft="10dip"
- 24. android:text="OK" />
- 25. <Button
- 26. android:layout_width="wrap_content"
- 27. android:layout_height="wrap_content"
- 28. android:layout_toLeftOf="@id/ok"
- 29. android:layout_alignTop="@id/ok"
- 30. android:text="Cancel" />
31. </RelativeLayout>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" RelativeLayout 声明此Activity使用相对布局, |
TextView //一个标签 EditText //一个文本框 件,意为摆在这个标签的下面 Button //一个按钮 即屏幕的右边 可以看看CSS的讲解. Button |
可以看到相对位置的对齐方式有以下图中所示的这么多:
可以分别对应Word中的九个方位,以及还可以设置类似CSS中的组件与组件之间的外边距,如margin即是设置这一项,注意layout_margin这一项设置像素以后,则是设置的上下左右四个方位的值,如果只想设置某一边的话,则使用下面的marginLeft……之一,
设置组件内文字与组件边距可用属性padding,如下图:
最后效果图为
三、Table Layout----表格布局
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所有行的第二列为扩展列,也就是说如果每行都有三列的话,剩余的空间由第二列补齐
第一行:
10. android:text="Ctrl-O" 11. android:gravity="right" //指定如何对齐文本,因为单元格过宽,所以需要指定 12. android:padding="3dip" /> 13. </TableRow>
列是固定的,你可以合并单元格,但是这里的列数是不固定,你如果设置为0, 此组件排列在第一个列,如果你设置为1,则自动前面会多出一列,排列在第二列了。
|
表格自动变成了四列,这里并不像HTML的表格那样,网页中如果要四列
|
其它的地方解释一下
- <View
- android:layout_height="2dip"
- android:background="#FF909090" />
一条线,相当于HTML中的<hr /> 边距,不过这里不是用px为单位,而是dip为单位,注意一下就可以了。 |
MyCalculator.java
- package com.zhd.mc;
- import java.math.BigDecimal;
- import android.app.Activity;
- import android.os.Bundle;
- import android.view.View;
- import android.view.View.OnClickListener;
- import android.widget.Button;
- import android.widget.EditText;
- public class MyCalculator extends Activity {
- 10. private Button[] btnNum = new Button[11];// 数值按钮
- 11. private Button[] btnCommand = new Button[5];// 符号按钮
- 12. private EditText editText = null;// 显示区域
- 13. private Button btnClear = null; // clear按钮
- 14. private String lastCommand; // 用于保存运算符
- 15. private boolean clearFlag; // 用于判断是否清空显示区域的值,true需要,false不需要
- 16. private boolean firstFlag; // 用于判断是否是首次输入,true首次,false不是首次
- 17. private double result; // 计算结果
- 18. public MyCalculator() {
- 19. // 初始化各项值
- 20. result = 0; // x的值
- 21. firstFlag = true; // 是首次运算
- 22. clearFlag = false; // 不需要清空
- 23. lastCommand = "="; // 运算符
- 24. }
- 25. @Override
- 26. public void onCreate(Bundle savedInstanceState) {
- 27. super.onCreate(savedInstanceState);
- 28. setContentView(R.layout.calculator);
- 29. // 获取运算符
- 30. btnCommand[0] = (Button) findViewById(R.id.add);
- 31. btnCommand[1] = (Button) findViewById(R.id.subtract);
- 32. btnCommand[2] = (Button) findViewById(R.id.multiply);
- 33. btnCommand[3] = (Button) findViewById(R.id.divide);
- 34. btnCommand[4] = (Button) findViewById(R.id.equal);
- 35. // 获取数字
- 36. btnNum[0] = (Button) findViewById(R.id.num0);
- 37. btnNum[1] = (Button) findViewById(R.id.num1);
- 38. btnNum[2] = (Button) findViewById(R.id.num2);
- 39. btnNum[3] = (Button) findViewById(R.id.num3);
- 40. btnNum[4] = (Button) findViewById(R.id.num4);
- 41. btnNum[5] = (Button) findViewById(R.id.num5);
- 42. btnNum[6] = (Button) findViewById(R.id.num6);
- 43. btnNum[7] = (Button) findViewById(R.id.num7);
- 44. btnNum[8] = (Button) findViewById(R.id.num8);
- 45. btnNum[9] = (Button) findViewById(R.id.num9);
- 46. btnNum[10] = (Button) findViewById(R.id.point);
- 47. // 初始化显示结果区域
- 48. editText = (EditText) findViewById(R.id.result);
- 49. editText.setText("0.0");
- 50. // 实例化监听器对象
- 51. NumberAction na = new NumberAction();
- 52. CommandAction ca = new CommandAction();
- 53. for (Button bc : btnCommand) {
- 54. bc.setOnClickListener(ca);
- 55. }
- 56. for (Button bc : btnNum) {
- 57. bc.setOnClickListener(na);
- 58. }
- 59. // clear按钮的动作
- 60. btnClear = (Button) findViewById(R.id.clear);
- 61. btnClear.setOnClickListener(new OnClickListener() {
- 62. @Override
- 63. public void onClick(View view) {
- 64. editText.setText("0.0");
- 65. // 初始化各项值
- 66. result = 0; // x的值
- 67. firstFlag = true; // 是首次运算
- 68. clearFlag = false; // 不需要清空
- 69. lastCommand = "="; // 运算符
- 70. }
- 71. });
- 72. }
- 73. // 数字按钮监听器
- 74. private class NumberAction implements OnClickListener {
- 75. @Override
- 76. public void onClick(View view) {
- 77. Button btn = (Button) view;
- 78. String input = btn.getText().toString();
- 79. if (firstFlag) { // 首次输入
- 80. // 一上就".",就什么也不做
- 81. if (input.equals(".")) {
- 82. return;
- 83. }
- 84. // 如果是"0.0"的话,就清空
- 85. if (editText.getText().toString().equals("0.0")) {
- 86. editText.setText("");
- 87. }
- 88. firstFlag = false;// 改变是否首次输入的标记值
- 89. } else {
- 90. String editTextStr = editText.getText().toString();
- 91. // 判断显示区域的值里面是否已经有".",如果有,输入的又是".",就什么都不做
- 92. if (editTextStr.indexOf(".") != -1 && input.equals(".")) {
- 93. return;
- 94. }
- 95. // 判断显示区域的值里面只有"-",输入的又是".",就什么都不做
- 96. if (editTextStr.equals("-") && input.equals(".")) {
- 97. return;
- 98. }
- 99. // 判断显示区域的值如果是"0",输入的不是".",就什么也不做
- 100. if (editTextStr.equals("0") && !input.equals(".")) {
- 101. return;
- 102. }
- 103. }
- 104. // 如果我点击了运算符以后,再输入数字的话,就要清空显示区域的值
- 105. if (clearFlag) {
- 106. editText.setText("");
- 107. clearFlag = false;// 还原初始值,不需要清空
- 108. }
- 109. editText.setText(editText.getText().toString() + input);// 设置显示区域的值
- 110. }
- 111. }
- 112. // 符号按钮监听器
- 113. private class CommandAction implements OnClickListener {
- 114. @Override
- 115. public void onClick(View view) {
- 116. Button btn = (Button) view;
- 117. String inputCommand = (String) btn.getText();
- 118. if (firstFlag) {// 首次输入"-"的情况
- 119. if (inputCommand.equals("-")) {
- 120. editText.setText("-");// 显示区域的内容设置为"-"
- 121. firstFlag = false;// 改变首次输入的标记
- 122. }
- 123. } else {
- 124. if (!clearFlag) {// 如果flag=false不需要清空显示区的值,就调用方法计算
- 125. calculate(Double.parseDouble(editText.getText().toString()));// 保存显示区域的值,并计算
- 126. }
- 127. // 保存你点击的运算符
- 128. lastCommand = inputCommand;
- 129. clearFlag = true;// 因为我这里已经输入过运算符,
- 130. }
- 131. }
- 132. }
- 133. // 计算用的方法
- 134. private void calculate(double x) {
- 135. /*BigDecimal bdX = new BigDecimal(result);
- 136. BigDecimal bdY = new BigDecimal(y);
- 137. BigDecimal bdResult = null;
- 138. if (lastCommand.equals("+")) {
- 139. bdResult = bdX.add(bdY);
- 140. } else if (lastCommand.equals("-")) {
- 141. bdResult = bdX.subtract(bdY);
- 142. } else if (lastCommand.equals("*")) {
- 143. bdResult = bdX.multiply(bdY);
- 144. } else if (lastCommand.equals("/")) {
- 145. bdResult = bdX.divide(bdY);
- 146. } else if (lastCommand.equals("=")) {
- 147. bdResult = bdX;
- 148. }
- 149. editText.setText(bdResult.toString());
- 150. result = bdResult.doubleValue();*/
- 151.
- 152. if (lastCommand.equals("+")) {
- 153. result += x;
- 154. } else if (lastCommand.equals("-")) {
- 155. result -= x;
- 156. } else if (lastCommand.equals("*")) {
- 157. result *= x;
- 158. } else if (lastCommand.equals("/")) {
- 159. result /= x;
- 160. } else if (lastCommand.equals("=")) {
- 161. result = x;
- 162. }
- 163. editText.setText("" + result);
- 164. }
165. }
布局配置文件:
- <?xml version="1.0" encoding="utf-8"?>
- <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="fill_parent" android:layout_height="wrap_content"
- android:textSize="42sp" android:stretchColumns="1">
- <TableRow>
- <EditText android:id="@+id/result" android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:background="@android:drawable/editbox_background"
- android:layout_span="4" android:textSize="48sp" android:gravity="right|center_vertical"
- 10. android:cursorVisible="false" android:editable="false" android:lines="1" />
- 11. </TableRow>
- 12. <TableRow>
- 13. <LinearLayout android:orientation="horizontal"
- 14. android:layout_width="fill_parent" android:layout_height="wrap_content"
- 15. android:textSize="42sp" android:layout_weight="1">
- 16. <Button android:id="@+id/num7" android:layout_width="fill_parent"
- 17. android:layout_height="wrap_content" android:textSize="42sp"
- 18. android:text="7" android:layout_weight="1" />
- 19. <Button android:id="@+id/num8" android:layout_width="fill_parent"
- 20. android:layout_height="wrap_content" android:textSize="42sp"
- 21. android:text="8" android:layout_weight="1" />
- 22. <Button android:id="@+id/num9" android:layout_width="fill_parent"
- 23. android:layout_height="wrap_content" android:textSize="42sp"
- 24. android:text="9" android:layout_weight="1" />
- 25. <Button android:id="@+id/divide" android:layout_width="fill_parent"
- 26. android:layout_height="wrap_content" android:textSize="42sp"
- 27. android:text="/" android:layout_weight="1" />
- 28. </LinearLayout>
- 29. </TableRow>
- 30. <TableRow>
- 31. <LinearLayout android:orientation="horizontal"
- 32. android:layout_width="fill_parent" android:layout_height="wrap_content"
- 33. android:textSize="42sp" android:layout_weight="1">
- 34. <Button android:id="@+id/num4" android:layout_width="fill_parent"
- 35. android:layout_height="wrap_content" android:textSize="42sp"
- 36. android:text="4" android:layout_weight="1" />
- 37. <Button android:id="@+id/num5" android:layout_width="fill_parent"
- 38. android:layout_height="wrap_content" android:textSize="42sp"
- 39. android:text="5" android:layout_weight="1" />
- 40. <Button android:id="@+id/num6" android:layout_width="fill_parent"
- 41. android:layout_height="wrap_content" android:textSize="42sp"
- 42. android:text="6" android:layout_weight="1" />
- 43. <Button android:id="@+id/multiply" android:layout_width="fill_parent"
- 44. android:layout_height="wrap_content" android:textSize="42sp"
- 45. android:text="*" android:layout_weight="1" />
- 46. </LinearLayout>
- 47. </TableRow>
- 48. <TableRow>
- 49. <LinearLayout android:orientation="horizontal"
- 50. android:layout_width="fill_parent" android:layout_height="wrap_content"
- 51. android:textSize="42sp" android:layout_weight="1">
- 52. <Button android:id="@+id/num1" android:layout_width="fill_parent"
- 53. android:layout_height="wrap_content" android:textSize="42sp"
- 54. android:text="1" android:layout_weight="1" />
- 55. <Button android:id="@+id/num2" android:layout_width="fill_parent"
- 56. android:layout_height="wrap_content" android:textSize="42sp"
- 57. android:text="2" android:layout_weight="1" />
- 58. <Button android:id="@+id/num3" android:layout_width="fill_parent"
- 59. android:layout_height="wrap_content" android:textSize="42sp"
- 60. android:text="3" android:layout_weight="1" />
- 61. <Button android:id="@+id/subtract" android:layout_width="fill_parent"
- 62. android:layout_height="wrap_content" android:textSize="42sp"
- 63. android:text="-" android:layout_weight="1" />
- 64. </LinearLayout>
- 65. </TableRow>
- 66. <TableRow>
- 67. <LinearLayout android:orientation="horizontal"
- 68. android:layout_width="fill_parent" android:layout_height="wrap_content"
- 69. android:textSize="42sp" android:layout_weight="1">
- 70. <Button android:id="@+id/num0" android:layout_width="fill_parent"
- 71. android:layout_height="wrap_content" android:textSize="42sp"
- 72. android:text="0" android:layout_weight="1" />
- 73. <Button android:id="@+id/point" android:layout_width="fill_parent"
- 74. android:layout_height="wrap_content" android:textSize="42sp"
- 75. android:text="." android:layout_weight="1" />
- 76. <Button android:id="@+id/add" android:layout_width="fill_parent"
- 77. android:layout_height="wrap_content" android:textSize="42sp"
- 78. android:text="+" android:layout_weight="1" />
- 79. <Button android:id="@+id/equal" android:layout_width="fill_parent"
- 80. android:layout_height="wrap_content" android:textSize="42sp"
- 81. android:text="=" android:layout_weight="1" />
- 82. </LinearLayout>
- 83. </TableRow>
- 84. <TableRow>
- 85. <Button android:id="@+id/clear" android:layout_width="fill_parent"
- 86. android:layout_height="wrap_content" android:textSize="30sp"
- 87. android:text="clear" android:layout_span="4" android:gravity="center_vertical|center_horizontal"/>
- 88. </TableRow>
89. </TableLayout>
最终效果如下图:
但是还是有些不好处理的地方,如结果位数过多时的处理,如图:
暂时就这样告一段落,需要解释一下布局,
<TableRow>
<LinearLayout
使用了嵌套布局, 每一行里面都套一个流布局,android:layout_weight="1"设置一下权重,好控制按钮的宽度,android:textSize="42sp"如果不设置按钮上面显示的文字的大小,那么这时,下半部会空出来一部分,不好看,设置了一下字体,撑大布局,占满屏幕.