Android布局文件的使用

 

1.布局管理器的介绍

Android的界面控件比较多，如果不理顺他们内在的关系，孤立的学习、记忆这额UI控件，不仅学起来事倍功半，而且不利于掌握他们内在的关系。为了更好的掌握Android界面控件的关系以及更好的实现界面布局，所有我们这里介绍以ViewGroup为基类派生出来的Android布局管理器的使用

1.1线性布局

线性布局由LinearLayout类来作代表，线性布局有点象Swing编程里的Box,他们都会将容器里的组件一个接一个地排列起来。LinearLayout可以控制各组件横向排列（通过设置android：orientation属性控制），也可控制各控件纵向排列。

Android的线性布局不会换行，当控件一个挨着一个地排列到头之后，剩下的控件将不会被显示出来。

表3.1  LinearLayout的常用XML的属性及相关方法

Attribute Name	Related Method	Description
android:baselineAligned	setBaselineAligned(boolean)	When set to false,   prevents the layout from aligning its children's baselines.
android:baselineAlignedChildIndex	setBaselineAlignedChildIndex(int)	When a linear layout is   part of another layout that is baseline aligned, it can specify which of its   children to baseline align to (i.e which child TextView).
android:gravity	setGravity(int)	Specifies how to place   the content of an object, both on the x and y axis, within the object itself.
android:orientation	setOrientation(int)	Should the layout be a   column or a row? Use "horizontal" for a row, "vertical"   for a column.

 

 

LinearLayout包含的所有子元素都收LinearLayout.LayoutParams控制，因此LinearLayout包含的子元素可以额外制定如表3.2所示的属性。

表 3.2 LineLayout子元素支持的常用XML属性及相关方法

XML属性	说明
android:layout_gravity	指定该子元素在LinearLayout中的对齐方式
Android:layout_weight	指定该子元素在LinearLayout中所占的权重

 

1.1.1  示范

例如定义如下XML布局管理器：

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

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

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="vertical"

    android:gravity="bottom|center_horizontal" >

    <!--   android:gravity="bottom|center_horizontal"这段代码就是实习控件显示在底部并水平居中   -->

<!--   这里是定义的五个测试按钮 -->

    <Button

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="@string/test_btn1"

        />

    <Button

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="@string/test_btn2"

        />

    <Button

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="@string/test_btn3"

        />

    <Button

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="@string/test_btn4"

        />

    <Button

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="@string/test_btn5"

        />

</LinearLayout>

 

通过上面的布局，我们发布工程可以看到如下的页面，这里我们采用的是线性布局方式。如果我们通过修改上面中的 android:gravity="bottom|center_horizontal"为：android:gravity="right|center_vertical"——也就是所有控件水平右对齐，垂直居中，这两个页面如图3.3和图3.4：

                            

                    图3.3    底部居中对齐                           图 3.4 靠右垂直居中

当然，上面两种效果都是垂直的线性布局方式，那么我们怎样做到水平布局呢？这就需要用到我们的android:orientation="vertical"属性以及修改它的值为android:orientation="horizontal"，这样，控件就能实现水平布局了。

 

1.2  表格布局

表格布局由TableLayout所代表，TableLayout继承LinearLayout，因此它的本质依然是线性布局管理前器。表格采用行、列的形式来管理UI控件，TableLayout并不需要明确地声明包含多少行、多少列，而是通过TableRow、其他控件来控制行数和列数。

每次想TableLayout中添加一个TableRow，该TableRow就是一个表格行，TableRow也是容器，因此它也可以不断添加其他控件，每增加一个子控件该表格就增加一行。

TableLayout不仅支持LinearLayout的所有XML属性，而且还支持如下属性。

如表 3.5所示：

表3.5  TableLayout的常用XML属性及相关方法

XML属性	相关方法	说明
android:collapseColumns	setColumnCollapsed(int,boolean)	设置需要被隐藏的列的列序号，多个列序号之间用逗号隔开
android:shrinkColumns	setShrinkAllColumns(boolean)	设置允许被收缩的列的列序号，多个列序号之间用逗号隔开
android:stretchColumns	setStretColunmns(boolean)	设置允许被拉申的列的列序号，多个列序号之间用逗号隔开

 

1.2.1示例

演示表格布局：

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

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

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="vertical" >

 

    <!-- 定义第一个表格布局 ，这里使用了布局嵌套   -->

    <!-- 设置的第一个表格的第二列是可以缩放显示，第三列是可以拉伸显示的，注意：这里列的下标也是从0开始   -->

 

    <TableLayout

        android:id="@+id/first_tablelayout"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:shrinkColumns="1"

        android:stretchColumns="2" >

 

        <Button

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="我是按钮a" />

        <!-- 上面没有添加TableRow，那么该控件会独自显示一行，这下面的三个控件会根据设置的信息显示   -->

 

        <TableRow>

 

            <Button

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="你好，我是按钮b" />

 

            <Button

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="你好，我是按钮c" />

 

            <Button

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="你好，我是按钮d" />

        </TableRow>

    </TableLayout>

 

</LinearLayout>

上面的布局就使用了我们提到的缩放和拉伸属性，当然在这个布局文件中，我们首次使用了布局嵌套，这一点，我们今后根据自己的需要来考虑。界面显示效果如图3.6，如果我们去掉android:shrinkColumns="1" android:stretchColumns="2"这两个属性，那么效果如图3.7所示：

  

图 1.6                                              图 3.7

TableLayout布局的属性就介绍到这里，剩下的属性还得靠大家去研究。

 

1.3 帧布局

帧布局由FrameLayout所代表，FrameLayout直接集成ViewGroup控件。

帧布局容器为每个加入其中的控件创建一个空白的区域（称为一帧），每个子控件占据一帧，这些帧都会根据gravity属性执行自动对齐。帧布局的效果有点类似于ＡＷＴ编程的

CardLayout一个一个叠加在一起。

表3.8显示了FrameLayout常用的XML属性及相关方法

XML属性	相关方法	说明
android:foreground	setForeground(Drawable)	设置该帧布局的前景图像
android:foregroundGravity	setForegroundGravity(int)	定义绘制前景图像的gravity属性

 

1.3.1示例

演示帧布局

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

    android:orientation="vertical" >

<!--   依次定义5个TextView，先定义的TextView位于底层，后定义的TextView位于上层 -->

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="center"

        android:background="#ff0000"

        android:height="300dip"

        android:width="300dip" />

 

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="center"

        android:background="#00ff00"

        android:height="240dip"

        android:width="240dip" />

 

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="center"

        android:background="#0000ff"

        android:height="180dip"

        android:width="180dip" />

 

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="center"

        android:background="#234565"

        android:height="120dip"

        android:width="120dip" />

     <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="center"

        android:background="#ab3467"

        android:height="60dip"

        android:width="60dip" />

   

 

</FrameLayout>

上面的android:layout_gravity="center"是让控件在屏幕中央显示。然后height和width属性是控制的控件大小。background是设置控件的背景颜色.

显示效果如图3.9所示：

 

 

图 3.9 帧布局效果图

 

1.4绝对布局

绝对布局由AbsoluteLayout代表，绝对布局就像JavaＡＷＴ编程中的空布局，就是Android不提供任何布局控制，而是由开发人员自己通过X坐标、Y坐标来控制控件的位置。当使用AbsoluteLayout作为布局容器时。布局容器不再管理子控件的位置、大小——z这些都要开发人员自己控制。

使用绝对布局是，每个子控件都可以指定如下两个XML属性：

layout_x:指定该子控件的x坐标

layout_y:指定该子控件的y坐标

1.4.1示例

下面就介绍一个简易的登录界面实例：

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

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

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="vertical" >

 

    <!-- 定义一个文本框，使用绝对定位方式   -->

 

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_x="20dip"

        android:layout_y="26dip"

        android:text="用户名：" />

    <!-- 定义一个编辑框控件，用来接收用户输入的用户名   -->

 

    <EditText

        android:layout_width="200dip"

        android:layout_height="40dip"

        android:layout_x="100dip"

        android:layout_y="20dip"

        android:hint="请输入用户名" />

 

    <!-- 定义一个文本框，使用绝对定位方式   -->

 

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_x="20dip"

        android:layout_y="86dip"

        android:text="密    码："   />

    <!-- 定义一个编辑框控件，用来接收用户输入的密码   -->

 

    <EditText

        android:layout_width="200dip"

        android:layout_height="40dip"

        android:layout_x="100dip"

        android:layout_y="80dip"

        android:hint="请输入密码" />

    <!-- 登录按钮 -->

 

    <Button

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_x="130dip"

        android:layout_y="135dip"

        android:text="登    录"   />

 

</AbsoluteLayout>

上述代码已经实现了登录界面，但在实际开发中，我们应该尽量不使用绝对布局开发，因为使用绝对布局会很难兼顾不同屏幕大小、分辨率的问题。因此AbsoluteLayout布局管理器已经过时。当然，登录界面效果如图3.10所示。

 

        图3.10 绝对布局实现登录窗口

1.5相对布局

相对布局由RelativeLayout，相对布局容器内子容器内子控件的位置总是相对于兄弟控件、父容器来决定的，因此这种布局方式称为相对布局。

如果A控件的位置是有B控件的位置来决定的，Android要求先定义B控件，再定义A控件。

RelativeLayout可支持如表3.11所示的两个XML属性来决定的

 

表1.11  RelativeLayout的XML属性及相关方法

XML属性	相关方法	说明
android：gravity	setGravity(int)	设置该布局容器内各子控件的对齐方式
android：ignoreGravity	setIgnoreGravity(int)	设置哪个控件不受grativy属性的影响

 

为了控制该布局容器中各子控件的布局分布，RelativeLayout提供了一个内部类：RelativeLayout.LayoutParams,该类提供了大量的XML属性来控制RelativeLayout布局管理器中子控件的布局分布。

RelativeLayout.LayoutParams里只能设为true、false的XML属性如表3.12所示

 

表 1.12 RelativeLayout.LayoutParams里只能设置为boolean值的属性

android：layout_centerHorizontal	控制该子控件是否位于布局容器的水平居中
android:layout_centerVertical	控制该子控件是否位于布局容器的垂直居中
android:layout_centerInParent	控制该子控件是否位于布局容器的中央位置
android:layout_alignParentBottom	控制该子控件是否与布局管理器的底端对齐
android:layout_alignParentLeft	控制该子控件是否与布局管理器的左边对齐
android:layout_alignParentRight	控制该子控件是否与布局管理器的右边对齐
android:layout_alignParentTop	控制该子控件是否与布局管理器的顶端对齐

1.5.1示范

应用相对布局实现“梅花”布局

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

<!--使用RelativeLayout布局  -->

<!-- 这里实现的效果就是一个“+”效果图，首先设置我们最中央显示的控件，要用到的属性是android:layout_centerInParent="true"

    然后就根据我们的中央显示的控件设置四周显示的控件，分别要用到相对位置属性和对齐方式属性

    这里的button2、button3、button4、button5控件就分别显示在button1的左右上下方

    对齐方式属性为layout_align*,属性值为true

-->

    <Button

           android:id="@+id/test_button01"

           android:layout_width="wrap_content"

           android:layout_height="wrap_content"

           android:text="1"

           android:background="@drawable/ic_launcher"

           android:layout_centerInParent="true"

        />

   <Button

           android:id="@+id/test_button02"

           android:layout_width="wrap_content"

           android:layout_height="wrap_content"

           android:text="2"

           android:background="@drawable/ic_launcher"

           android:layout_toLeftOf="@id/test_button01"

           android:layout_alignBottom="@id/test_button01"

        />

    <Button

           android:id="@+id/test_button03"

           android:layout_width="wrap_content"

           android:layout_height="wrap_content"

           android:text="3"

           android:background="@drawable/ic_launcher"

           android:layout_toRightOf="@id/test_button01"

           android:layout_alignTop="@id/test_button01"

        />

     <Button

           android:id="@+id/test_button04"

           android:layout_width="wrap_content"

           android:layout_height="wrap_content"

           android:text="4"

           android:background="@drawable/ic_launcher"

           android:layout_above="@id/test_button01"

           android:layout_alignLeft="@id/test_button01"

        />

      <Button

           android:id="@+id/test_button05"

           android:layout_width="wrap_content"

           android:layout_height="wrap_content"

           android:text="5"

           android:background="@drawable/ic_launcher"

           android:layout_below="@id/test_button01"

           android:layout_alignLeft="@id/test_button01"

          

        />

      <!--如果我们添加 android:layout_alignParentLeft="true"属性，那么这个控件就将显示在屏幕的最左边，

      因此，要想显示在屏幕的其他位置，值需要设置这个属性就可以了 -->

 

</RelativeLayout>

上图代码实现的是一个梅花布局，其界面效果如图3.13所示。

 

图1.13 梅花布局实现

附加：android中一般支持如下常用的距离单位。

px(像素)：每个px对应屏幕上的一个点。

dip或dp(device independent pixels 设备独立像素)：一种基于屏幕密度的抽象单位。在每英寸160点的显示器上，1dip=1px。但随着屏幕密度的改变，dip与px的换算会发生改变。

sp(scaled pixels,比例像素)：主要处理字体的大小，可以根据用户的字体大小首选项进行缩放。

in(英寸)：标准长度单位。

mm(毫米)：标准长度单位。

pt(磅)：标准长度单位，1/72英寸。