Android布局总结及小例题

Android布局分别是LinearLayout （ 线性布局）、 TableLayout （表格布局） 、 RelativeLayout （相对布局）、FrameLayout（ 帧布局 ） 、AbsoluteLayout（绝对布局） 。

1、   LinearLayout （线性 布局 ）

“ LinearLayout ”翻译成中文是 “ 线性布局 ” ，所谓线性布局就是在该标签下的所有子元素会根据其 orientation 属性的值来决定是按行或者是按列逐个显示。

示例 main.xml 布局文件如下：

<? 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"
> 
< TextView
android:layout_width ="fill_parent"
android:layout_height ="wrap_content"
android:text ="@string/name_text"
/>
< EditText
android:layout_width ="fill_parent"
android:layout_height ="wrap_content" />
< Button
android:layout_width ="wrap_content"
android:layout_height ="wrap_content"
android:text ="@string/cancle_button"
/>
< Button
android:layout_width ="wrap_content"
android:layout_height ="wrap_content"
android:text ="@string/ok_button" />
</ LinearLayout >
其对应 strings.xml 内容如下：
<? xml version = "1.0"encoding = "utf-8" ?>
< resources >
< string name = "hello" >Hello World, UIActivity! </ string >
< string name = "app_name"> 用户界面 </ string >
< string name = "name_text"> 请输入用户名 </ string >
< string name = "ok_button"> 确定 </ string >
< string name ="cancle_button" > 取消 </ string >
</ resources >

效果图如下：

垂直排列元素

其属性“ xmlns:android ”指定命名空间，顶级元素必须指定命名空间。而在该命名空间中的控件的属性 如layout_width ，要在属性前加上“ android ：” 做前缀。其属性 “ layout_width” 指定该元素的宽度，可选值有三种 ， “ fill_parent ” 、“ wrap_content ” 、具体数字（单位为 px ） 。其中 “ fill_parent ” 代表填满其父元素，对于顶级元素来说，其父元素就是整个手机屏幕 。 “ wrap_content ” 代表该元素的大小仅包裹其自身内容，而数字则代表其占相应的 px 。其属性“ layout_height ”指定该元素的高度， 可选参数值与 “ layout_width ” 的参数意义相同。

其属性“ orientation ”指定子元素排列方式， 其中指定为 “ vertical ” 则是子元素垂直排列 ， 每个子元素会占独立的一行 ， 如上图 ， 而另一个可选值为 “ horizontal ” 代表子元素水平排列，即每个子元素会占独立的一列。示例 main.xml 布局文件如下。其对应的strings.xml 内容不变。

main .xml

<? xml version = "1.0"encoding = "utf-8" ?>
< LinearLayout
xmlns:android = "http://schemas.android.com/apk/res/android"
android:orientation ="horizontal"
android:layout_width ="fill_parent"
android:layout_height ="fill_parent"
> 
< TextView
android:layout_width ="wrap_content"
android:layout_height ="fill_parent"
android:text = "@string/name_text"
/>
< EditText
android:layout_width ="wrap_content"
android:layout_height ="wrap_content" />
< Button
android:layout_width ="wrap_content"
android:layout_height ="wrap_content"
android:text ="@string/cancle_button"
/>
< Button
android:layout_width ="wrap_content"
android:layout_height ="wrap_content"
android:text ="@string/ok_button" />
</ LinearLayout >

效果图如下：

2 、RelativeLayout （相对布局）

相对布局中的视图组件是按相互之间的相对位置来确定的， 并不是线性布局中的必须

按行或按列单个显示。示例布局文件如下：

main.xml

<? 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:layout_width ="fill_parent"
android:layout_height ="wrap_content"
android:text ="@string/name_text"
android:id = "@+id/text" />
< EditText
android:layout_width ="fill_parent"
android:layout_height ="wrap_content"
android:layout_below = "@id/text"
android:id = "@+id/edit" />
< Button
android:layout_width ="wrap_content"
android:layout_height ="wrap_content"
android:text ="@string/cancle_button"
android:layout_alignParentRight ="true"
android:layout_below = "@id/edit"
android:id = "@+id/cancle" />
< Button
android:layout_width ="wrap_content"
android:layout_height ="wrap_content"
android:layout_toLeftOf ="@id/cancle"
android:layout_alignTop ="@id/cancle"
android:text = "@string/ok_button"/>
</ RelativeLayout >

说明：

android:layout_below="@id/text" ：将该元素放到 id 为 text 的元素的下面

android:layout_toLeftOf="@id/ok" ：放到 id 为 ok 的元素左边

android:layout_alignTop="@id/ok" ：对齐 id 为 ok 的元素的顶部

界面效果如图：

3、   TableLayout （表格布局）

表格布局的风格跟 HTML 中的表格比较接近，只是所采用的标签不同。

<TableLayout > 是顶级元素，说明采用的是表格布局

 <TableRow> 定义一个行

<TextView > 定义一个单元格的内容

示例布局文件内容如下：

<? 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 ="fill_parent"
android:stretchColumns ="0,1,2,3"
> 
< TableRow >
< TextView
android:text = "@string/name"
android:gravity = "center"
android:padding = "3dip" />
< TextView
android:text = "@string/gender"
android:gravity = "center"
android:padding = "3dip" />
< TextView
android:text = "@string/age"
android:gravity = "center"
android:padding = "3dip" />
< TextView
android:text = "@string/phonenum"
android:gravity = "center"
android:padding = "3dip" />
</ TableRow >
< TableRow >
< TextView
android:text = "@string/name1"
android:gravity = "center"
android:padding = "3dip" />
< TextView
android:text = "@string/gender1"
android:gravity = "center"
android:padding = "3dip" />
< TextView
android:text = "@string/age1"
android:gravity = "center"
android:padding = "3dip" />
< TextView
android:text ="@string/phonenum1"
android:gravity = "center"
android:padding = "3dip" />
</ TableRow >
< TableRow >
< TextView
android:text = "@string/name2"
android:gravity = "center"
android:padding = "3dip" />
< TextView
android:text = "@string/gender1"
android:gravity = "center"
android:padding = "3dip" />
< TextView
android:text = "@string/age2"
android:gravity = "center"
android:padding = "3dip" />
< TextView
android:text ="@string/phonenum2"
android:gravity = "center"
android:padding = "3dip" />
</ TableRow >
</ TableLayout >

android:stretchColumns="0,1,2,3"

该属性指定每行都由第“ 0 、 1 、 2 、 3 ”列占满空白空间。

 gravity 指定文字对齐方式，本例都设为居中对齐。

 padding 指定视图与视图内容间的空隙，单位为像素。

对应的 strings.xml 文件内容如下：

<? xml version = "1.0"encoding = "utf-8" ?>
< resources >
< string name = "name" > 姓名 </string >
< string name = "gender" > 性别 </string >
< string name = "age" > 年龄 </string >
< string name = "phonenum"> 电话 </ string >
< string name = "gender1" >男 </ string >
< string name = "gender2" >女 </ string >
< string name = "name1" > 张三 </string >
< string name = "age1" > 25</ string >
< string name = "phonenum1"> 1234567 </ string >
< string name = "name2" > 李四 </string >
< string name = "age2" > 24</ string >
< string name = "phonenum2"> 7654321 </ string >
</ resources >

界面效果如下：

4、FrameLayout （帧布局）

帧布局中的每一个组件都代表一个画面，默认以屏幕左上角作为（ 0,0 ）坐标，按组件

定义的先后顺序依次逐屏显示， 后面出现的会覆盖前面的画面 。 用该布局可以实现动画效果 。接下来，我们用三幅图片实现一只小鸟飞翔的动画效果。三张图片如下：

      

编写 main.xml 文件

其内容如下：

<? xml version = "1.0"encoding = "utf-8" ?>
< FrameLayout
xmlns:android ="http://schemas.android.com/apk/res/android"
android:layout_width ="wrap_content"
android:layout_height ="wrap_content"
android:layout_gravity = "center"
android:id = "@+id/frame" >
</ FrameLayout >

在该布局文件中定义一个 id 为 frame 的帧布局文件。

编写 BirdActivity.java 类

内容如下：

public class BirdActivity extends Activity{
FrameLayout frame = null ;
private boolean flag = true ;
// 由该类两个方法间的循环调用，实现界面不断更新。
class MyHandler extends Handler{
int i = 0;
public void handleMessage(Message msg) {
i ++;
// 总共三幅图，依次显示
show( i % 3);
show( i % 3);
// 再次调用 sleep 方法
sleep(10);
}
public void sleep( long delayMillis) {
// 判断是否继续飞翔
if ( flag ) {
// 实质上是调用了一次handleMessage
sendMessageDelayed(obtainMessage(0),delayMillis);
}
}
}
// 该方法是被调用以更新帧布局的前景图片
void show( int j) {
// 获取三张图片
Drawable a =getResources().getDrawable(R.drawable. a );
Drawable b =getResources().getDrawable(R.drawable. b );
Drawable c =getResources().getDrawable(R.drawable. c );
// 不同的情况，设置不同的前景
switch (j) {
case 0:
frame .setForeground(a);
break ;
case 1:
frame .setForeground(b);
break ;
case 2:
frame .setForeground(c);
break ;
}
}
/** Called when the activity is firstcreated. */
@Override
public void onCreate(BundlesavedInstanceState) {
super .onCreate(savedInstanceState);
setContentView(R.layout. main );
frame = (FrameLayout) findViewById(R.id.frame );
// 创建一个 Handler 子类对象，要调用其方法
final MyHandler myHandler = newMyHandler();
myHandler.sleep(10);
// 为 fram 设置点击事件，当其被点击时，在飞翔与暂停飞翔间切换。
frame .setOnClickListener( newView.OnClickListener() {
@Override
public void onClick(View v) {
flag = ! flag ;
myHandler.sleep(10);
}
});
}
}

说明：

由于 FrameLayout 中后出现的 UI 控件会覆盖前面出现的 UI 控件，每次只能显示一个 UI 控件，因此，我们可以通过在 Activity 中对每次显示的图片内容进行切换以实现动画效果。 或许你会想到开启一条线程来控制切换 ， 但在非主线程中不能更新 UI 界面 ， 所以 ， 我们使用了Android 提供的消息通讯类Handler 。该类可以实现非主线程和负责 UI 的主线程之间的通信，进而间接实现非主线程更新 UI 界面。由于 sleep 方法中的sendMessageDelayed(obtainMessage(0), delayMillis); 本身会延迟发送一个消息 ， 该消息会被框架传递给handleMessage 事件。 我们在handleMessage() 方法中再次调用 sleep() 方法，形成一个循环调用。 在我们对界面进行点击之前 ， 两个方法会一直循环调用 。 前景图片也会不断的切换，进而实现动画的效果。

运行程序，效果你自己试试就知道了！！！！

5、  AbsoluteLayout（绝对布局）

绝色地布局由AbsoluteLayout代表。绝对布局就像java中awt编程中的空布局，就是Android不提供任何布局控制，而是由开发人员自己通过x坐标、y坐标来控制组件的位置。娄使用AbsoluteLayout作为布局容器时，布局容器不再管理子组件的位置、大小——这些都需要开发人啼自己控制；

使用绝对布局时，每个子组件都可指定如下两个xml属性；

Layout_x:指定该子组件上的x坐标；

Layout_y:指定该子组件上的y坐标；

大部分时候，使用绝对布局都不是一个好思路，因为运行Adroid应用的手机往往千差万别，因此屏幕大小、分辨率都存在较大差异，使用绝对布局会很验证兼顾不同屏幕大小、分辨率问题；