Android设计中layout说明

在android开发中,在进行界面设计时,最基础的第一步是要选择layout,然后再在layout里添加控件。

以我的Eclipse的Layouts里面的layout为例子,有7个layout供选择。那么各个layout是什么效果呢,记录一下,方便以后查阅。

  1. Linear Layout
  2. Table Layout
  3. Absolute Layout
  4. Relative Layout
  5. Frame Layout
  6. Grid Layout
  7. Fragement(这个单独也列在layout里)
  1. 直线布局Linear Layout

    Linear Layout是最简单的layout,有两种方向:横向、纵向( horizontally or vertically)。从名字来看就能理解这个layout是将控件横向或者纵向的将控件顺序排列。LinearLayout按照垂直或者水平的顺序依次排列子元素,每一个子元素都位于前一个元素之后。如果是垂直排列,那么将是一个N行单列的结构,每一行只会有一个元素,而不论这个元素的宽度为多少;如果是水平排列,那么将是一个单行N列的结构。如果搭建两行两列的结构,通常的方式是先垂直排列两个元素,每一个元素里再包含一个LinearLayout进行水平排列。  LinearLayout中的子元素属性android:layout_weight生效,它用于描述该子元素在剩余空间中占有的大小比例。加入一行只有一个文本框,那么它的默认值就为0,如果一行中有两个等长的文本框,那么他们的android:layout_weight值可以是同为1。如果一行中有两个不等长的文本框,那么他们的android:layout_weight值分别为1和2,那么第一个文本框将占据剩余空间的三分之二,第二个文本框将占据剩余空间中的三分之一。android:layout_weight遵循数值越小,重要度越高的原则。

    纵向(Vertical Orientation)

    <?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">
     
        <Button android:text="Button01" android:id="@+id/Button01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
     
        <Button android:text="Button02" android:id="@+id/Button02"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
     
    </LinearLayout>
    上面的代码定义了一个纵向的LinearLayout,里面填充了2个按钮


    横向(Horizontal Orientation)

    如果改成横向的话,两个按钮就水平的顺序填充

    <?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">
     
        <Button android:text="Button01" android:id="@+id/Button01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
     
        <Button android:text="Button02" android:id="@+id/Button02"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
     
    </LinearLayout>


  2. 表格布局Table Layout

    TableLayout顾名思义,此布局为表格布局,适用于N行N列的布局格式。一个TableLayout由许多TableRow组成,一个TableRow就代表TableLayout中的一行。

    TableRow是LinearLayout的子类,它的android:orientation属性值恒为horizontal,并且它的android:layout_width和android:layout_height属性值恒为MATCH_PARENT和WRAP_CONTENT。所以它的子元素都是横向排列,并且宽高一致的。这样的设计使得每个TableRow里的子元素都相当于表格中的单元格一样。在TableRow中,单元格可以为空,但是不能跨列。

    <?xml version="1.0" encoding="utf-8"?>
    <TableLayout android:id="@+id/TableLayout01"
        android:layout_width="fill_parent" android:layout_height="fill_parent"
        xmlns:android="http://schemas.android.com/apk/res/android">
        <TableRow android:id="@+id/TableRow01">
            <TextView android:id="@+id/TextView01" android:text="First Name:"
                android:width="100px" />
            <EditText android:id="@+id/EditText01" android:width="220px" />
        </TableRow>
     
        <TableRow android:id="@+id/TableRow02">
            <TextView android:id="@+id/TextView02" android:text="Second Name:" />
            <EditText android:id="@+id/EditText02" />
        </TableRow>
     
        <TableRow android:id="@+id/TableRow03">
            <Button android:id="@+id/Button01"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" android:text="Submit" />
     
            <Button android:id="@+id/Button02"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" android:text="Reset"
                android:width="100px" />
        </TableRow>
    </TableLayout>


  3. 相对布局Relative Layout

    Android RelativeLayout 相对布局解析,使用相对布局,在容器中的子元素可以使用彼此之间的相对位置或者与容器之间的相对位置进行定位。RelativeLayout按照各子元素之间的位置关系完成布局。在此布局中的子元素里与位置相关的属性将生效。例如android:layout_below, android:layout_above等。子元素就通过这些属性和各自的ID配合指定位置关系。注意在指定位置关系时,引用的ID必须在引用之前,先被定义,否则将出现异常。  RelativeLayout是Android五大布局结构中最灵活的一种布局结构,比较适合一些复杂界面的布局。

    在这个容器中,其子元素可以使用彼此之间的相对位置或者与容器之间的相对位置进行定位。
    RelativeLayout里常用的位置属性如下:    
    android:layout_toLeftOf —— 该组件位于引用组件的左方
    android:layout_toRightOf —— 该组件位于引用组件的右方
    android:layout_above —— 该组件位于引用组件的上方
    android:layout_below —— 该组件位于引用组件的下方
    android:layout_alignParentLeft —— 该组件是否对齐父组件的左端
    android:layout_alignParentRight —— 该组件是否齐其父组件的右端
    android:layout_alignParentTop —— 该组件是否对齐父组件的顶部
    android:layout_alignParentBottom —— 该组件是否对齐父组件的底部
    android:layout_centerInParent —— 该组件是否相对于父组件居中
    android:layout_centerHorizontal —— 该组件是否横向居中
    android:layout_centerVertical —— 该组件是否垂直居中

    需要注意的是,不能在 RelativeLayout 容器本身与它的子元素之间产生循环依赖,比如将 RelativeLayout 的高设置成 wrap_content 时将子元素设置为 ALIGN_PARENT_BOTTOM 。

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout android:id="@+id/RelativeLayout01"
        android:layout_width="fill_parent" android:layout_height="fill_parent"
        xmlns:android="http://schemas.android.com/apk/res/android">
     
        <TextView android:id="@+id/TextView01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" android:text="First Name:"
            android:width="100px" />
     
        <EditText android:id="@+id/EditText01" android:layout_width="220px"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/TextView01"
            android:layout_below="@+id/RelativeLayout01" />
     
        <EditText android:id="@+id/EditText02" android:layout_width="220px"
            android:layout_height="wrap_content"
            android:layout_below="@+id/EditText01"
            android:layout_alignLeft="@+id/EditText01" />
     
        <TextView android:id="@+id/TextView02"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" android:text="Second Name:"
            android:width="100px" android:layout_below="@+id/EditText01"
            android:layout_toLeftOf="@+id/EditText02" />
     
        <Button android:text="Submit" android:id="@+id/Button01"
            android:layout_width="100px" android:layout_height="wrap_content"
            android:layout_below="@id/EditText02"
            android:layout_alignLeft="@id/EditText02" />
     
        <Button android:text="Reset" android:id="@+id/Button02"
            android:layout_width="100px" android:layout_height="wrap_content"
            android:layout_below="@id/EditText02"
            android:layout_alignRight="@id/EditText02" />
     
    </RelativeLayout>


  4. 绝对布局Absolute Layout

    AbsoluteLayout是绝对位置布局。在此布局中的子元素的android:layout_x和android:layout_y属性将生效,用于描述该子元素的坐标位置。屏幕左上角为坐标原点(0,0),第一个0代表横坐标,向右移动此值增大,第二个0代表纵坐标,向下移动,此值增大。在此布局中的子元素可以相互重叠。在实际开发中,通常不采用此布局格式,因为它的界面代码过于刚性,以至于有可能不能很好的适配各种终端。不多说了,随便拖放吧。

    <?xml version="1.0" encoding="utf-8"?>
    <AbsoluteLayout android:id="@+id/AbsoluteLayout01"
        android:layout_width="fill_parent" android:layout_height="fill_parent"
        xmlns:android="http://schemas.android.com/apk/res/android">
        <EditText android:id="@+id/EditText01" android:layout_width="200px"
            android:layout_height="wrap_content" android:layout_x="12px"
            android:layout_y="12px" />
        <Button android:text="Search" android:id="@+id/Button01"
            android:layout_width="100px" android:layout_height="wrap_content"
            android:layout_x="220px" android:layout_y="12px" />
    </AbsoluteLayout>

  5. 帧布局/层叠布局Frame Layout

    FrameLayout布局中,整个界面被当成一块空白备用区域,所有的子元素都不能被指定放置的位置,它们统统放于这块区域的左上角,并且后面的子元素直接覆盖在前面的子元素之上,将前面的子元素部分和全部遮挡。

    <?xml version="1.0" encoding="utf-8"?>
    <FrameLayout android:id="@+id/FrameLayout01"
        android:layout_width="fill_parent" android:layout_height="fill_parent"
        xmlns:android="http://schemas.android.com/apk/res/android">
     
        <ImageView android:id="@+id/ImageView01" android:src="@drawable/android"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:scaleType="center" />
     
        <TextView android:text="Android Partaker" android:id="@+id/TextView01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="20dip"
            android:layout_gravity="center_horizontal|bottom"
            android:padding="10dip"
            android:textColor="#AA0000" android:textStyle="bold"
            android:textSize="20px" android:background="#00000000" />
     
    </FrameLayout>


  6. 格子布局Grid Layout

    GridLayout有点像TileLayout(SWT)的概念。在android4.0版本之前,如果想要达到网格布局的效果,首先可以考虑使用最常见的LinearLayout布局,但是这样的排布会产生如下几点问题:

    1、不能同时在X,Y轴方向上进行控件的对齐。
    2、当多层布局嵌套时会有性能问题。
    3、不能稳定地支持一些支持自由编辑布局的工具。

           其次考虑使用表格布局TabelLayout,这种方式会把包含的元素以行和列的形式进行排列,每行为一个TableRow对象,也可以是一个View对象,而在TableRow中还可以继续添加其他的控件,每添加一个子控件就成为一列。但是使用这种布局可能会出现不能将控件占据多个行或列的问题,而且渲染速度也不能得到很好的保证。

            android4.0以上版本出现的GridLayout布局解决了以上问题。GridLayout布局使用虚细线将布局划分为行、列和单元格,也支持一个控件在行、列上都有交错排列。而GridLayout使用的其实是跟LinearLayout类似的API,只不过是修改了一下相关的标签而已,所以对于开发者来说,掌握GridLayout还是很容易的事情。GridLayout的布局策略简单分为以下三个部分:

    首先它与LinearLayout布局一样,也分为水平和垂直两种方式,默认是水平布局,一个控件挨着一个控件从左到右依次排列,但是通过指定android:columnCount设置列数的属性后,控件会自动换行进行排列。另一方面,对于GridLayout布局中的子控件,默认按照wrap_content的方式设置其显示,这只需要在GridLayout布局中显式声明即可。
     
          其次,若要指定某控件显示在固定的行或列,只需设置该子控件的android:layout_row和android:layout_column属性即可,但是需要注意:android:layout_row=”0”表示从第一行开始,android:layout_column=”0”表示从第一列开始,这与编程语言中一维数组的赋值情况类似。

           最后,如果需要设置某控件跨越多行或多列,只需将该子控件的android:layout_rowSpan或者layout_columnSpan属性设置为数值,再设置其layout_gravity属性为fill即可,前一个设置表明该控件跨越的行数或列数,后一个设置表明该控件填满所跨越的整行或整列。

    利用GridLayout布局编写的简易计算器代码如下(注意:仅限于android4.0及以上的版本):
        <?xml version="1.0" encoding="utf-8"?>  
        <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:orientation="horizontal"  
            android:rowCount="5"  
            android:columnCount="4" >  
          <Button  
                android:id="@+id/one"  
                android:text="1"/>  
          <Button  
                android:id="@+id/two"  
                android:text="2"/>  
           <Button  
                android:id="@+id/three"  
                android:text="3"/>  
          <Button  
                android:id="@+id/devide"  
                android:text="/"/>  
          <Button  
                android:id="@+id/four"  
                android:text="4"/>  
          <Button  
                android:id="@+id/five"  
                android:text="5"/>  
          <Button  
                android:id="@+id/six"  
                android:text="6"/>  
          <Button  
                android:id="@+id/multiply"  
                android:text="×"/>  
          <Button  
                android:id="@+id/seven"  
                android:text="7"/>  
          <Button  
                android:id="@+id/eight"  
                android:text="8"/>  
          <Button  
                android:id="@+id/nine"  
                android:text="9"/>  
            <Button  
                android:id="@+id/minus"  
                android:text="-"/>  
            <Button  
                android:id="@+id/zero"  
                android:layout_columnSpan="2"  
                android:layout_gravity="fill"  
                android:text="0"/>  
          <Button  
                android:id="@+id/point"  
                android:text="."/>  
            <Button  
                android:id="@+id/plus"  
                android:layout_rowSpan="2"  
                android:layout_gravity="fill"  
                android:text="+"/>  
            <Button  
                android:id="@+id/equal"  
                android:layout_columnSpan="3"  
                android:layout_gravity="fill"  
                android:text="="/>   
          </GridLayout>  


  7. Fragement

    这个暂时不写了,下次单独挑出来,有需要的去这里看看,实例和代码都有http://docs.eoeandroid.com/training/basics/fragments/fragment-ui.html

参考文章:
http://www.cnblogs.com/wisekingokok/archive/2011/08/23/2150452.html

http://www.learn-android.com/2010/01/05/android-layout-tutorial/5/

http://androidpartaker.wordpress.com/2010/07/03/introduction-to-android-ui-layouts/

http://blog.csdn.net/pku_android/article/details/7343258

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值