02Layout布局管理器.ppt

《02Layout布局管理器.ppt》由会员分享，可在线阅读，更多相关《02Layout布局管理器.ppt（37页珍藏版）》请在三一办公上搜索。

1、,Android常用布局介绍,Android常用布局介绍,主讲人：陈树辉,6种布局的继承关系,在上面的UML图中可以看出,绝对布局 帧布局 网格布局 相对布局 线性布局是直接继承ViewGroup,表格布局是继承LinearLayout;,简单的说：Activity就是布满整个窗口或者悬浮于其他窗口上的交互界面。在一个应用程序中通常由多个Activity构成，都会在Manifest.xml中指定一个主的Activity，如下设置 为了适应各种界面风格，Android提供了6种布局，这6种布局分别是：FrameLayout(帧布局)、LinearLayout(线性布局)、RelativeLayo

2、ut(相对布局)、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的命名空间，命名空间必须是xmlns:an

4、droid=http:/android:id=“+id/控件名称“该标记会保存在R文件中，即生成android:id=id/控件名称表示该控件的id名称已经在R文件生成了，可以引用了每一个视图的id都会在R类中生成与之对应的变量，因此视图ID的值必须是符合java规范的,使用XML布局文件定义视图,请翻到疯狂安卓讲义65页Android表示单位长度的方式通常有三种表示方式。px：表示屏幕实际的象素。例如，320*480的屏幕在横向有320个象素，在纵向有480个象素。px:像素,每个px对应屏幕上的一个点;dip/dp:device independent pixels,设备的独立像素,这种单

5、位基于屏幕密度,在每英寸160点的显示器上 1dp=1px,随着屏幕密度改变,dp 与 px 换算会发生改变;sp:scale pixels,比例像素,处理字体的大小,可以根据用户字体大小进行缩放;in:英寸,标准长度单位mm:毫米,标准长度单位pt:磅,标准长度单位,1/72英寸;。,Android中长度单位介绍,设计技巧：如果设置表示长度、高度等属性时可以使用dp 或sp。但如果设置字体，需要使用sp。dp是与密度无关，sp除了与密度无关外，还与scale（渐变尺寸伸缩动画效果）无关如果使用dp和sp，系统会根据屏幕密度的变化自动进行转换。,Android中长度单位设计技巧,概念清晰化,A

6、ndroid LayoutParams简单说明,其实这个LayoutParams类是用于child view（子视图）向 parent view（父视图）传达自己的意愿的一个东西（孩子想变成什么样向其父亲说明）,LayoutParams继承于Android.View.ViewGroup.LayoutParams.LayoutParams相当于一个Layout的信息包，它封装了Layout的位置、高、宽等信息。假设在屏幕上一块区域是由一个Layout占领的，如果将一个View添加到一个Layout中，最好告诉Layout用户期望的布局方式，也就是将一个认可的layoutParams传递进去。可以

7、这样去形容LayoutParams，在象棋的棋盘上，每个棋子都占据一个位置，也就是每个棋子都有一个位置的信息，如这个棋子在4行4列，这里的“4行4列”就是棋子的LayoutParams。,概念清晰化,父容器与本容器属性:android：layout_属性是本容器的属性,定义在这个布局管理器的LayoutParams内部类中,每个布局管理器都有一个LayoutParams内部类,android:、是父容器用来控制子组件的属性.如android:layout_gravity 是控制组件本身的对齐方式,android:gravity是控制本容器子组件的对齐方式;控制本身元素属性与子元素属性:设备组件

8、本身属性:带layout的属性是设置本身组件属性,例如 android:layout_gravity设置的是本身的对齐方式;设置子元素属性:不带layout的属性是设置其所包含的子元素,例如android:gravity 设置的是该容器子控件的对齐方式;LayoutParams属性:所有的布局管理器都提供了相应的LayoutParams内部类,这些内部类用于控制该布局本身,如 对齐方式 layout_gravity,所占权重 layout_weight,这些属性用于设置本元素在父容器中的对齐方式;容器属性:在android:后面没有layout的属性基本都是容器属性,android:gravi

9、ty作用是指定指定本元素包含的子元素的对齐方式,只有容器才支持这个属性;,View类常用属性及方法,任何继承自View的子类都将拥有View类的属性及对应方法,layout_margin是控件边缘相对于父控件的边距取值为android:layout_marginTop=10dp,Android布局中常用属性介绍,中间,中间元素,android:layout_marginTop=10dp,android:layout_marginTop,android:layout_marginLeft,android:layout_marginButtom=10dp,android:layout_margin

10、相对于父控件的间隔,layout_padding是控件内容相对于控件边缘的边距取值也为：Android:padding=8dp,Android布局中常用属性介绍,中间元素,Android:paddingTop=8dp,Android:paddingButtom=8dp,Android:paddingRight,Android:paddingLeft,线性布局是最常用的布局线性布局在xml文件中使用来定义线性布局可以分为水平和垂直的方向的布局，可以通过android:orientation=“vertical”来定义方向，该属性可以有horizontal和vertical两个方向。标签中有一个很

11、重要的属性gravity，该属性用于控制布局中视图的位置，如果设置多个值需要使用|进行分隔,属性如下：,线性布局LinearLayout,学云 为您提供高品质课件、学习督导服务、即时答疑、知识交易平台,线性布局,android:layout_width和android_layout_height属性说明,线性布局LinearLayout,android:layout_weight权重的描述layout_weight 用于给一个线性布局中的诸多视图(即LinearLayout的子元素)的重要度赋值。所有的视图都有一个layout_weight值，默认为零，意思是需要显示 多大的视图就占据多大的屏

12、幕空 间。若赋一个高于零的值，则将父视 图中的可用空间分割，分割大小具体取决于每一个视图的layout_weight 值以及该值在当前屏幕布局的整体 layout_weight值和在其它视图屏幕布 局的layout_weight值中所占的比率而定。,线性布局LinearLayout,线性布局实例,使用线性布局实现如下界面,老罗安卓视频，相对较易,刘若翘杰作，相对有难度,19,相对布局RelativeLayout,子控件的位置相对兄弟控件或父容器而定设计时按照依赖关系进行设计,20,相对布局RelativeLayout,1.RelativeLayout支持的属性(1)对齐方式xml属性:andr

13、oid:gravity;设置方法:setGravity(int);作用:设置布局容器内子元素的对齐方式,注意与android:layout_gravity区分,后者是设置组件本身元素对齐方式;(2)忽略对齐方式xml属性:android:ignoreGravity;设置方法:setIgnoreGravity(int);作用:设置该组件不受gravity属性影响,因为gravity属性影响容器内所有的组件的对齐方式,设置了之后,该组件就可以例外;,相对布局RelativeLayout,只取True或False的属性,2.LayoutParams属性,例如：android:layout_cente

14、rVertical=“true”,相对布局RelativeLayout,取值为其他控件ID的属性,2.LayoutParams属性,android:layout_above=id/button(控件名称),相对布局RelativeLayout,取值为像素的属性避免出现循环依赖android:layout_marginBottom=10dp表示与下方有10dp的距离。,p,相对布局RelativeLayout,请用RelativeLayout实现以下的界面,要点:注意每个组件的属性,先要确定方位,再进行对齐,组件左边界对齐,组件上边界对齐,两个按钮,如果只有 android:layout_abo

15、ve=+id/bt1 会是这种情况:,加上 android:layout_alignLeft=+id/bt1就会成为这种情况:,25,表格布局TableLayout,1.表格布局的一些概念继承关系:表格布局继承了LinearLayout,其本质是线性布局管理器;控制组件:表格布局采用 行,列 形式管理子组件,但是并不需要声明有多少 行列,只需要添加TableRow 和 组件 就可以控制表格的行数和列数,这一点与网格布局有所不同,网格布局需要指定行列数;增加行的方法:a.TableRow增加行列:向TableLayout中添加一个TableRow,一个TableRow就是一个表格行,同时Tabl

16、eRow也是容器,可以向其中添加子元素,每添加一个组件,就增加了一列;b.组件增加行:如果直接向TableLayout中添加组件,就相当于直接添加了一行;列宽:TableLayout中,列的宽度由该列最宽的单元格决定,整个表格的宽度默认充满父容器本身;,26,表格布局TableLayout,常用属性及对应方法说明,27,表格布局TableLayout,一小段代码：,剩下的请看Eclipse里的代码，本节的实践也为右图,28,帧布局FrameLayout,帧布局容器为每个组件（控件）创建一个空白区域,一个区域成为一帧,这些帧会根据FrameLayout中定义的gravity属性自动对齐;,帧布局

17、是最简单的布局方式、所有添加到这个布局中的视图都是以层叠的方式显示。第一个添加到帧布局中的视图显示在最底层，最后一个被放在最顶层，上一层的视图会覆盖下一层的视图，因此帧布局类似堆栈布局。,29,帧布局FrameLayout,1.绘制霓虹灯布局,要点:后挡前:后面的View组件会遮挡前面的View组件,越在前面,被遮挡的概率越大;界面居中:将所有的TextView组件的对齐方式 android:layout_gravity 设置为center;正方形:所有的TextView都设置android:height 和 android:width 属性,用来设置其宽高,这里设置成正方形,宽高一样,后面的

18、组件比前面的边长依次少40;颜色:每个TextView的背景色都设置成不一样的;,详细，请看工程代码,30,网格布局GridLayout,1.网格布局介绍网格布局时Android4.0版本才有的,在低版本使用该布局需要导入对应支撑库;GridLayout将整个容器划分成rows*columns个网格,每个网格可以放置一个组件.还可以设置一个组件横跨多少列,多少行.不存在一个网格放多个组件情况;,2.网格布局常用属性(1)设置对齐模式xml属性:android:alignmentMode;设置方法:setAlignmentMode(int);作用:设置网格布局管理器的对齐模式,(2)页边距xml

19、属性:android:useDefaultMargins;设置方法:setUseDefaultMargins(boolean);作用:设置该布局是否使用默认的页边距;,31,网格布局GridLayout,(3)设置列数xml属性:android:columnCount;设置方法:setColumnCount(int);作用:设置该网格布局的列数;(5)设置是否保留列序列号xml属性:android:columnOrderPreserved;设置方法:setColumnOrderPreserved(boolean);作用:设置网格容器是否保留列序列号;,(4)设置行数xml属性:android:

20、rowCount;设置方法:setRowCount(int);作用:设置该网格的行数;(6)设置是否保留行序列号xml属性:android:rowOrderPreserved;设置方法:setRowOrderPreserved(int);作用:设置该网格容器是否保留行序列号;,32,网格布局GridLayout,3.GridLayout的LayoutParams属性,(1)设置位置列xml属性:android:layout_column;作用:设置子组件在GridLayout的哪一列;(2)横向跨列xml属性:android:layout_columnSpan;作用:设置该子组件在GridLa

21、yout中横向跨几列;,(3)占据空间方式xml属性:android:layout_gravity;设置方法:setGravity(int);作用:设置该组件采用何种方式占据该网格的空间;(4)设置行位置xml属性:android:layout_row;作用:设置该子组件在GridLayout的第几行;,(5)设置横跨行数xml属性:android:layout_rowSpan;作用:设置该子组件在GridLayout纵向横跨几行;,33,网格布局GridLayout,4.实现一个计算机界面（这里采用xml和Java代码共同控制界面）,(1)布局代码tips设置行列:设置GridLayout的

22、android:rowCount为6,设置android:columnCount为4,这个网格为 6行*4列 的;设置横跨四列:设置TextView和按钮横跨四列android:layout_columnSpan 为4,列的合并 就是占了一行;textView的一些设置:设置textView中的文本与边框有5像素间隔:android:padding=5dp;,34,网格布局GridLayout,4.实现一个计算机界面,35,网格布局GridLayout,XML代码,36,网格布局GridLayout,(2)Activity代码将组件设置给GridLayout网格流程:指定组件所在行:GridL

23、ayout.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:/,