浅谈Android布局样式

来源：互联网发布：ant打包java web项目编辑：程序博客网时间：2024/05/16 11:20

浅谈Android布局样式

初学android，感觉还是比较轻松的。当然，如果没有好好的去在自己的电脑上实现的话，估计也会搞得自己稀里糊涂的。下面是我在学习Android布局样式的一些总结（个人这样认为），当然，在其中也借鉴了其他的学习资料，现在与大家分享一下。学习中，我分别学习了Android的四种布局样式分别为：

1.LinearLayout（线性布局）

2.RelativeLayout (相对布局)

3.TableLayout (表格布局)

4.FrameLayout （帧布局）

下面逐一介绍一下：

1.LinearLayout（线性布局）

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

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

view plain
<?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 内容如下：

view plain
<?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 内容不变。

view plain
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

view plain
<? 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 的元素的顶部

还有很多关于相对位置的字段,希望大家能够自己去发现

界面效果如图：

案例二:梅花效果

问题:利用相对布局实现下面的效果

案例分析:

我们可以从途中看出,四周的方框的角都与中间的方框相连,而且呈现出X字样.试想,中间的是不是有什么特殊含义?

好,养我们做一个假设:假设中间的方框为相对对象,那么各个方框如何表示呢?拿左上角的方框为例,它的位置是:既中间方框的上面又是中间方框的左边.好,那么其他的是不是可以同样再这样表示呢?答案是肯定的.按照这个思路,我们试着把代码写出来:

main.xml

view plain
<?xml version="1.0" encoding="utf-8"?>  
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent" >  
  
  
    <TextView  
        android:id="@+id/center"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_centerInParent="true"  
        android:background="@drawable/meihua"/>  
  
  
    <TextView  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_above="@id/center"  
        android:layout_toLeftOf="@id/center"  
        android:background="@drawable/meihua"/>  
  
  
    <TextView  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_above="@id/center"  
        android:layout_toRightOf="@id/center"  
        android:background="@drawable/meihua"/>  
  
  
    <TextView  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_below="@id/center"  
        android:layout_toLeftOf="@id/center"  
        android:background="@drawable/meihua"/>  
  
  
    <TextView  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_below="@id/center"  
        android:layout_toRightOf="@id/center"  
        android:background="@drawable/meihua"/>  
  
  
</RelativeLayout>  

运行图为:

android:layout_centerInParent="true" 图片垂直水平居中

android:background="@drawable/meihua"将该元素的id放到background下,"meihua"是我拷入的图片文件

3.TableLayout (表格布局)

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

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

□ <TableRow> 定义一个行

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

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

view plain
<? 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 文件内容如下：

view plain
<? 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 ）坐标，按组件定义的先后顺序依次逐屏显示 ， 后面出现的会覆盖前面的画面 。 用该布局可以实现动画效果 。
接下来，我们用三幅图片实现一只小鸟飞翔的动画效果。三张图片如下：

编写的mail.xml文件:
view plain
<span style="font-size:16px;"><?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></span>  

在该布局文件中定义一个 id 为 frame 的帧布局文件。
编写 FreamTestActivity.java 类
view plain
<span style="font-size:16px;">package cn.class3g;  
  
  
import android.app.Activity;  
import android.graphics.drawable.Drawable;  
import android.os.Bundle;  
import android.os.Handler;  
import android.os.Message;  
import android.view.View;  
import android.view.View.OnClickListener;  
import android.widget.FrameLayout;  
  
  
public class FreamTestActivity extends Activity {  
    FrameLayout frame = null;  
    boolean flag = true;  
  
  
    class MyHandler extends Handler {  
        int i = 0;  
  
  
        public void handleMessage(Message msg) {  
            i++;  
            show(i % 3);  
            sleep(50);  
        }  
  
  
        public void sleep(long delayMillis) {  
            if (flag) {  
                this.sendMessageDelayed(this.obtainMessage(0), delayMillis);  
            }  
        }  
    }  
  
  
    void show(int i) {  
        Drawable a = getResources().getDrawable(R.drawable.a1);  
        Drawable b = getResources().getDrawable(R.drawable.a2);  
        Drawable c = getResources().getDrawable(R.drawable.a3);  
  
  
        switch (i) {  
        case 0:  
            frame.setForeground(a);  
            break;  
        case 1:  
            frame.setForeground(b);  
            break;  
        case 2:  
            frame.setForeground(c);  
            break;  
        }  
    }  
  
  
    public void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.main);  
        frame = (FrameLayout) findViewById(R.id.frame);  
        final MyHandler myHandler = new MyHandler();  
        myHandler.sleep(50);  
        frame.setOnClickListener(new OnClickListener() {  
  
  
            public void onClick(View arg0) {  
                // TODO Auto-generated method stub  
                flag = !flag;  
                myHandler.sleep(10);  
            }  
        });  
  
  
    }  
}</span>  

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

点击图片之后，小鸟停止飞翔。

好了，这就是我个人的一点收获，如果你在布局样式中有更多的收获，希望能与我分享，谢谢！