轻松学Android开发之Android布局设计.pptx

第2章Android布局设计 本章要介绍的主要内容是Android程序开发中非常必要的布局文件 是应用界面开发的重要一环 它是用户对程序的第一印象 界面开发的优劣 直接影响用户对程序认可与否 布局文件主要是规范和设计UI界面 它采用XML格式开发 与程序的逻辑代码分离开来 使程序的开发变得清晰 明了 2 1布局介绍 Android界面通常由容器和控件构成 为了规范控件在容器中的显示 设计人员通常需要规定控件在界面中的显示方式 这就是布局 1 布局的作用在布局中 通过设置控件或者容器的属性来规定控件的显示方式2 布局的实现 布局文件在Android应用程序中 界面通常都是通过布局文件设定 该文件采用XML文件格式 每个应用程序默认包含一个主界面的布局文件 该文件位于项目文件中res目录下的layout子目录中 双击打开该文件 首先可以看到界面设计面板 单击activity main xml选项卡 可以查看该界面对应的布局文件 2 1 1什么是布局 新建的Android应用程序 默认布局文件为相对布局 因此 在开发时如果需要使用其他布局 则需要进行布局修改 Android布局分为 相对布局 线性布局 表格布局 帧布局 网格布局五种 如图2 3所示 因为Android设备多样 分辨率不统一 用绝对布局往往在不同的机型上会有很差的效果 所以 不推荐用绝对布局来布局UI 2 1 2布局的类型 布局文件是每个Android程序开发的必要文件 以下是布局文件中共用的属性 1 布局文件的命名空间布局文件的命名空间由系统自动生成 固定包含xmlns android和xmlns tools两部分 2 布局中的单位布局中的距离单位 dp px sp dp 即dip deviceindependentpixels 设备独立像素 不同设备有不同的显示效果 这个和设备硬件有关 一般我们为了支持WVGA HVGA和QVGA推荐使用这个 不依赖像素 px pixels 像素 不同设备显示效果相同 一般我们用HVGA代表320 x480像素 这个用的比较多 sp scaledpixels 放大像素 主要用于字体显示 如果设置表示长度 高度等属性时可以使用dp 但如果设置字体大小 需要使用sp 当我们在Eclipse中开发程序时 Eclipse默认采用相对布局 RelativeLayout 相对布局包括相对容器布局和相对控件布局 2 1 3布局文件常见概念 子控件相对于父容器的相对布局 主要是相对父容器的四周边框而言 如图2 4所示 例如 layout alignParentLeft表示子控件以父容器的左边缘为参照标准 layout marginLeft表示子控件左边缘与父容器左边缘之间的空隙距离 单位为dp 如果控件距离左右边框相等 可以直接使用layout centerHorizontal设置水平居中 同理 如果控件距离上下边框相等 可以直接使用layout centerVertical设置垂直居中 如果控件距离上下边框相等 并且同时距离左右边框也相等 就可以使用layout centerInParent 设置该控件在整个父容器中居中 2 2 1相对容器布局 相对父容器布局的语法如下所示 整个语法包括以下几部分 xmlns android和xmlns tools为命名空间 由系统自动产生 layout width和layout height分别为布局的宽度和高度 参数有fill content match content wrap content三种 layout centerHorizontal 表示widget在父容器中水平居中 还有layout centerVertical 表示widget在父容器中垂直居中 layout centerInParent 表示widget位于父容器中央位置 相对于控件的相对布局 是指一个控件以另外一个控件为参照物进行布局 首先要确定出该控件的位置 通过ID唯一标识某一具体控件 Layout above表示其他控件相对位于该控件的上方 Layout alignTop 表示其他控件以该控件上边缘为参考标准 Layiout marginTop 表示当前控件上边缘与已知控件之间的空隙距离 单位为dp 2 2 2相对控件布局 相对其他控件布局的语法如下所示 整个语法包括以下几部分 xmlns android和xmlns tools为命名空间 由系统自动产生 layout width和layout height分别为布局的宽度和高度 参数有fill content match content wrap content三种 android id唯一标识某一具体控件 layout toRightOf 表示widget位于已知widget右侧 还有layout toLeftOf 表示widget位于已知widget左侧 layout above 表示widget位于已知widget上方 layout below 表示widget位于已知widget下方 参数为已知widget的id 线性布局是Android布局设计中较为常用的布局 它主要是以水平或者垂直的方式来显示界面中添加的控件 2 3线性布局 Android为线性布局提供了一个标签 整个语法包括以下四部分 xmlns android和xmlns tools为命名空间 由系统自动产生 layout width和layout height分别为布局的宽度和高度 参数有fill content match content wrap content三种 orientation属性可以控制线性布局的显示方式 有vertical 垂直 和horizontal 水平 两种 默认为水平方式 控件代码由开发者完成 2 3 2线性布局语法 使用Eclipse创建Android项目 默认使用相对布局 如果要使用线性布局 就需要改变项目的布局方式 操作方法为 打开activity main xml的GraphicalLayout视图 在Outline面板中 右击RelativeLayout分支 从弹出的菜单中选择ChangeLayout命令进行布局修改 2 3 3创建线性布局 2 4 1什么是表格布局表格布局就是以表格的形式来显示界面中添加的控件 表格的每行为一个TableRow 每有一个控件添加在TableRow中 就构成一个单元格 每行可以有0个或多个单元格 一个单元格可以跨越多个列 如图2 9所示 是一个三行两列的表格布局 第一行和第二行分别添加了3个TextView控件 第三行添加了一个TextView控件 2 4表格布局 表格布局针对列的设置 提供了3个特有的属性 stretchColumns shrinkColumns collapseColumns 整个语法包括以下几部分 xmlns android和xmlns tools为命名空间 由系统自动产生 layout width和layout height分别为布局的宽度和高度 参数有fill content match content wrap content三种 stretchColumns属性指定该列被拉伸 列号从0开始 shrinkColumns属性指定该列被收缩 列号从0开始 collapseColumns属性指定该列被隐藏 列号从0开始 这对标签代表表格布局中的行 2 4 2表格布局语法 帧布局 FrameLayout 是Android中最简单的布局 在我们平常的程序开发中很少用到 2 5帧布局 帧布局为每个加入其中的控件创建一个空白的区域 称为一帧 所有每个控件占据一帧 采用帧布局设计界面后 只能在屏幕左上角显示单个控件 如果添加多个控件 则会按顺序叠加在屏幕的左上角重叠显示 但会透明显示出之前控件的文本内容 如图2 11所示 界面中添加了三个Button按钮 Button1是第一个添加的大按钮 Button2是第二个添加的较小按钮 Button3是最后添加的小按钮 三者叠加在屏幕左上角 但三个按钮的文本内容都可以显示出来 2 5 1什么是帧布局 整个语法包括以下几部分 xmlns android和xmlns tools为命名空间 由系统自动产生 layout width和layout height分别为布局的宽度和高度 参数有fill content match content wrap content三种 id可唯一标识该帧布局标签 代表任意可添加都界面中的控件 2 5 2帧布局的语法 网格布局 GridLayout 是Android4 0版本中新增加的布局 它实现了控件的交错显示 避免使用之前布局嵌套 对手机性能的影响大大减小 更有利于自由编辑布局的开发 2 6GridLayout和Space 网格布局GridLayout用一组无限细的直线将它的绘图区域分割成行 列 单元 然后 指定控件显示的区域和控件在该区域的显示方式 2 6 1什么是网格布局 网格布局是新增的一个功能比较强大的布局方式 属性设置较多 2 6 2网格布局语法 整个语法包括以下几部分 xmlns android和xmlns tools为命名空间 由系统自动产生 layout width和layout height分别为布局的宽度和高度 参数有fill content match content wrap content三种 columnCount和rowCount指定网格布局的行数和列数 orientation控制网格布局的显示方式 有vertical 垂直 和horizontal 水平 两种 默认为水平方式 标签 代表任意可添加都界面中的控件 layout raw和layout column表示控件处于网格中的哪行哪列 即哪个单元格中 layout columnSpan表示控件跨越的列数 还有layout rpwSpan表示控件跨越的行数 layout gravity指定控件所在区域的什么位置 假设widget的显示区域为九宫格 则使用不同的参数 其显示效果不同 由于使用Eclipse创建Android项目 默认为相对布局 所以要使用网格布局 就需要改变项目的布局方式 具体操作方法参考线性布局的修改 2 6 3创建网格布局 Space是一个轻量级的视图子类 用于分隔不同的控件 其中形成一个空白的区域 创建通用布局中的组件之间的差距 2 6 4什么是Space 整个语法包括以下几部分 layout column layout row表示Space所在的行号和列号 layout gravity指定Space应该处于它所在区域的什么位置minHeight表示Space的最小高度 还有minWidth表示Space的最小宽度 layout columnSpan表示Space跨越的列数 还有layout rowSpan表示Space跨越的行数 示例2 8 下面演示Space的