《02Layout布局管理器.ppt》由会员分享，可在线阅读，更多相关《02Layout布局管理器.ppt（37页珍藏版）》请在三一文库上搜索。
1、,Android常用布局介绍,Android常用布局介绍,主讲人：陈树辉,6种布局的继承关系,在上面的UML图中可以看出, 绝对布局 帧布局 网格布局 相对布局 线性布局是直接继承ViewGroup,表格布局是继承LinearLayout;,简单的说：Activity就是布满整个窗口或者悬浮于其他窗口上的交互界面。在一个应用程序中通常由多个Activity构成，都会在Manifest.xml中指定一个主的Activity，如下设置 为了适应各种界面风格，Android提供了6种布局，这6种布局分别是： FrameLayout(帧布局)、LinearLayout(线性布局)、RelativeLa
2、yout(相对布局)、TableLayout(表格布局)、GridLayout(网格布局)、AbsoluteLayout(绝对布局)（已过时，故此不讲）等。 利用以上6种布局我们可以再手机屏幕上随心所欲的摆放各种控件。 布局管理器都是以ViewGroup为基类派生出来的; 使用布局管理器可以适配不同手机屏幕的分辨率,尺寸大小;,布局(Layout),界面编程与视图（View）组件,Android应用的所有UI组件都继承自View类。 ViewGroup也是继承自View类，但是ViewGroup主要用作其他UI控件的容器。,使用XML布局控制UI界面,Android推荐使用XML布局文件来控制
3、视图。 将视图控制逻辑从Java代码中分离出来，放入XML文件中控制，体现了MVC的设计思想。 通过如下代码在Activity中显示视图： setContentView(R.layout.); 通过如下方法访问指定的UI组件： findViewById(R.id.);,Xml布局文件是android系统中定义的视图常用方法，所有的布局文件必须包含在res/layout目录中。定义XML布局的命名和定义注意事项如下： xml布局文件必须是以xml文件名结束，命名必须是符合java的规范 每一个xml布局文件的根节点可以是任意的控件标签 xml布局文件的根节点必须是包含android的命名空间，命
4、名空间必须是xmlns:android=http:/ 为xml文件布局中的控件指定的id需要使用这样的格式： android:id=“+id/控件名称“该标记会保存在R文件中，即生成 android:id=“id/控件名称“表示该控件的id名称已经在R文件生成了，可以引用了 每一个视图的id都会在R类中生成与之对应的变量，因此视图ID的值必须是符合java规范的,使用XML布局文件定义视图,请翻到疯狂安卓讲义65页 Android表示单位长度的方式通常有三种表示方式。 px：表示屏幕实际的象素。例如，320*480的屏幕在横向有320个象素，在纵向有480个象素。 px : 像素, 每个px对
5、应屏幕上的一个点; dip/dp : device independent pixels, 设备的独立像素, 这种单位基于屏幕密度, 在每英寸160点的显示器上 1dp = 1px, 随着屏幕密度改变, dp 与 px 换算会发生改变; sp : scale pixels, 比例像素, 处理字体的大小, 可以根据用户字体大小进行缩放; in : 英寸, 标准长度单位 mm : 毫米, 标准长度单位 pt : 磅, 标准长度单位, 1/72英寸;。,Android中长度单位介绍,设计技巧： 如果设置表示长度、高度等属性时可以使用dp 或sp。但如果设置字体，需要使用sp。 dp是与密度无关，sp
6、除了与密度无关外，还与scale（渐变尺寸伸缩动画效果）无关 如果使用dp和sp，系统会根据屏幕密度的变化自动进行转换。,Android中长度单位设计技巧,概念清晰化,Android LayoutParams简单说明,其实这个LayoutParams类是用于child view（子视图）向 parent view（父视图）传达 自己的意愿的一个东西（孩子想变成什么样向其父亲说明）,LayoutParams继承于Android.View.ViewGroup.LayoutParams. LayoutParams相当于一个Layout的信息包，它封装了Layout的位置、高、宽 等信息。假设在屏幕上
7、一块区域是由一个Layout占领的，如果将一个View添加到 一个Layout中，最好告诉Layout用户期望的布局方式，也就是将一个认可的 layoutParams传递进去。 可以这样去形容LayoutParams，在象棋的棋盘上，每个棋子都占据一个位置， 也就是每个棋子都有一个位置的信息，如这个棋子在4行4列，这里的“4行4列”就是 棋子的LayoutParams。,概念清晰化,父容器与本容器属性 : android：layout_属性是本容器的属性, 定义在这个布局管理器的LayoutParams内部类中, 每个布局管理器都有一个LayoutParams内部类, android:、 是父
8、容器用来控制子组件的属性. 如android:layout_gravity 是控制组件本身的对齐方式, android:gravity是控制本容器子组件的对齐方式; 控制本身元素属性与子元素属性 : 设备组件本身属性 : 带layout的属性是设置本身组件属性, 例如 android:layout_gravity设置的是本身的对齐方式; 设置子元素属性 : 不带layout的属性是设置其所包含的子元素, 例如android:gravity 设置的是该容器子控件的对齐方式; LayoutParams属性 : 所有的布局管理器都提供了相应的LayoutParams内部类, 这些内部类用于控制该布局
9、本身, 如 对齐方式 layout_gravity, 所占权重 layout_weight, 这些属性用于设置本元素在父容器中的对齐方式; 容器属性 : 在android:后面没有layout的属性基本都是容器属性, android:gravity作用是指定指定本元素包含的子元素的对齐方式, 只有容器才支持这个属性;,View类常用属性及方法,任何继承自View的子类都将拥有View类的属性及对应方法,layout_margin是控件边缘相对于父控件的边距 取值为android:layout_marginTop=“10dp“,Android布局中常用属性介绍,中间,中间元素,android:l
10、ayout_marginTop=“10dp“,android:layout_marginTop,android:layout_marginLeft,android:layout_marginButtom=“10dp“,android:layout_margin相对于父控件的间隔,layout_padding是控件内容相对于控件边缘的边距 取值也为：Android:padding=“8dp“,Android布局中常用属性介绍,中间元素,Android:paddingTop=“8dp“,Android:paddingButtom=“8dp“,Android:paddingRight,Android
11、:paddingLeft,线性布局是最常用的布局线性布局在xml文件中使用来定义 线性布局可以分为水平和垂直的方向的布局，可以通过android:orientation=“vertical”来定义方向，该属性可以有horizontal和vertical两个方向。 标签中有一个很重要的属性gravity，该属性用于控制布局中视图的位置，如果设置多个值需要使用 | 进行分隔,属性如下：,线性布局LinearLayout,学云 为您提供高品质课件、学习督导服务、即时答疑、知识交易平台,,线性布局,android:layout_width和android_layout_height属性说明,线性布局L
12、inearLayout,android:layout_weight权重的描述 layout_weight 用于给一个线性布局中的诸多视图(即LinearLayout的子元素)的重要度赋值。 所有的视图都有一个layout_weight值，默认为零，意思是需要显示 多大的视图就占据多大的屏幕空 间。若赋一个高于零的值，则将父视 图中的可用空间分割，分割大小具体取决于每一个视图的layout_weight 值以及该值在当前屏幕布局的整体 layout_weight值和在其它视图屏幕布 局的layout_weight值中所占的比率而定。,线性布局LinearLayout,线性布局实例,使用线性布局实
13、现如下界面,老罗安卓视频，相对较易,刘若翘杰作，相对有难度,19,相对布局RelativeLayout,子控件的位置相对兄弟控件或父容器而定 设计时按照依赖关系进行设计,20,相对布局RelativeLayout,1. RelativeLayout支持的属性 (1) 对齐方式 xml属性 : android:gravity; 设置方法 : setGravity(int); 作用 : 设置布局容器内子元素的对齐方式, 注意与android:layout_gravity区分, 后者是设置组件本身元素对齐方式; (2) 忽略对齐方式 xml属性 : android:ignoreGravity; 设置
14、方法 : setIgnoreGravity(int); 作用 : 设置该组件不受gravity属性影响, 因为gravity属性影响容器内所有的组件的对齐方式, 设置了之后, 该组件就可以例外;,相对布局RelativeLayout,只取True或False的属性,2. LayoutParams属性,例如：android:layout_centerVertical=“true”,相对布局RelativeLayout,取值为其他控件ID的属性,2. LayoutParams属性,android:layout_above=“id/button(控件名称)“,相对布局RelativeLayout,取
15、值为像素的属性 避免出现循环依赖 android:layout_marginBottom=“10dp“ 表示与下方有10dp的距离。,p,相对布局RelativeLayout,请用RelativeLayout实现以下的界面,要点 : 注意每个组件的属性, 先要确定方位, 再进行对齐, 组件左边界对齐, 组件上边界对齐,两个按钮, 如果只有 android:layout_above=“+id/bt1“ 会是这种情况 :,加上 android:layout_alignLeft=“+id/bt1“就会成为这 种情况 :,25,表格布局TableLayout,1. 表格布局的一些概念 继承关系 : 表
16、格布局继承了LinearLayout, 其本质是线性布局管理器; 控制组件 : 表格布局采用 行, 列 形式管理子组件, 但是并不需要声明有多少 行列, 只需要添加TableRow 和 组件 就可以控制表格的行数和列数, 这一点与网格布局有所不同, 网格布局需要指定行列数; 增加行的方法 : a. TableRow增加行列 : 向TableLayout中添加一个TableRow,一个TableRow就是一个表格行, 同时TableRow也是容器, 可以向其中添加子元素, 每添加一个组件, 就增加了一列; b. 组件增加行 : 如果直接向TableLayout中添加组件, 就相当于直接添加了一行
17、; 列宽 : TableLayout中, 列的宽度由该列最宽的单元格决定, 整个表格的宽度默认充满父容器本身;,26,表格布局TableLayout,常用属性及对应方法说明,27,表格布局TableLayout,一小段代码： ,剩下的请看Eclipse里的代码，本节的实践也为 右图,28,帧布局FrameLayout,帧布局容器为每个组件（控件）创建一个空白区域, 一个区域成为一帧, 这些帧会根据FrameLayout中定义的gravity属性自动对齐;,帧布局是最简单的布局方式、所有添加到这个布局中的视图都是以层叠 的方式显示。第一个添加到帧布局中的视图显示在最底层，最后一个被 放在最顶层，
18、上一层的视图会覆盖下一层的视图，因此帧布局类似堆栈布局。,29,帧布局FrameLayout,1. 绘制霓虹灯布局,要点 : 后挡前 : 后面的View组件会遮挡前面的View组件,越在前面, 被遮挡的概率越大; 界面居中 : 将所有的TextView组件的对齐方式 android:layout_gravity 设置为center; 正方形 : 所有的TextView都设置android:height 和 android:width 属性, 用来设置其宽高, 这里设置成正方形, 宽高一样, 后面的 组件比前面的边长依次少40; 颜色 : 每个TextView的背景色都设置成不一样的;,详细，请
19、看工程代码,30,网格布局GridLayout,1. 网格布局介绍 网格布局时Android4.0版本才有的, 在低版本使用该布局需要导入对应支撑库; GridLayout将整个容器划分成rows * columns个网格, 每个网格可以放置一个组件. 还可以设置一个组件横跨多少列, 多少行. 不存在一个网格放多个组件情况;,2. 网格布局常用属性 (1) 设置对齐模式 xml属性 : android:alignmentMode; 设置方法 : setAlignmentMode(int); 作用 : 设置网格布局管理器的对齐模式,(2) 页边距 xml属性 : android:useDefau
20、ltMargins; 设置方法 : setUseDefaultMargins(boolean); 作用 : 设置该布局是否使用默认的页边距;,31,网格布局GridLayout,(3) 设置列数 xml属性 : android:columnCount; 设置方法 : setColumnCount(int); 作用 : 设置该网格布局的列数; (5) 设置是否保留列序列号 xml属性 : android:columnOrderPreserved; 设置方法 : setColumnOrderPreserved(boolean); 作用 : 设置网格容器是否保留列序列号;,(4) 设置行数 xml属
21、性 : android:rowCount; 设置方法 : setRowCount(int); 作用 : 设置该网格的行数; (6) 设置是否保留行序列号 xml属性 : android:rowOrderPreserved; 设置方法 : setRowOrderPreserved(int); 作用 : 设置该网格容器是否保留行序列号;,32,网格布局GridLayout,3. GridLayout的LayoutParams属性,(1) 设置位置列 xml属性 : android:layout_column; 作用 : 设置子组件在GridLayout的哪一列; (2) 横向跨列 xml属性 :
22、android:layout_columnSpan; 作用 : 设置该子组件在GridLayout中横向跨几列;,(3) 占据空间方式 xml属性 : android:layout_gravity; 设置方法 : setGravity(int); 作用 : 设置该组件采用何种方式占据该 网格的空间; (4) 设置行位置 xml属性 : android:layout_row; 作用 : 设置该子组件在GridLayout的第 几行;,(5) 设置横跨行数 xml属性 : android:layout_rowSpan; 作用 : 设置该子组件在GridLayout纵向横跨几行;,33,网格布局Gr
23、idLayout,4. 实现一个计算机界面（这里采用xml和Java代码共同控制界面）,(1) 布局代码tips 设置行列 : 设置GridLayout的android:rowCount为6, 设置 android:columnCount为4, 这个网格为 6行 * 4列 的; 设置横跨四列 : 设置TextView和按钮横跨四列 android:layout_columnSpan 为4, 列的合并 就是占了一行; textView的一些设置: 设置textView中的文本与边框有5像素间隔 : android:padding = “5dp“;,34,网格布局GridLayout,4. 实现一
24、个计算机界面,35,网格布局GridLayout,XML代码,36,网格布局GridLayout,(2) Activity代码 将组件设置给GridLayout网格流程 : 指定组件所在行 : GridLayout.SpecrowSpec = GridLayout.spec(int); 指定组件所在列 : GridLayout.SpeccolumnSpec = GridLayout.spec(int); 创建LayoutParams对象 : GridLayout.LayoutParams params = new GridLayout.LayoutParams(rowSpec, columnSpec); 指定组件占满容器 : params.setGravity(Gravity.FILL); 将组件添加到布局中 : gridLayout.addView(view, params);,接下来，请看工程源码,资料来源：老罗安卓视频、学云网、CSDN博文：http:/