zoukankan      html  css  js  c++  java
  • Android精讲--界面编程2(布局管理器)

    为什么需要布局管理器

    为了更好地管理Android应用的用户界面里的各种组件,Android提供了布局管理器。通过使用布局管理器,Android应用的图形用户界面具有良好的平台无关性。通常来说,推荐使用布局管理器来管理组件的分布、大小,而不是直接设置组件位置和大小。

    android布局管理器类图

    线性布局

    LinearLayout,线性布局。LinearLayout将容器内的组件一个挨着一个地排列起来。LinearLayout可以控制各组件横向排列(通过设置android:orientation属性控制),也可控制各组件纵向排列。

    # LinearLayout常用XML属性及相关方法

    设置布局管理器内组件的排列方式,可以设置为horizontal(水平排列)、vertical(垂直排列、默认值)

    XML属性 相关方法 android:baselineAligned

    android:baselineAligned

    setBaselineAligned(boolean)

    该属性设为false,将会阻止该布局管理器与它的子元素的基线对齐

    android:divider

    setDividerDrawable(Drawable)

    设置垂直布局时两个按钮之间的分割线

    android:gravity

    setGravity(int)

    设置布局管理器内组件的对齐方式。属性有:top、bottom、left、right、center_vertical、fill_vertical、center_horizontal、fill_horizontal、center、fill、clip_vertical、clip_horizontal。也可以同时指定多种对齐方式的组合

    android:measureWithLargestChild

    setMeasureWithLargestChildEnabled(boolean)

    当该属性设为true时,所有带权重的子元素都会具有最大子元素的最小尺寸

    android:orientation setOrientation(int)  

    android:layout_gravity                                指定该子元素在LinearLayout中的对齐方式

    android:layout_weight                                指定该子元素在LinearLayout中所占的权重

    示例:

    <?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"
        android:gravity="top"
        >
    <Button  
        android:id="@+id/bn1"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="@string/bn1"
        />
    <Button  
        android:id="@+id/bn2"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="@string/bn2"
        />
    <Button  
        android:id="@+id/bn3"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="@string/bn3"
        />
    <Button  
        android:id="@+id/bn4"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="@string/bn4"
        />
    <Button  
        android:id="@+id/bn5"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="@string/bn5"
        />  
    </LinearLayout>
    表格布局

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

    TableLayout中,列的宽度由该列中最宽的那个单元格决定,整个TableLayout的宽度则取决于父容器的宽度(默认总是占满父容器本身)。
    TableLayout中,可以为单元格设置以下三种行为方式:

    • Shrinkable:如果某个列被设为Shrinkable,那么该列的所有单元格的宽度可以被收缩,以保证该表格能适应父容器的宽度。
    • Strechable:如果某个列被设为Strechable,那么该列的所有单元格的宽度可以被拉伸,以保证组件能完全填满表格空余空间。
    • Collapsed:如果某个列被设为Collapsed,那么该列的所有单元格会被隐藏。

    TableLayout支持LinearLayout所有的XML属性,此外,还支持上面的3中属性:

    XML属性                                      相关方法                                                         说明

    android:collapseColumns              setColumnCollapsed(int,boolean)                    设置需要被隐藏的列的列序号,多个列序号之间用逗号隔开

    android:shrinkColumns                setShrinkAllColumns(boolean)                         设置允许被收缩的列的列序号,多个列序号之间用逗号隔开

    android:strechColumns                setStrechAllColumns(boolean)                         设置允许被拉伸的列的列序号,多个列序号之间用逗号隔开

    示例:

    <?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"
        >
    <!-- 定义第一个表格布局,指定第2列允许收缩,第3列允许拉伸 -->
    <TableLayout android:id="@+id/TableLayout01" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content"
        android:shrinkColumns="1"
        android:stretchColumns="2"
    >
    <!-- 直接添加按钮,它自己会占一行 -->
    <Button android:id="@+id/ok1" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="独自一行的按钮"
        />
    <!-- 添加一个表格行 -->
    <TableRow>
    <!-- 为该表格行添加3个按钮 -->
    <Button android:id="@+id/ok2" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="普通按钮"
        />  
    <Button android:id="@+id/ok3" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="收缩的按钮"
        /> 
    <Button android:id="@+id/ok4" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="拉伸的按钮"
        />
    </TableRow> 
    </TableLayout>
    <!-- 定义第二个表格布局 ,指定第二列隐藏-->
    <TableLayout android:id="@+id/TableLayout01" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content"
        android:collapseColumns="1"
    >
    <!-- 直接添加按钮,它自己会占一行 -->
    <Button android:id="@+id/ok5" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=" 独自一行的按钮 "
        />
    <!--定义一个表格行-->
    <TableRow>
    <!-- 为该表格行添加3个按钮 -->
    <Button android:id="@+id/ok6" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="普通按钮1"
        />  
    <Button android:id="@+id/ok7" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="被隐藏的按钮"
        /> 
    <Button android:id="@+id/ok8" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="普通按钮 3"
        />
    </TableRow> 
    </TableLayout>
    <!-- 定义第三个表格布局 ,指定第2、3两列可以被拉伸-->
    <TableLayout android:id="@+id/TableLayout01" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content"
        android:stretchColumns="1,2"
    >
    <!-- 直接添加按钮,它自己会占一行 -->
    <Button android:id="@+id/ok9" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="独自一行的按钮"
        />
    <!--定义一个表格行-->
    <TableRow>
    <!-- 为该表格行添加3个按钮 -->
    <Button android:id="@+id/ok10" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="普通按钮"
        />  
    <Button android:id="@+id/ok11" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="拉伸的按钮"
        /> 
    <Button android:id="@+id/ok12" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="拉伸的按钮"
        />
    </TableRow> 
    <!--定义一个表格行-->
    <TableRow>
    <!-- 为该表格行添加2个按钮 -->
    <Button android:id="@+id/ok13" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="普通按钮"
        />  
    <Button android:id="@+id/ok14" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="拉伸的按钮"
        />
    </TableRow> 
    </TableLayout>
    </LinearLayout>
    帧布局

    FramleLayout为每个加入其中的组件创建一个空白的区域(称为一帧),每个子组件占据一帧,这些帧都会根据gravity属性执行自动对齐。

    # FrameLayout的常用XML属性及相关方法

    XML属性                                         相关方法                                     说明

    android:foreground                        setForeground(Drawable)            设置该帧布局容器的前景图像

    android:foregroundGravity             setForeground(int)                      定义绘制前景图像的gravity属性

    FrameLayout包含的子元素也受FrameLayout.LayoutParams控制,因此它所包含的子元素也可指定android:layout_gravity属性,该属性控制该子元素在FrameLayout中的对齐方式。

    <?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"
        >
    <!-- 依次定义6个TextView,先定义的TextView位于底层
        后定义的TextView位于上层 -->
    <TextView android:id="@+id/view01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:width="320px"
        android:height="320px"
        android:background="#f00"
        />
    <TextView android:id="@+id/view02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:width="280px"
        android:height="280px"
        android:background="#0f0"
        />
    <TextView android:id="@+id/view03"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:width="240px"
        android:height="240px"
        android:background="#00f"
        />
    <TextView android:id="@+id/view04"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:width="200px"
        android:height="200px"
        android:background="#ff0"
        />
    <TextView android:id="@+id/view05"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:width="160px"
        android:height="160px"
        android:background="#f0f"
        />
    
    <TextView android:id="@+id/view06"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:width="120px"
        android:height="120px"
        android:background="#0ff"
        />
    </FrameLayout>
    相对布局

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

    如果A组件的位置是由B组件的位置来决定的,Android要求先定义B组件,再定义A组件。
    # RelativeLayout的XML属性及相关方法说明

    XML属性                                                相关方法                                                         说明

    android:gravity                                     setGravity(int)                                              设置该布局容器内各子组件的对齐方式

    android:ignoreGravity                            setIgnoreGravity(int)                                    设置哪个组件不受gravity属性的影响

    为了控制该布局容器中各子组件的布局分布,RelativeLayout提供了一个内部类:RelativeLayout.LayoutParams,该类提供了大量的XML属性来控制RelativeLayout布局容器中子组件的布局分布。
    RelativeLayout.LayoutParams里只能设为boolean值的属性

    XML属性                                                                                                            说明

    android:layout_centerHorizontal                                                                       控制该子组件是否位于布局容器的水平居中

    android:layout_centerVertical                                                                           控制该子组件是否位于布局容器的垂直居中

    android:layout_centerInParent                                                                         控制该子组件是否位于布局容器的中央位置

    android:layout_alignParentBottom                                                                    控制该子组件是否与布局容器底部对齐

    android:layout_centerParentLeft                                                                       控制该子组件是否位于布局容器左边对齐

    android:layout_centerParentRight                                                                     控制该子组件是否位于布局容器右边对齐

    android:layout_centerParentTop                                                                       控制该子组件是否位于布局容器顶端对齐

    # RelativeLayout.LayoutParams里只能设为其它UI组件ID的属性

    XML属性                                                                                         说明

    android:layout_toRightOf                                                               控制该子组件位于给出ID组件的右侧

    android:layout_toLeftOf                                                                 控制该子组件位于给出ID组件的左侧

    android:layout_above                                                                    控制该子组件位于给出ID组件的上方

    android:layout_below                                                                    控制该子组件位于给出ID组件的下方

    android:layout_alignTop                                                                控制该子组件位于给出ID组件的上边界对齐

    android:layout_alignBottom                                                           控制该子组件位于给出ID组件的下边界对齐

    android:layout_alignLeft                                                                控制该子组件位于给出ID组件的左边界对齐

    android:layout_alignRight                                                              控制该子组件位于给出ID组件的右边界对齐

    此外,RelativeLayout.LayoutParams还继承了android.view.ViewGroup.MarginLayoutParams,因此RelativeLayout布局容器中每个子组件也可指定android.view.ViewGroup.MarginLayoutParams所支持的各XML属性。

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        >
    <!-- 定义该组件位于父容器中间 -->   
    <TextView 
        android:id="@+id/view01"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:background="@drawable/leaf"
        android:layout_centerInParent="true"
        />
    <!-- 定义该组件位于view01组件的上方 -->
    <TextView 
        android:id="@+id/view02"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:background="@drawable/leaf"
        android:layout_above="@id/view01"
        android:layout_alignLeft="@id/view01"
        />
    <!-- 定义该组件位于view01组件的下方 -->
    <TextView 
        android:id="@+id/view03"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:background="@drawable/leaf"
        android:layout_below="@id/view01"
        android:layout_alignLeft="@id/view01"
        />
    <!-- 定义该组件位于view01组件的左边 -->
    <TextView 
        android:id="@+id/view04"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:background="@drawable/leaf"
        android:layout_toLeftOf="@id/view01"
        android:layout_alignTop="@id/view01"
        />
    <!-- 定义该组件位于view01组件的右边 -->
    <TextView 
        android:id="@+id/view05"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:background="@drawable/leaf"
        android:layout_toRightOf="@id/view01"
        android:layout_alignTop="@id/view01"
        />      
    </RelativeLayout>
    网格布局

    GridLayout是Android4.0新增的布局管理器,因此需要在Android4.0之后的版本中才能使用该布局管理器。如果希望在更早的Android平台上使用该布局管理器,则需要导入相应的支持库。

    GridLayout的作用类似于HTML中的table标签,它把整个容器划分成row x columns个网格,每个网格可以放置一个组件。也可以设置一个组件横跨多少列、一个组件纵跨多少行。

    # GridLayout的XML属性及相关方法说明

    XML属性                                                                     相关方法                                                        说明

    android:alignmentMode                                              setAlignmentMode(int)                                设置该布局管理器采用的对齐模式

    android:columnCount                                                 setColumnCount(int)                                   设置该网格的列数量

    android:rowCount                                                      setRowOrderPreserved(boolean)                  设置该网格的行数量

    android:columnOrderPreserved                                   setColumnOrderPreserved(boolean)             设置该网格容器是否保留列序号

    android:rowOrderPreserved                                        setRowOrderPreserved(boolean)                  设置该网络容器是否保留行序号

    android:useDefaultMargins                                         setUseDefaultMargins(boolean)                   设置该布局管理器是否使用默认的页边距

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

    # GridLayout.LayoutParams的XML属性及相关方法说明

    XML属性                                                                      相关方法                                                       说明

    android:layout_gravity                                               setGravity                                                   设置该子组件采用何种方式占据该网格的空间

    android:layout_column                                              设置该子组件在GridLayout的第几列

    android:layout_row                                                   设置该子组件在GridLayout的第几行

    android:layout_columnSpan                                       设置该子组件在GridLayout横向上跨几列

    android:layout_rowSpan                                            设置该子组件在GridLayout纵向上跨几行

    示例:

    <?xml version="1.0" encoding="utf-8" ?>
    <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent" 
        android:rowCount="6"
        android:columnCount="4"
        android:id="@+id/root"
        >
    <!-- 定义一个横跨4列的文本框,
    并设置该文本框的前景色、背景色等属性  -->
    <TextView 
        android:layout_width="match_parent"
        android:layout_height="wrap_content" 
        android:layout_columnSpan="4"
        android:textSize="50sp"
        android:layout_marginLeft="4px"
        android:layout_marginRight="4px"
        android:padding="5px"
        android:layout_gravity="right"
        android:background="#eee"
        android:textColor="#000"
        android:text="0"/>
    <!-- 定义一个横跨4列的按钮 -->
    <Button 
        android:layout_width="match_parent"
        android:layout_height="wrap_content" 
        android:layout_columnSpan="4"
        android:text="清除"/>
    </GridLayout>
    绝对布局

    AbsoluteLayout,就是Android不提供任何布局控制,由开发者自己通过X坐标、Y坐标来控制组件的位置。当使用AbsoluteLayout作为布局容器时,布局容器不再管理子组件的位置、大小——这些都需要开发者自己控制。

    注意:
    大部分时候,使用绝对布局都不是一个好思路。因为运行Android应用的手机往往千差万别,因此屏幕大小、分辨率都可能存在较大差异,使用绝对布局会很难兼顾不同屏幕大小、分辨率的问题。因此AbsoluteLayout布局管理器已经过时。

    使用绝对布局时,每个子组件都可指定如下两个XML属性:

    • layout_x:指定该子组件的X坐标
    • layout_y:指定该子组件的Y坐标

    示例:

    <?xml version="1.0" encoding="utf-8"?>
    <AbsoluteLayout 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_x="20dip"
        android:layout_y="20dip"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="用户名:"
        />
    <!-- 定义一个文本编辑框,使用绝对定位 -->
    <EditText 
        android:layout_x="80dip"
        android:layout_y="15dip"
        android:layout_width="wrap_content" 
        android:width="200px" 
        android:layout_height="wrap_content" 
        />
    <!-- 定义一个文本框,使用绝对定位 --> 
    <TextView 
        android:layout_x="20dip"
        android:layout_y="80dip"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="密  码:"
        />
    <!-- 定义一个文本编辑框,使用绝对定位 -->   
    <EditText 
        android:layout_x="80dip"
        android:layout_y="75dip"
        android:layout_width="wrap_content" 
        android:width="200px" 
        android:layout_height="wrap_content" 
        android:password="true"
        />
    <!-- 定义一个按钮,使用绝对定位 -->
    <Button 
        android:layout_x="130dip"
        android:layout_y="135dip"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="登   录"
        />  
    </AbsoluteLayout>

    上面的界面布局中指定各组件的android:layout_xandroid:layout_y属性时指定了形如20dip这样的属性值,这是一个距离值。Android中一般支持如下常用的距离单位:

    • px(像素):每个px对应屏幕上的一个点
    • dip或dp(device independent pixels,设备独立像素):一种基于屏幕密度的抽象单位。在每英寸160的显示器上,1dip=1px。但随着屏幕密度的改变,dip与px的换算会发生改变。
    • sp(scaled pixels,比例像素):主要处理字体的大小,可以根据用户的字体大小首选项进行缩放
      -in(英寸):标准长度单位
    • mm(毫米):标准长度单位
    • pt(磅):标准长度单位,1/72英寸
    岁月本长而忙者自促;天地本宽而卑者自隘;风花雪月本闲,而劳忧者自冗;天行健,君子以自强不息;地势坤,君子以厚德载物;宠辱不惊,闲看庭前花开花落;去留无意,漫随天外云卷云舒.不妄取,不妄予,不妄想,不妄求,与人方便,随遇而安
  • 相关阅读:
    hdu 4027 Can you answer these queries? 线段树
    ZOJ1610 Count the Colors 线段树
    poj 2528 Mayor's posters 离散化 线段树
    hdu 1599 find the mincost route floyd求最小环
    POJ 2686 Traveling by Stagecoach 状压DP
    POJ 1990 MooFest 树状数组
    POJ 2955 Brackets 区间DP
    lightoj 1422 Halloween Costumes 区间DP
    模板 有源汇上下界最小流 loj117
    模板 有源汇上下界最大流 loj116
  • 原文地址:https://www.cnblogs.com/vvning/p/9414317.html
Copyright © 2011-2022 走看看