Android之界面布局.ppt

单击此处编辑母版文本样式,第二级,第三级,第四级,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,单击此处编辑母版文本样式,第二级,第三级,第四级,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,单击此处编辑母版文本样式,第二级,第三级,第四级,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,单击此处编辑母版文本样式,第二级,第三级,第四级,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,单击此处编辑母版文本样式,第二级,第三级,第四级,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,单击此处编辑母版标题样式,Android UI,之界面布局,基础篇,回顾与作业点评,如何动态加载布局和组件？,TextView,，,EditView,有哪些特色应用？,Toast,如何使用？,Android,中的调试手段有哪些？,本章任务,使用几种不同的布局完成登录页面,本章目标,熟练掌握,Android,的常用布局,熟练掌握,Android,的嵌套布局,熟练掌握构建复杂页面,用户界面基础,用户界面（,User Interface,，,UI),是系统和用户之间进行信息交换的媒介，实现信息的内部形式与人类可以接受形式之间的转换,在计算机出现早期，批处理界面（1946-1968,）和命令行界面（,1969-1983,）得到广泛的使用,目前，流行图像用户界面（,Graphical User Interface,，,GUI,），采用图形方式与用户进行交互的界面,未来的用户界面将更多的运用虚拟现实技术，使用户能够摆脱键盘与鼠标的交互方式，而通过动作、语言，甚至是脑电波来控制计算机,用户界面基础,设计手机用户界面应解决的问题,需要界面设计与程序逻辑完全分离，这样不仅有利于他们的并行开发，而且在后期修改界面时，也不用再次修改程序的逻辑代码,根据不同型号手机的屏幕解析度、尺寸和纵横比各不相同，自动调整界面上部分控件的位置和尺寸，避免因为屏幕信息的变化而出现显示错误,能够合理利用较小的屏幕显示空间，构造出符合人机交互规律的用户界面，避免出现凌乱、拥挤的用户界面,Android,已经解决了前两个问题，,使用,XML,文件描述用户界面,；资源资源文件独立保存在资源文件夹中；对界用户面描述非常灵活，允许不明确定义界面元素的位置和尺寸，仅声明界面元素的相对位置和粗略尺寸,用户界面基础,Android,用户界面框架,Android UI Framework,采用视图树,View Tree,模型,Android,用户界面框架中的界面元素以一种树型结构组织在一起，称为视图树,Android,系统会依据视图树的结构从上至下绘制每一个界面元素。每个元素负责对自身的绘制，如果元素包含子元素，该元素会通知其下所有子元素进行绘制,用户界面基础,视图组件,View,在,Android,当中,View,类是最基本的一个,UI,类，基本上所有的高级,UI,组件都是继承,View,类而实现的,一个视图,(View),在屏幕上占据了一块矩形区域，它负责渲染这块矩形区域,视图组件,ViewGroup,就像它的名字显示的意义一样,Viewgroup,的作用就是,View,的容器，它负责对添加进,Viewgroup,的这些,View,进行布局,当然一个,Viewgroup,也可以加入到另一个,Viewgroup,里边。因为,Viewgroup,也是继承于,View.Viewgroup,类,在每个,Viewgroups,类中都会有一个嵌套类，这个嵌套类的属性中定义了子,view,的位置和大小,用户界面基础,Activity,代表的是显示给用户的窗口或屏幕,Android,中定义,Activity,定义使用一个,view,和,viewgroup,的树状节点,它要显示一个用户界面就需要给一个Activity分配一个View或者布局,setContentView(),方法,界面布局,界面布局,Layout,是用户界面结构的描述，定义了界面中所有的元素、结构和相互关系,声明,Android,程序的界面布局有两种方法,使用,XML,文件描述界面布局,在程序运行时动态添加或修改界面布局,用户既可以独立使用任何一种声明界面布局的方式，也可以同时使用两种方式,用户界面基础,使用,XML,文件声明界面布局的特点,将程序的表现层和控制层分离,在后期修改用户界面时，无需更改程序的源代码,用户还能够通过可视化工具直接看到所设计的用户界面，有利于加快界面设计的过程，并且为界面设计与开发带来极大的便利性,用户界面基础,视图组件,ViewGroup,它是一个抽象类,也是其他容器类的基类。在下面我们会介绍它的一个些实现类,使用,XML,文件声明界面布局的特点,将程序的表现层和控制层分离,在后期修改用户界面时，无需更改程序的源代码,用户还能够通过可视化工具直接看到所设计的用户界面，有利于加快界面设计的过程，并且为界面设计与开发带来极大的便利性,可视化编辑器,双击建立的,/res/layout,下的布局文件，如：,main.xml,，,Eclipse,将打开界面布局的可视化编辑器,布局和控件,资源配置清单,可视化界面,能够在可视化编辑器和,XML,文件编辑器之间切换,布局组件,Layout,布局组件,Layout,ViewGroup,是一个抽象类,也是其他容器类的基类。下面是它的一些实现类,线性布局,LinearLayout,框架布局,FrameLayout,相对布局,RelativeLayout,表格布局,TableLayout,绝对布局,AbsoluteLayout,Android,的布局管理器在,xml,中是以标签的形式出现的，并且需要为这些标签设置一个,android,的命名空间,xmlns:android=,现在屏幕左边，并且垂直居中,线性布局,LinearLayout,线性布局（,LinearLayout,）,在线性布局中，,LinearLayout,有两个非常相似的属性：,android:gravity,与,android:layout_gravity,android:gravity,：是对,view,控件本身来说的，是用来设置,view,本身的内容应该显示在,view,的什么位置,默认值是左侧,。,android:layout_gravity,：是相对于包含该元素的父元素来说的，设置该元素在父元素的什么位置,线性布局,LinearLayout,线性布局（,LinearLayout,）,在线性布局中，,LinearLayout,还支持为其包含的,widget,或者是,container,指定填充权值,layout_weight,默认的,weight,值为,0,，表示按照,widgets,或者是,containers,实际大小来显示，若高于,0,的值，则将,Container,剩余可用空间分割，分割大小具体取决于每一个,widget,或者是,container,的,layout_weight,及该权值在所有,widgets,或者是,containers,中的比例,线性布局,LinearLayout,线性布局（,LinearLayout,）,动态创建布局,在将每一个,View,加入到这个,Layout,里边的时候，我们会传传递一组值，这组值封装在,LayoutParams,这个类当中。在显示这个,View,的时候，它的容器会根据传进来的,LayoutParams,进行计算，来确认这个,View,显示的大小和位置,layout_width,-,宽,layout_height,-,高,/,定义布局管理器的指定宽和高,LinearLayout.LayoutParams,params=new LinearLayout.LayoutParams(,ViewGroup.LayoutParams.,FILL_PARENT,ViewGroup.LayoutParams.,FILL_PARENT,);,layout.setOrientation(LinearLayout.,VERTICAL,);,嵌套布局,嵌套布局,(Nested Layout),界面上放四个按钮，以,2*2,的形式存在,一个,LinearLayout,嵌套两个,LinearLayout,，外层的,LinearLayout,用纵向布局，而内部的用横向布局。,练习,线形嵌套登录页面,需求说明：,使用线形布局按照如图要求完成效果,完成时间：,20,分钟,共性问题集中讲解,常见调试问题及解决办法,代码规范问题,共性问题集中讲解,表格布局,TableLayout,表格布局,(TableLayout),也是一种常用的界面布局，它将屏幕划分网格，通过指定行和列可以将界面元素添加的网格中,网格的边界对用户是不可见的,表格布局还支持嵌套，可以将另一个表格布局放置在前一个表格布局的网格中，也可以在表格布局中添加其他界面布局，例如线性布局、相对布局等等,表格布局示意图,表格布局,TableLayout,表格布局,(TableLayout),一个表格布局由若干个,标签组成,每个,都会定义一行，每行可以有,0,或多个单元格,可以向单元格中添加组件，每添加一个组件表格就增加一列,如果直接向,TableLayout,添加组件，组件将直接站一行,表格布局,TableLayout,表格布局,(TableLayout),TableLayout,可以对列进行隐藏，压缩，拉伸,android:shrinkColumns,设置可以收缩的列号,android:stretchColumns,设置 可以伸展的列号,android:collapseColumns,设置表格的列是否隐藏,需要注意的是列号从,0,开始，也可以用”*”表示指定所有的列，多列用逗号隔开,0,1,2,android:collapseColumns=1,android:stretchColumns=,“,1,2,练习,表格布局登录页面,需求说明：,放置两个表格,实现如图效果,完成时间：,20,分钟,共性问题集中讲解,常见调试问题及解决办法,代码规范问题,共性问题集中讲解,绝对布局,AbsoluteLayout,绝对布局,AbsoluteLayout,通过指定界面元素的坐标位置,来确定用户界面的整体布局,绝对布局是一种,不推荐,使用的界面布局，因为通过,X,轴和,Y,轴确定界面元素位置后，,Android,系统不能够根据不同屏幕对界面元素的位置进行调整，降低了界面布局对不同类型和尺寸屏幕的适应能力,每一个界面控件都必须指定坐标,X,Y,例如“确认”按钮的坐标是,(40,120),“,取消”按钮的坐标是,(120,120).,坐标原点,(0,，,0),在屏幕的左上角,Android,中的单位,Android,系统支持的单位,px(,像素,):,屏幕上的点,pixels(,像素,),不同设备显示效果相同,in(,英寸,):,长度单位,mm(,毫米,):,长度单位,pt(,磅,):1/72,英寸,dp(,与密度无关的像素,):,一种基于屏幕密度的抽象单位。在每英寸,160,点的显示器上，,1dp=1px,dip:,与,dp,相同,device independent pixels(,设备独立像素,).,不同设备有不同的显示效果,多用于,Google,示例中。,sp(,与刻度无关的像素,):,与,dp,类似,但是可以根据用户的字体大小首选项进行缩放,.scaled pixels(,放大像素,).,主要用于字体显示,best for textsize,。,尽量使用,dp,作为空间大小单位,sp,作为和文字相关大小单位,相对布局,RelativeLayout,相对布局（,RelativeLayout,）,是一种非常灵活的布局方式，能够通过指定界面元素与其他元素的相对位置关系，确定界面中所有元素的布局位置,特点：能够最大程度保证在各种屏幕类型的手机上正确显示界面布局,在众多布局中，推荐使用相对布局,需要设置,id,相对布局,RelativeLayout,相对布局（,RelativeLayout,）,实现如图效果步骤,添加,TextView,控件,(“,用户名”,),相对布局会将,TextView,控件放置在屏幕的最上方,然后添加,EditText,控件,(,输入框,),并,声明,该控件的位置在,TextView,控件的,下方,，相对布局会根据,TextView,的位置确定,EditText,控件的位置,之后添加第一个,Button,控件,(“,取消”按钮,),声明,在,EditText,控件的,下方,，,且,在父控件的,最右边,最后，添加第二个,Button,控件（“确认”按钮），,声明,该控件在第一个,Button,控件的,左方,，,且,与第一个,Button,控件,处于相同的水平位置,相对布局,RelativeLayout,相对布局（,RelativeLayout,）,设置两个控件之间的布局属性说明,属性值,说明,android:layout_above,将该控件的底部置于给定,ID,的控件之上,android:layout_below,将该控件的底部置于给定,ID,的控件之下,android:layout_toLeftOf,将该控件的右边缘与给定,ID,的控件左边缘对齐,android:layout_toRightOf,将该控件的左边缘与给定,ID,的控件右边缘对齐,android:layout_alignTop,将该控件的顶部边缘与给定,ID,的顶部边缘对齐,androidlayout_alignBottom,将该控件的底部边缘与给定,ID,的底部边缘对齐,android:layout_alignLeft,将该控件的左边缘与给定,ID,的左边缘对齐,android:layout_alignRight,将该控件的右边缘与给定,ID,的右边缘对齐,相对布局,RelativeLayout,相对布局（,RelativeLayout,）,设置与父控件之间布局的属性说明,属性值,说明,android:layout_alignParentTop,如果为,true,将该控件的顶部与其父控件的顶部对齐,android:layout_alignParentBottom,如果为,true,将该控件的底部与其父控件的底部对齐,android:layout_alignParentLeft,如果为,true,将该控件的左部与其父控件的左部对齐,android:layout_alignParentRight,如果为,true,将该控件的右部与其父控件的右部对齐,android:layout_centerHorizontal,如果为,true,将该控件的置于水平居中,android:layout_centerVertical,如果为,true,将该控件的置于垂直居中,android:layout_centerInParent,如果为,true,将该控件的置于父控件的中央,练习,相对布局登录页面,需求说明：,使用相对布局实现如图效果,完成时间：,20,分钟,共性问题集中讲解,常见调试问题及解决办法,代码规范问题,共性问题集中讲解,框架布局,FrameLayout,框架布局,FrameLayout,是用来存放一个元素的空白空间，且子元素的位置是不能够指定的，默认放置在空白空间的左上角,如果有多个子元素，后放置的子元素将遮挡先放置的子元素,可以通过,layout_gravity,设置元素的位置,层级观察器,层级观察器,android,中提供的一个观察布局的工具，层级观察器，,Hierarchy Viewer,来观察我们的布局。,Hierarchy Viewer,工具是一个非常好的布局优化工具，同时，你也可以通过它学习他人的布局。应该说是一个非常实用的工具,Hierarchy Viewer,在,sdk,的,tools,目录下,层级观察器,层级观察器,层级观察器,层级观察器,练习,框架布局,需求说明：,放置两个,ImageView,一个在容器的右侧显示,一个显示在左侧底部,实现如图效果,完成时间：,20,分钟,共性问题集中讲解,常见调试问题及解决办法,代码规范问题,共性问题集中讲解,总结,界面布局分为哪几种？,列举相对布局设置两个控件之间的布局属性,层级观察器的作用是什么？,