Microsoft PowerPoint - 04 界面编程.ppt [兼容模式]

Size: px

Start display at page:

Download "Microsoft PowerPoint - 04 界面编程.ppt [兼容模式]"

召廖
7 years ago
Views:

1 手机应用平台软件开发 4 界面编程刘宁 liuning2@mail.sysu.edu.cn

2 UI 简介 UI(User Interface) 用户界面系统和用户之间进行交互和信息交换的媒介, 主要作用是实现信息内部形式与人类可接受形式之间的转换人机交互实践中, 一个好的界面设计不仅让软件变得更加有个性和创意, 同时还能让软件的操作变得舒适简单自由, 充分体现软件的定位和特点一个友好美观的界面会给人带来舒适的视觉享受, 能拉近人与设备的距离, 为商家创造卖点的同时也能给用户创造更加完美的使用体验

3 Android UI 控件 Android 提供的 UI 控件分别包括了几种 Layout 和多种组件 (widget), 例如 Button( 按钮 ) TextView( 文本 ) EditText( 文本编辑框 ) ListView( 列表 ) CheckBox( 复选框 ) RadioButton( 单选按钮 ) Spinner( 下拉列表 ) 以及 AutoCompleteTextView( 带自动补全的文本框 ) 图片切换器(ImageSwitcher) 等等另外还有一些较复杂且常用的控件例如时间日期选择控件和缩放控制控件当然, 开发人员更可以自己创建一些控件供应用程序使用, 只要按照一定的标准去自定义视图对象或者直接在已有控件上进行扩展和合并即可

4 Android UI 布局 Android 应用程序界面是由若干个 View 和 ViewGroup 所组成 View 和 ViewGroup 都属于 android.view 包, 而 View 和 ViewGroup 又派生了很多的子类 ViewGroup 是可以嵌套的, 即一个 ViewGroup 中可以包含另一个或多个 ViewGroup, 各种各样的 ViewGroup 和 View 就可以组成所需要的用户界面, 可以用一个树形结构来描述用户界面的结构, 如图所示, 一般来说 ViewGroup 就是树形结构中的父级结点而 View 是叶节点 ViewGroup (Layout) ViewGroup (Layout) View View View View View

5 Android UI 布局 Android 为开发人员提供了两种声明的方式 xml 文件中声明 UI 元素使用 xml 语法来声明 UI 视图, 这些 xml 文件存放在项目树下的 /res/layout 目录下, Android 为每种 View 都提供了很多属性, 通过设置这些属性来达到定制用户界面的目的 Java 代码中实时声明 UI 元素对于第一种方法中提到的用于定制 View 的 xml 属性, 基本上每一种可以在 xml 中设置的属性都对应了一个 Java 方法, 可以在 Java 代码中使用这些方法来声明

6 声明布局的两种方式 XML 布局文件 <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="hello" /> </LinearLayout> Java 代码 LinearLayout lay = (LinearLayout)this.findViewById(R.id.layout); TextView tv = new TextView(this); tv.setlayoutparams(new LinearLayout.LayoutParams(LinearLayout.Lay outparams.fill_parent,linearlayout.layou tparams.wrap_content)); tv.settext("hello"); lay.addview(tv);

7 声明布局的两种方式 1. XML 布局文件方式优点直观简洁, 可读性强 ; 实现了 UI 界面和逻辑代码的分离 2. Java 代码方式优点动态布局缺点抽象模糊, 可读性比较差 ; 耦合性强, 数据的表现和逻辑错杂很难因此, 建议尽可能采用声明性的 XML 语言设计界面 XML 的效率是不高吗, 为什么 Android 还要使用 XML XML 是一种详细的可读格式, 但是在简洁性或高效性方面做得不好, 虽然开发人员编写程序的时候采用 XML, 但是 Eclipse 插件会调用 Android 资源编译器 aapt, 将 XML 文件预处理为压缩的二进制格式, 移动设备正是存储的这种压缩二进制格式文件

8 界面布局 (LayOut) 8

9 Android UI 可通过直接编写 xml 文件来设计布局,ADT 还提供了可视化的设计工具, 如图在 eclipse 中打开 main.xml 并选中 Graphical Layout 选项卡打开设计线性布局界面如图所示 :

10 Android UI 布局 -- 线性布局在 Android 系统中, 线性布局是一种最常用的布局在这种布局方式中, 包含在界面中的各种控件元素都排列在同一个方向这个方向可以视情况而定, 可以是水平方向, 也可以是竖直方向, 通过对应.xml 文件中的变量 android:orientation 来控制若是竖直方向, 则设置为 android:orientation= vertical ; 若是水平方向, 则设置为 android:orientation= horizontal 在竖直方向的排列方式中, 每个元素都是从上到下一个挨着一个排列 ; 而在水平方向的排列方式中, 每个元素都是从左到右一个挨着一个排列

11 Android UI 布局 -- 线性布局 android:id 属性定义控件的 id, 该 id 用于在 Java 代码中与 Java 对象建立起关联, 设置方式为控件 id>"; android:layout_width 属性用于设定控件的宽度 ; android:layout_height 属性设定控件的高度 ; android:layout_weight 的作用是给线性布局中的多个视图设置所占比例的权重在线性布局中, 每个视图都有一个 android:layout_weight 值, 如果没有显式的声明则为默认值 0, 表示按照视图的实际大小在屏幕上显示当该属性被赋予一个大于零的值时, 则将父容器中的可用空间进行分割, 分割的大小则根据每个视图的 android:layout_weight 值来确定, 权值越大所占比例越大

12 Android UI 布局 -- 线性布局此布局里面可以放多个控件, 但是一行 ( 列 ) 只能放一个控件垂直 :android:orientation="vertical 水平 :android:orientation="horizontal Width= fill_parent ( 填充整个屏幕 ) Width= wrap_content ( 根据内容调整 ) <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1"> ************* </LinearLayout>

13 线性布局 (linearlayout)

14 Android UI 布局 -- 线性布局? 14

15 线性布局 (linearlayout) <?xml version="1.0" encoding="utf-8"?> android:layout_width="wrap_content" <LinearLayout android:layout_height="fill_parent" xmlns:android=" android:layout_weight="1"/> id" </LinearLayout> android:orientation="vertical" <LinearLayout android:layout_width="fill_parent" android:orientation="vertical" android:layout_height="fill_parent"> android:layout_width="fill_parent" <LinearLayout android:layout_height="fill_parent" android:orientation="horizontal" android:layout_weight="1"> android:layout_width="fill_parent" android:layout_height="fill_parent" android:text="row one" android:layout_weight="1"> android:textsize="15pt" android:layout_width="fill_parent" android:text="red" android:layout_height="wrap_content" android:gravity="center_horizontal" android:layout_weight="1"/> android:background="#aa0000" android:layout_width="wrap_content" android:text="row two" android:layout_height="fill_parent" android:textsize="15pt" android:layout_weight="1"/> android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="green" android:layout_weight="1"/> android:gravity="center_horizontal" </LinearLayout> android:background="#00aa00" </LinearLayout> 15

16 界面度量单位通常以像素为单位进行用户界面设计例如 : 图片大小为像素然而, 若在一个每英寸点数 (dpi) 更高的新显示器上运行该程序, 则用户界面会显得很小在有些情况下, 用户界面可能会小到难以看清内容由此建议采用与分辨率无关的度量单位来开发程序解决该问题 Android 应用开发支持不同的度量单位 16

17 各种分辨率格式 17

18 界面设计常识度量单位含义 dp: 与密度无关像素, 一种基于屏幕密度的抽象单位, 在每英寸 160 点的显示器上,1dp=1px, 据 px = dip * density / 160, 则当屏幕密度为 160 时,px = dip dip: 与 dp 相同 ; px: pixels( 像素 ). 屏幕上的点 ; pt:( 磅 ) 标准的长度单位,1pt=1/72 英寸, 用于印刷业, 非常简单易用 ; sp: 与刻度无关的像素, 与 dp 类似, 但是可以根据用户的字体大小首选项进行缩放 ; 主要用于字体显示 ; in( 英寸 ): 长度单位 mm( 毫米 ): 长度单位 sp 所为文字大小的单位,dip 作为其他元素的单位 margin: 两个独立视图之间的间距 Padding: 填充于两个独立视图 ( 两个视图具有包含于被包含的关系 ) 之间的距离 18

19 Android UI 布局 -- 表格布局表格布局 (TableLayout) 需要和 TableRow 联合使用每个表格布局是由一个一个的 TableRow 组合而成的, 每个 TableRow 都会定义一个行 (Row) 而每个 TableRow 又可以包含几个列 (Cloumn) 表格布局由行和列组合成许多单元格, 单元格可以为空, 但是不能跨列

20 Android UI 布局 -- 表格布局属性说明 android:padding="3dip" 表示当前元素与父容器边界的距离其中, android 中的 margin 也表示边距的意思, 不同的是,padding 是针对于它的父容器而言, 而 margin 是站在自身的角度, 表示自身与其他的元素的间距 android:gravity="right" 表示当前元素中的内容靠右显示该变量可以有 3 个值 left right center, 分别表示靠左靠右居中显示然而, 在 android 中, 还有布局上的 android:layout_gravity, 表示当前组件相对于父容器的显示位置

21 Android UI 布局 -- 表格布局与 TableRow 配合使用, 类似 HTML 中的 Table 此布局里面可以放多个控件, 但是一行 ( 列 ) 只能放一个控件子元素放入到行与列中不显示行列或是单元格边界线单元格不能横跨行, 如 HTML 中一样

22 Android UI 布局 -- 表格布局 TableLayout 布局 <TableLayout xmlns:android= android:layout_width="fill_parent" android:layout_height="fill_parent android:stretchcolumns="1"> <TableRow> android:text=" 用户名 :" android:textstyle="bold android:gravity="right" android:padding="3dip" /> <EditText android:padding="3dip android:scrollhorizontally="true" /> </TableRow> <TableRow> android:text=" 登录密码 :" android:textstyle="bold android:gravity="right" android:padding="3dip" /> <EditText android:password="true android:padding="3dip" android:scrollhorizontally="true" /> </TableRow> <TableRow android:gravity="right"> <Button android:text=" 取消 " /> <Button android:text=" 登录 " /> </TableRow> </TableLayout>

23 Android UI 布局 -- 表格布局 <TableLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:stretchcolumns="1"> <TableRow> android:layout_column="1" android:text="open..." android:padding="3dip" /> android:text="ctrl-o" android:gravity="right" android:padding="3dip" /> </TableRow> <TableRow> android:layout_column="1" android:text="save..." android:padding="3dip" /> android:text="ctrl-s" android:gravity="right" android:padding="3dip" /> </TableRow> <TableRow> android:layout_column="1" android:text="save As..." android:padding="3dip" /> android:text="ctrl-shift-s" android:gravity="right" android:padding="3dip" /> </TableRow> <View android:layout_height="2dip" android:background="#ff909090" /> <TableRow> android:text="x" android:padding="3dip" /> android:text="import..." android:padding="3dip" /> </TableRow> <TableRow> android:text="x" android:padding="3dip" /> android:text="export..." android:padding="3dip" /> android:text="ctrl-e" android:gravity="right" android:padding="3dip" /> </TableRow> <View android:layout_height="2dip" android:background="#ff909090" /> <TableRow> android:layout_column="1" android:text="quit" android:padding="3dip" /> </TableRow> </TableLayout> 23

24 绝对布局 (AbsoluteLayout) 指明子元素确切的屏幕 (X,Y) 坐标 (0,0) 是左上角, 下移或右移时, 坐标值增加允许元素重叠 ( 但是不推荐 ) 注意 : 1. 一般建议不使用 AbsoluteLayout 除非有很好的理由来使用它 2. 因为它相当严格并且在不同的设备显示中不能很好地工作

25 绝对布局 (AbsoluteLayout) 绝对布局 (AbsoluteLayout) 这种界面布局可以让界面中的各个组件设定准确的 x/y 坐标值, 并显示在屏幕上 (0, 0) 为左上角, 当向下或向右移动时, 坐标值将变大绝对布局没有页边框, 允许元素之间互相重叠 ( 尽管不推荐 ) 通常情况下不推荐使用绝对布局, 因为这种布局方式的界面代码太过硬性, 不灵活, 导致在不同的设备上不能很好的工作, 除非有充分的理由需要使用它在 Android 官方文档中已经将其标示为 deprecated( 过时的 )

26 帧布局 (FrameLayout) 在 android 系统中, 帧布局 (FrameLayout) 对象就是提前在屏幕上预订好的空白区域, 使用时可以填充某些内容到这个空白区域里面, 但是所有填进到这个空白区域的内容都是在这个屏幕的最左上方, 在这个空白区域中, 无法为某个元素指定确切的放置位置如果向帧布局里面添加了多个元素, 那么先添加的元素将会被后添加的元素所覆盖或者部分遮挡 ( 除非后一个元素是透明的 ) 一个帧布局中只能有效的显示一个元素

27 帧布局 (FrameLayout) 在屏幕上故意保留的空白空间, 可以填充一个单独的对象所有子元素都钉到屏幕的左上角不能为子元素指定位置

28 帧布局 (Framelayout) <?xml version="1.0" encoding="utf- 8"?> <FrameLayout xmlns:android=" com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#ffffff" > android:layout_width="200px" android:layout_height="200px" android:text=" 文本框一 " android:textcolor="#ffffff" > </TextView> android:layout_width="150px" android:layout_height="150px" > </TextView> android:layout_width="100px" android:layout_height="100px" android:layout_margintop="30px" android:paddingtop="30px" > </TextView> </FrameLayout> 在这个布局中, 整个界面被当成空白的备用区域, 整个界面嵌入三个文本框, 后面的文本框会覆盖的前面的文本框

29 相对布局 (RelativeLayout) 相对布局 (RelativeLayout) 是一个容器, 允许其子元素指定它们相对于其它元素或父元素的位置 ( 通过元素的 id 来指定是相对于哪个元素的位置 ) 可以通过向右对齐向上或者向下对齐至于屏幕中央等形式来排列界面中的元素元素的相对关系跟顺序有关, 如果第一个元素在屏幕的中央, 那么相对于这个元素的其它元素将以屏幕中央的相对位置来排列如果要在 xml 中指定某个元素的相对位置, 那么在定义这个元素之前, 必须先定义它要相对应的元素优点 : 不需要去关注很多细节, 并且这种布局方式的适配性比较强, 在各种大小的屏幕或者手机上都可以使用

30 相对布局 (RelativeLayout) 让子元素指定它们相对于其他元素的位置 ( 通过 ID 来指定 ) 或相对于父布局对象, 跟 AbsoluteLayout 这个绝对坐标布局是个相反在 RelativeLayout 布局里的控件包含丰富的排列属性 : Layout above: 控件在指定控件的上方 Layout below: 控件在指定控件的下方 Layout to left of 使用 RelativeLayout 布局的时候, 尽少程序运行时做控件布局的更改, 因为 RelativeLayout 布局里面的属性之间, 很容易冲突

31 相对布局 (RelativeLayout) <RelativeLayout xmlns:android= android:layout_width="fill_parent" android:layout_height="wrap_content" android:padding="10dip"> android:layout_width="fill_parent" android:layout_height="wrap_content" android:text=" 请输入用户名 :" />  <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" />  <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignparentright="true" android:layout_marginleft="10dip" android:text=" 取消 " />  <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=" 确定 " /> </RelativeLayout>

32 网格布局 (GridLayout) 以前 Android 中最常用的布局类是 LinearLayout, 它能将它的子元素们水平排列或垂直排列当界面布局比较复杂的时候, 也可以利用它嵌套一系列分割出来的 LinearLayout 子布局来实现, 嵌套的层数通常不宜太深, 只适合于许多简单布局的情形嵌套布局有很多显著的缺点, 总结起来有这三个方面 : 1. 无法同时在水平和竖直方向对齐 ; 2. 嵌套太深影响性能 ; 3. 不适用于那些支持自由编辑的设计工具 ;

33 网格布局 (GridLayout) 在 API Level14 中新加入网格布局类型, 能将一个视图按照网格的形式进行划分, 并且以格为单位来为子视图分配空间, 一个子视图可以占用一格也可以占用多格 ( 通过属性 rowspan 和 columnspan 参数进行设置 )

34 网格布局 (GridLayout) <GridLayout xmlns:android=" m/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:usedefaultmargins="true" android:alignmentmode="alignbounds" android:columnorderpreserved="false" android:columncount="4" > android:text=" setup" android:textsize="32dip" android:layout_columnspan="4" android:layout_gravity="center_horizontal" /> android:text="you can configure in a few simple steps:" android:textsize="16dip" android:layout_columnspan="4" android:layout_gravity="left"/> android:text=" address:" android:layout_gravity="right" /> <EditText android:ems="10" /> android:text="password:" android:layout_column="0" android:layout_gravity="right" /> <EditText android:ems="8" /> <Button android:text="manual setup" android:layout_row="5" android:layout_column="3" /> <Button android:text="next" android:layout_column="3" android:layout_gravity="fill_horizontal" /> </GridLayout>

35 网格布局 (GridLayout) <?xml version="1.0" encoding="utf-8"?> <GridLayout xmlns:android=" es/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" android:rowcount="5" android:columncount="4" > <Button android:text="1"/> <Button android:text="2"/> <Button android:text="3"/> <Button android:text="/"/> <Button android:text="4"/> <Button android:text="5"/> <Button android:text="6"/> <Button android:text=" "/> <Button android:text="7"/> <Button android:text="8"/> <Button android:text="9"/> <Button android:text="-"/> <Button android:layout_columnspan="2" android:layout_gravity="fill" android:text="0"/> <Button android:text="."/> <Button android:layout_rowspan="2" android:layout_gravity="fill" android:text="+"/> <Button android:layout_columnspan="3" android:layout_gravity="fill" android:text="="/> </GridLayout>

36 Android UI 控件 UI 事件捕获与处理当各种 UI 控件被添加到应用程序用户界面中后, 部分控件需要对用户的操作事件进行捕获和响应处理, 例如 Button 需要响应用户点击按下等等事件, 只有实现了对这些事件的处理, 才能算是与用户进行了交互, 在这个交互过程中就包括了响应和处理两个过程控件捕获用户操作事件的两种方式 1 定义一个事件监听器并将其绑定到相应的控件 2 重写回调方法

37 Android UI 控件 1 定义一个事件监听器并将其绑定到相应的控件用于监听用户事件,view 类包含了一系列命名类似于 On<Action-name>Listener 的接口, 而每一个接口都提供了一个命名类似于 On<Action-name>() 的回调方法例如响应视图点击事件的接口和方法分别是 View.OnClickListener 和 onclick() 方法, 所以如果某控件需要在它被点击时获得通知就需要实现 OnClickListener 接口并定义其 onclick 回调方法, 然后通过控件的 setonclicklistener() 方法进行注册绑定 2 重写回调方法这种方式主要用于自主实现的控件类, 这种方式允许为自主实现的控件上接收到的每个事件定义默认的处理行为, 并决定是否需要将事件传递给其他的子视图

38 Questions?

单击以编辑母片 Content 标题样式 LinearLayout 排版模式 TableLayout 排版模式 RelativeLayout 排版模式 AbsoluteLayout 排版模式 FrameLayout 排版模式 GridLayout 排版模式 TabWidget 切換卡 Lab 5 2

单击以编辑母片标题样式安卓系统 Android 的排版授课老师 : 谢兆贤 2016/4/18 1 单击以编辑母片 Content 标题样式 LinearLayout 排版模式 TableLayout 排版模式 RelativeLayout 排版模式 AbsoluteLayout 排版模式 FrameLayout 排版模式 GridLayout 排版模式 TabWidget 切換卡 Lab 5