UI之五种布局管理器

UI之五种布局管理器

在Android中也引入了Java Swing中布局的概念。开发者可使用布局来控制组件中元素的位置和大小等信息。Android中共有下面几种布局方式:线性布局(LinearLayout)、相对布局(RelativeLayout)、表格布局(TableLayout)、框架布局(FrameLayout)、绝对布局(AbsoluteLayout)。其中AbsoluteLayout在Adnroid SDK2.3.3之后已经明确不在支持。

布局概述

在一个Android应用程序中,用户界面通过View和ViewGroup对象构建。Android中有很多种View和ViewGroup,他们都继承自View类。View对象是Android平台上表示用户界面的基本单元。我们所说的布局方式是指一组View元素如何布局,准确的说是一个ViewGroup中包含的一些View怎么样布局。我们要介绍的View的布局方式的类,都是直接或间接继承自ViewGroup类,如下图所示:

其实,所有的布局方式都可以归类为ViewGroup的5个类别,即ViewGroup的5个直接子类。其它的一些布局都扩展自这5个类。

线性布局 LinearLayout:

线性布局是所有布局中最常用的类之一,也是RadioGroup, TabWidget, TableLayout, TableRow, ZoomControls类的父类。LinearLayout可以让它的子元素垂直(android:rientation=”vertical”)或水平(android:rientation=”vertical”)的方式排成一行(不设置方向的时候默认按照垂直方向排列)。当垂直布局时,每一行就只有一个元素,多个元素依次垂直往下;水平布局时,只有一行,每一个元素依次向右排列。
linearLayout中有一个重要的属性 android:layout_weight=”1”,这个weight在垂直布局时,代表行距;水平的时候代表列宽;weight值越大就越大。

还记得我们那个发送短信的小例子吗?就是采用了的LinearLayout布局方式,只不过是在LinearLayout中嵌套了一个LinearLayout

布局代码如下:

<?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" > <!-- 手机号码标签 --> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/tv_phone" /> <!-- 手机号码编辑框 --> <EditText android:id="@+id/et_phone" android:layout_width="fill_parent" android:layout_height="wrap_content" android:hint="@string/tip_phone" android:phoneNumber="true"/> <!-- 信息内容标签 --> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/tv_content" /> <!-- 信息内容编辑框 --> <EditText android:id="@+id/et_content" android:layout_width="fill_parent" android:layout_height="wrap_content" android:hint="@string/tip_content" android:minLines="3"/> <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="horizontal"> <!-- 发送按钮 --> <Button android:id="@+id/btn_Send" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="@string/btn_send"/> <!-- 取消按钮 --> <Button android:id="@+id/btn_Cancel" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="@string/btn_cancel"/> </LinearLayout> </LinearLayout> 

3、RelativeLayout

RelativeLayout 允许子元素指定他们相对于其它元素或父元素的位置(通过ID 指定)。因此,你可以以右对齐,或上下,或置于屏幕中央的形式来排列两个元素。元素按顺序排列,因此如果第一个元素在屏幕的中央,那么相对于这个元素的其它元素将以屏幕中央的相对位置来排列。如果使用XML 来指定这个 layout ,在你定义它之前,被关联的元素必须定义。下面我们使用RelativeLayout 改写一下上面的布局代码,同样实现那个发送短信的小例子的界面:

代码如下:

<?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/tv_phone" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/tv_phone" /> <!-- 手机号码编辑框 --> <EditText android:id="@+id/et_phone" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_below="@id/tv_phone" android:hint="@string/tip_phone" android:phoneNumber="true" /> <!-- 信息内容标签 --> <TextView android:id="@+id/tv_content" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_below="@id/et_phone" android:text="@string/tv_content" /> <!-- 信息内容编辑框 --> <EditText android:id="@+id/et_content" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_below="@id/tv_content" android:hint="@string/tip_content" android:minLines="3" /> <!-- 发送按钮 --> <Button android:id="@+id/btn_Send" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/et_content" android:text="@string/btn_send" /> <!-- 取消按钮 --> <Button android:id="@+id/btn_Cancel" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignTop="@id/btn_Send" android:layout_toRightOf="@id/btn_Send" android:text="@string/btn_cancel" /> </RelativeLayout> 

RelativeLayout 用到的一些重要的属性:
第一类:属性值为 true 或 false

android:layout_centerHrizontal 水平居中
android:layout_centerVertical 垂直居中
android:layout_centerInparent 相对于父元素完全居中
android:layout_alignParentBottom 贴紧父元素的下边缘
android:layout_alignParentLeft 贴紧父元素的左边缘
android:layout_alignParentRight 贴紧父元素的右边缘
android:layout_alignParentTop 贴紧父元素的上边缘
android:layout_alignWithParentIfMissing 如果对应的兄弟元素找不到的话 就以父元素做参照物

第二类:属性值必须为 id 的引用名”@id/id-name”

android:layout_below 在某元素的下方
android:layout_above 在某元素的的上方
android:layout_toLeftOf 在某元素的左边
android:layout_toRightOf 在某元素的右边
android:layout_alignTop 本元素的上边缘和某元素的的上边缘对齐
android:layout_alignLeft 本元素的左边缘和某元素的的左边缘对齐
android:layout_alignBottom 本元素的下边缘和某元素的的下边缘对齐
android:layout_alignRight 本元素的右边缘和某元素的的右边缘对齐

第三类:属性值为具体的像素值,如 30dip,40px

android:layout_marginBottom 离某元素底边缘的距离
android:layout_marginLeft 离某元素左边缘的距离 离某元素右边缘的距离
android:layout_marginRight
android:layout_marginTop 离某元素上边缘的距离

表格布局(TableLayout)

表格布局,将子元素的位置分配到行或列中。一个TableLayout 由许多的TableRow 组成。其实Android的表格布局跟HTML中的表格布局非常类似,TableRow 就像HTML表格的标记。TableLayout 容器不会显示row 、cloumns 或cell 的边框线。每个 row 拥有0个或多个的cell ;每个cell 拥有一个View 对象。表格由列和行组成许多的单元格。表格允许单元格为空。单元格不能跨列,这与HTML 中的不一样。

布局代码:

<?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="1"> <TableRow> <TextView android:layout_column="1" android:text="Open..." android:padding="3dip" /> <TextView android:text="Ctrl-O" android:gravity="right" android:padding="3dip" /> </TableRow> <TableRow> <TextView android:layout_column="1" android:text="Save..." android:padding="3dip" /> <TextView android:text="Ctrl-S" android:gravity="right" android:padding="3dip" /> </TableRow> <TableRow> <TextView android:layout_column="1" android:text="Save As..." android:padding="3dip" /> <TextView android:text="Ctrl-Shift-S" android:gravity="right" android:padding="3dip" /> </TableRow> <View android:layout_height="2dip" android:background="#FF909090" /> <TableRow> <TextView android:text="X" android:padding="3dip" /> <TextView android:text="Import..." android:padding="3dip" /> </TableRow> <TableRow> <TextView android:text="X" android:padding="3dip" /> <TextView android:text="Export..." android:padding="3dip" /> <TextView android:text="Ctrl-E" android:gravity="right" android:padding="3dip" /> </TableRow> <View android:layout_height="2dip" android:background="#FF909090" /> <TableRow> <TextView android:layout_column="1" android:text="Quit" android:padding="3dip" /> </TableRow> </TableLayout> 

用表格布局需要知道以下几点

  • android:shrinkColumns,对应的方法:setShrinkAllColumns(boolean),作用:设置表格的列是否收缩(列编号从0开始,下同),多列用逗号隔开(下同),如android:shrinkColumns=”0,1,2”,即表格的第1、2、3列的内容是收缩的以适合屏幕,不会挤出屏幕。
  • android:collapseColumns,对应的方法:setColumnCollapsed(int,boolean),作用:设置表格的列是否隐藏
  • android:stretchColumns,对应的方法:setStretchAllColumns(boolean),作用:设置表格的列是否拉伸

框架布局(FrameLayout)

FrameLayout是最简单的一个布局对象。它被定制为你屏幕上的一个空白备用区域,之后你可以在其中填充一个单一对象 — 比如,一张你要发布的图片。所有的子元素将会固定在屏幕的左上角;你不能为FrameLayout中的一个子元素指定一个位置。后一个子元素将会直接在前一个子元素之上进行覆盖填充,把它们部份或全部挡住(除非后一个子元素是透明的)。这个布局可以看成是墙脚堆东西,有一个四方的矩形的左上角墙脚,我们放了第一个东西,要再放一个,那就在放在原来放的位置的上面,这样依次的放,会盖住原来的东西。这个布局比较简单,也只能放一点比较简单的东西。

由于AbsoluteLayout已经不在支持,所以我们这里也不再介绍。在实际开发中也强烈建议不要使用AbsoluteLayout布局方式,因为不同的手机的分辨率是不同的,不同有固定的像素去摆放组件的位置。同时,每一种布局也有其局限性,所以在实际开发中,我们常常同时嵌套使用一种或多种布局方式,以呈现出更美观的用户界面。

总结:

  • LinearLayout,线性布局方式(真不知道这该怎么翻译,其实很多技术名词还是不翻译的好),这种布局比较常用,也比较简单,就是每个元素占一行,当然也可能声明为横向排放,也就是每个元素占一列。
  • FrameLayout, 帧布局方式,说帧不太容易理解,可以说成是层布局方式,也就是说,在它内部的元素,是一层一层的叠加在一起的。如果用过Photoshop,或者 Flash,这里面的层的概念是和他们一致的。如果最上层的元素是不透明的,并且比下面的元素尺寸要大,那么将看不到下面的元素,只能看到顶层元素。这些 层的顺序是:最新声明的放到最前面。可以这样理解,Android按文件的书写顺序来组织这个布局,先声明的放在第一层,再声明的放到第二层,…,最后声 明的放在最顶层。
  • RelativeLayout, 相对定位的布局方式,这个比较好玩,在元素的位置的时候,使用相对位置,可以相对其他元素,也可以相对这个布局,就像我说:我现在站在pawa和 tempest的中间;或者说,我站在队伍的中间。前者就是相对其他元素来定义位置,后者是相对整个布局来定义位置。
  • TableLayout,表格的布局方式,我真的不忍心翻译Table这个词,翻译成表格,似乎少了一些神韵,这里面的Table和HTML中的Table非常像,就连写法都非常像。
  • AbsoluteLayout,绝对定位的布局方式,在它内部嵌套的元素必须指定具体的位置。在sdk2.3.3之后已经废弃,不推荐使用。


借鉴》》》》》》》》

你可能感兴趣的:(android,布局,android应用,Studio,android平台,UI之五种布局管理器)