Android中的布局方式（一）

Android中的布局方式（一）

 

 

     【1】FrameLayout帧布局

 

     FrameLayout是最简单的布局方式。它基本上就是用单个物件，例如一幅图片，来填充你屏幕上的一片空白区域。FrameLayout上所有的子元素都重叠在屏幕的左上角；你不能为子元素指定一个不同的位置。因此，子view就会简单地在之前的子view上重画，部分或者全部覆盖（除非新的物件是透明的）。

     示例截图：  

XML布局文件如下：

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

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

    android:layout_width="fill_parent"

    android:layout_height="fill_parent">

   

    <!-- dip 表示与密度无关的像素，各个TextView标签沉底显示 -->

<TextView android:id="@+id/tv1"

    android:layout_width="120dip"

    android:layout_height="180dip"

    android:gravity="bottom"

    android:textColor="#FFFFFF"

    android:background="#CC0000"

    android:text="第 1 个TextView"/>

<TextView android:id="@+id/tv2"

    android:layout_width="150dip"

    android:layout_height="150dip"

    android:gravity="bottom"

    android:textColor="#FFFFFF"

    android:background="#00CC00"

    android:text="第 2 个TextView"/>

<TextView android:id="@+id/tv3"

    android:layout_width="180dip"

    android:layout_height="120dip"

    android:gravity="bottom"

    android:textColor="#FFFFFF"

    android:background="#0000CC"

    android:text="第 3 个TextView"/>

<Button android:id="@+id/btn"

    android:layout_width="fill_parent"

    android:layout_height="40dip"

    android:text="后来者居上"/>

</FrameLayout>

 

 

    【2】LinearLayout线性布局

 

线性布局使所有子控件在某水平或竖直方向上自成一行，具体的方向取决于你怎么定义orientation属性。所有的子控件都一个紧挨着一个，所以一个竖直的序列每行都只能拥有一个子控件，不管它们有多宽，同样的，一个水平的序列将只拥有一个行高度（最高的子控件的高度加上控件周边的填充）。一个线性布局会为每一个子控件处理它们之间的空隙及摆放位置（靠右，居中，或者左对齐）。

    线性布局也支持为每一个独立的自控件赋上权值（weight）。这个属性为一个view控件赋上一个“重要度”，并且允许它自动扩展来填满父view的剩余空间。子view们可以设置一个整型的权值，然后在布局中任何剩余的空间将被按照子view的权值来进行分配。默认权值是0。具体这么理解好了，假如只有两个控件，然后一个控件的权值是1，另一个是2，那么剩余空间的分配情况就是第一个占1/3，第二个占2/3。

    具体见如下示例：

    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:id="@+id/tv1"

    android:layout_width="wrap_content"

    android:layout_height="fill_parent"

    android:text="label1"

    android:background="#CC0000"

    android:layout_weight="1"/>

<TextView android:id="@+id/tv2"

    android:layout_width="wrap_content"

    android:layout_height="fill_parent"

    android:text="label2"

    android:background="#00CC00"

    android:layout_weight="2"/>

<TextView android:id="@+id/tv3"

    android:layout_width="wrap_content"

    android:layout_height="fill_parent"

    android:text="label3"

    android:background="#0000CC"

    android:layout_weight="3"/>

</LinearLayout>

 

    需要说明的是，布局之间可以嵌套，也就是说在LinearLayout布局中可以嵌套LinearLayout或者是其他布局。实际上若是能够用好LinearLayout的话，也能实现较好的界面效果了。下面这个例子就是用LinearLayout搭建了一个简单的登录窗口：

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">

 

    <LinearLayout

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:orientation="horizontal">

    <TextView android:id="@+id/tv1"

         android:layout_width="90dip"

         android:layout_height="wrap_content"

         android:text="用户名："

         android:gravity="left"/>

    <EditText android:id="@+id/et1"

         android:layout_width="fill_parent"

         android:layout_height="wrap_content"

         android:maxLines="1"/>

</LinearLayout>

 

    <LinearLayout

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:orientation="horizontal">

    <TextView android:id="@+id/tv2"

         android:layout_width="90dip"

         android:layout_height="wrap_content"

         android:text="密码："

         android:gravity="left"/>

    <EditText android:id="@+id/et2"

         android:layout_width="fill_parent"

         android:layout_height="wrap_content"

         android:maxLines="1"

         android:password="true"/>

</LinearLayout>

 

    <LinearLayout

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:layout_marginTop="5dip"

    android:orientation="horizontal">

<Button android:id="@+id/btn1"

         android:layout_width="wrap_content"

         android:layout_height="wrap_content"

         android:text="  登录  "

         android:layout_marginLeft="160dip"/>

    <Button android:id="@+id/btn2"

         android:layout_width="wrap_content"

         android:layout_height="wrap_content"

         android:text="  取消  "

         android:layout_marginLeft="27dip"/>

    </LinearLayout>

</LinearLayout>

 

    说明：在使用LinearLayout布局时，要注意与layout_marginxxx、padding属性设置的配合。