Microsoft PowerPoint - chapter05.ppt

Transcription

1 第 5 章 Android 用户界面

2 本章学习目标 了解用户界面基础知识 掌握几个常用界面控件使用方法 掌握界面布局基本方法 掌握菜单设计基本方法 了解 Android 界面框架调用界面控件的事件处理函数对事件进行处理的方法

3 Android UI 组件概述 应用程序的好坏, 主要有三个元素决定 界面 功能 性能 界面给用户的第一感觉至关重要 UI 的设计与控制是程序开发核心内容之一 Android 的 UI 元素包括 Activity View ViewGroup 布局

4 View 所有控件都继承了 android.view.view 类

5 View 基础控件 主要包括 Button ImageButton ToggleButton TextView EditText RadioButton CheckBox ImageView ProgressBar SeekBar RatingBar

6 View Hierarchy Tree ViewGroup ViewGroup View View View View View

7 ViewGroup ViewGroup 是 View 类的一个重要子类 ViewGroup 是高级控件和布局的父类 ViewGroup 通常叫做 容器 或 组件 高级控件包括 : AutoCompleteTextView Spinner ListView GridView Gallery

8 布局管理器 五种布局 FrameLayout: 帧布局 LinearLayout: 线性布局 AbsoluteLayout: 绝对布局 RelativeLayout: 相对布局 TableLayout: 表格布局

9 层级观察器 使用 Android SDK 中提供的层级观察器 (Hierarchy Viewer) 进一步分析界面布局 层级观察器能够对用户界面进行分析和调试, 并以图形化的方式展示树形结构的界面布局 还提供了一个精确的像素级观察器 (Pixel Perfect View), 以栅格的方式详细观察放大后的界面界面 启动 Hierachy Viewer 目前, 在 eclipse 的 ADT Android 插件中, 还不能启动 Hierachy Viewer, 但可以从 Android SDK 工具包中, 通过命令行的方式可以启动, 具体方法为, 到 Android SDK 下的 tools 目录下, 在命令行方式下运行 hierachyviewer 即可

10 5.1 用户界面基础 设计手机用户界面应解决的问题 需要界面设计与程序逻辑完全分离, 这样不仅有利于它们的并行开发, 而且在后期修改界面时, 也不用再次修改程序的逻辑代码根据不同型号手机的屏幕解析度 尺寸和纵横比各不相同, 自动调整界面上部分控件的位置和尺寸, 避免因为屏幕信息的变化而出现显示错误能够合理利用较小的屏幕显示空间, 构造出符合人机交互规律的用户界面, 避免出现凌乱 拥挤的用户界面 Android 已经解决了前两个问题, 使用 XML 文件描述用户界面 ; 资源资源文件独立保存在资源文件夹中 ; 对界用户面描述非常灵活, 允许不明确定义界面元素的位置和尺寸, 仅声明界面元素的相对位置和粗略尺寸

11 5.1 用户界面基础 Android 用户界面框架 Android 用户界面框架 ( Android UI Framework) 采用 MVC(Model-View- Controller) 模型 提供了处理用户输入的控制器 (Controller) 显示用户界面和图像的视图 (View), 以及保存数据和代码的模型 (Model)

12 5.1 用户界面基础 Android 用户界面框架 MVC 模型 MVC 模型中的控制器能够接受并响应程序的外部动作, 如按键动作或触摸屏动作等 控制器使用队列处理外部动作, 每个外部动作作为一个对立的事件被加入队列中, 然后 Android 用户界面框架按照 先进先出 的规则从队列中获取事件, 并将这个事件分配给所对应的事件处理函数

13 5.1 用户界面基础 Android 用户界面框架 ViewGroup Android 用户界面框架 (Android UI Framework) 采用视图树 (View Tree) 模型 View ViewGroup View Android 用户界面框架中的界面元素以一种树型结构组织在一起, 称为视图树 Android 系统会依据视图树的结构从上至下绘制每一个界面元素 每个元素负责对自身的绘制, 如果元素包含子元素, 该元素会通知其下所有子元素进行绘制 View View View

14 5.1 用户界面基础 Android 用户界面框架 视图树 视图树由 View 和 ViewGroup 构成 View 是界面的最基本的可视单元, 存储了屏幕上特定矩形区域内所显示内容的数据结构, 并能够实现所占据区域的界面绘制 焦点变化 用户输入和界面事件处理等功能 View 也是一个重要的基类, 所有在界面上的可见元素都是 View 的子类 ViewGroup 是一种能够承载含多个 View 的显示单元 ViewGroup 功能 : 一个是承载界面布局, 另一个是承载具有原子特性的重构模块

15 5.1 用户界面基础 Android 用户界面框架 单线程用户界面 在单线程用户界面中, 控制器从队列中获取事件和视图在屏幕上绘制用户界面, 使用的都是同一个线程 特点 : 处理函数具有顺序性, 能够降低应用程序的复杂程度, 同时也能减低开发的难度 缺点 : 如果事件处理函数过于复杂, 可能会导致用户界面失去响应

16 5.2 界面控件 Android 系统的界面控件分为定制控件和系统控件 定制控件是用户独立开发的控件, 或通过继承并修改系统控件后所产生的新控件 能够为用户提供特殊的功能或与众不同的显示需求方式 系统控件是 Android 系统提供给用户已经封装的界面控件 提供在应用程序开发过程中常见功能控件 系统控件更有利于帮助用户进行快速开发, 同时能够使 Android 系统中应用程序的界面保持一致性 常见的系统控件包括 TextView EditText Button ImageButton Checkbox RadioButton Spinner ListView 和 TabHost

17 5.2 界面控件 TextView 和 EditText TextView 是一种用于显示字符串的控件 EditText 则是用来输入和编辑字符串的控件 EditText 是一个具有编辑功能的 TextView

18 5.2 界面控件 TextView 和 EditText 建立一个 TextViewDemo 的程序, 包含 TextView 和 EditText 两个控件 上方 用户名 部分使用的是 TextView, 下方的文字输入框使用的是 EditText

19 5.2 界面控件 TextView 和 EditText TextViewDemo 在 XML 文件中的代码 1. <TextView 2. android:layout_width="wrap_content" 3. android:layout_height="wrap_content" 4. android:text="textview01" > 5. </TextView> 6. <EditText 7. android:layout_width="match_parent" 8. android:layout_height="wrap_content" 9. android:text="edittext01" > 10. </EditText>

20 5.2 界面控件 TextView 和 EditText 第 1 行 android:id 属性声明了 TextView 的 ID, 这个 ID 主要用于在代码中引用这个 TextView 表示所设置的 ID 表示后面的字符串是 ID 资源 加号 (+) 表示需要建立新资源名称, 并添加到 R.java 文件中 斜杠后面的字符串 (TextView01) 表示新资源的名称 如果资源不是新添加的, 或属于 Android 框架的 ID 资源, 则不需要使用加号 (+), 但必须添加 Android 包的命名空间, 例如 android:id="@android:id/empty"

21 5.2 界面控件 TextView 和 EditText 第 2 行的 android:layout_width 属性用来设置 TextView 的宽度,wrap_content 表示 TextView 的宽度只要能够包含所显示的字符串即可第 3 行的 android:layout_height 属性用来设置 TextView 的高度第 4 行表示 TextView 所显示的字符串, 在后面将通过代码更改 TextView 的显示内容第 7 行中 match_parent 表示 EditText 的宽度将等于父控件的宽度

22 5.2 界面控件 TextView 和 EditText TextViewDemo.java 文件中代码的修改 引入 android.widget.textview android.widget.edittext 和 android.view.view 1. TextView textview = (TextView)findViewById(R.id.TextView01); 2. EditText edittext = (EditText)findViewById(R.id.EditText01); 3. textview.settext(" 用户名 :"); 4. edittext.settext(""); 第 1 行代码的 findviewbyid() 函数能够通过 ID 引用界面上的任何控件, 只要该控件在 XML 文件中定义过 ID 即可 第 3 行代码的 settext() 函数用来设置 TextView 所显示的内容

23 5.2 界面控件 Button 和 ImageButton Button 是一种按钮控件, 用户能够在该控件上点击, 并后引发相应的事件处理函数 ImageButton 用以实现能够显示图像功能的控件按钮

24 5.2 界面控件 Button 和 ImageButton 建立一个 ButtonDemo 的程序, 包含 Button 和 ImageButton 两个按钮, 上方是 Button 按钮, 下方是一个 ImageButton 控件

25 5.2 界面控件 Button 和 ImageButton ButtonDemo 在 XML 文件中的代码 1. <Button 2. android:layout_width="wrap_content" 3. android:layout_height="wrap_content" 4. android:text="button01" > 5. </Button> 6. <ImageButton 7. android:layout_width="wrap_content" 8. android:layout_height="wrap_content"> 9. </ImageButton> 定义 Button 控件的高度 宽度和内容 定义 ImageButton 控件的高度和宽度, 但是没定义显示的图像, 在后面的代码中进行定义

26 5.2 界面控件 Button 和 ImageButton 引入资源 将 download.png 文件拷贝到 /res/drawable 文件夹下 在 /res 目录上选择 Refresh 新添加的文件将显示在 /res/drawable 文件夹下 R.java 文件内容也得到了更新 否则提示无法找到资源的错误

27 5.2 界面控件 Button 和 ImageButton 更改 Button 和 ImageButton 内容 引入 android.widget.button 和 android.widget.imagebutton 1. Button button = (Button)findViewById(R.id.Button01); 2. ImageButton imagebutton = (ImageButton)findViewById(R.id.ImageButton01); 3. button.settext("button 按钮 "); 4. imagebutton.setimageresource(r.drawable.download); 第 1 行代码用于引用在 XML 文件中定义的 Button 控件 第 2 行代码用于引用在 XML 文件中定义的 ImageButton 控件 第 3 行代码将 Button 的显示内容更改为 Button 按钮 第 4 行代码利用 setimageresource() 函数, 将新加入的 png 文件 R.drawable.download 传递给 ImageButton

28 5.2 界面控件 Button 和 ImageButton 按钮响应点击事件 : 添加点击事件的监听器 1. final TextView textview = (TextView)findViewById(R.id.TextView01); 2. button.setonclicklistener(new View.OnClickListener() { 3. public void onclick(view view) { 4. textview.settext("button 按钮 "); 5. } 6. }); 7. imagebutton.setonclicklistener(new View.OnClickListener() { 8. public void onclick(view view) { 9. textview.settext("imagebutton 按钮 "); 10. } 11. }); 第 2 行代码中 button 对象通过调用 setonclicklistener() 函数, 注册一个点击 (Click) 事件的监听器 View.OnClickListener() 第 3 行代码是点击事件的回调函数 第 4 行代码将 TextView 的显示内容更改为 Button 按钮

29 5.2 界面控件 Button 和 ImageButton View.OnClickListener() View.OnClickListener() 是 View 定义的点击事件的监听器接口, 并在接口中仅定义了 onclick() 函数 当 Button 从 Android 界面框架中接收到事件后, 首先检查这个事件是否是点击事件, 如果是点击事件, 同时 Button 又注册了监听器, 则会调用该监听器中的 onclick() 函数 每个 View 仅可以注册一个点击事件的监听器, 如果使用 setonclicklistener() 函数注册第二个点击事件的监听器, 之前注册的监听器将被自动注销 多个按钮注册到同一个点击事件的监听器上, 代码如下

30 5.2 界面控件 Button 和 ImageButton 1. Button.OnClickListener buttonlistener = new Button.OnClickListener(){ 3. public void onclick(view v) { 4. switch(v.getid()){ 5. case R.id.Button01: 6. textview.settext("button 按钮 "); 7. return; 8. case R.id.ImageButton01: 9. textview.settext("imagebutton 按钮 "); 10. return; 11. } 12. }}; 13. button.setonclicklistener(buttonlistener); 14. imagebutton.setonclicklistener(buttonlistener); 第 1 行至第 12 行代码定义了一个名为 buttonlistener 的点击事件监听器 第 13 行代码将该监听器注册到 Button 上 第 14 行代码将该监听器注册到 ImageButton 上

31 5.2 界面控件 CheckBox 和 RadioButton CheckBox 是一个同时可以选择多个选项的控件 RadioButton 则是仅可以选择一个选项的控件 RadioGroup 是 RadioButton 的承载体, 程序运行时不可见, 应用程序中可能包含一个或多个 RadioGroup 一个 RadioGroup 包含多个 RadioButton, 在每个 RadioGroup 中, 用户仅能够选择其中一个 RadioButton

32 5.2 界面控件 CheckBox 和 RadioButton 建立一个 CheckboxRadiobuttonDemo 程序, 包含五个控件, 从上至下分别是 TextView01 CheckBox01 CheckBox02 RadioButton01 RadioButton02 当选择 RadioButton01, RadioButton02 则无法选择

33 5.2 界面控件 CheckBox 和 RadioButton CheckboxRadiobuttonDemo 在 XML 文件中的代码 1. <TextView 2. android:layout_width="fill_parent" 3. android:layout_height="wrap_content" <CheckBox 6. android:layout_width="wrap_content" 7. android:layout_height="wrap_content" 8. android:text="checkbox01" > 9. </CheckBox> 10. <CheckBox 11. android:layout_width="wrap_content" 12. android:layout_height="wrap_content" 13. android:text="checkbox02" > 14. </CheckBox>

34 5.2 界面控件 CheckBox 和 RadioButton 15. <RadioGroup 16. android:layout_width="wrap_content" 17. android:layout_height="wrap_content"> 18. <RadioButton 19. android:layout_width="wrap_content" 20. android:layout_height="wrap_content 21. android:text="radiobutton01" > 22. </RadioButton> 23. <RadioButton 24. android:layout_width="wrap_content" 25. android:layout_height="wrap_content 26. android:text="radiobutton02" > 27. </RadioButton> 28. </RadioGroup> 第 15 行 <RadioGroup> 标签声明了一个 RadioGroup 在第 18 行和第 23 行分别声明了两个 RadioButton, 这两个 RadioButton 是 RadioGroup 的子元素

35 5.2 界面控件 CheckBox 和 RadioButton 引用 CheckBox 和 RadioButton 的方法参考下面的代码 1. CheckBox checkbox1= (CheckBox)findViewById(R.id.CheckBox01); 2. RadioButton radiobutton1 =(RadioButton)findViewById(R.id.RadioButton01); CheckBox 设置点击事件监听器的简要代码 1. CheckBox.OnClickListener checkboxlistener = new CheckBox.OnClickListener(){ 3. public void onclick(view v) { 4. // 过程代码 5. }}; 6. checkbox1.setonclicklistener(checkboxlistener); 7. checkbox2.setonclicklistener(checkboxlistener); 与 Button 设置点击事件监听器中介绍的方法相似, 唯一不同在于将 Button.OnClickListener 换成了 CheckBox.OnClickListener

36 5.2 界面控件 CheckBox 和 RadioButton RadioButton 设置点击事件监听器的方法 1. RadioButton.OnClickListener radiobuttonlistener = new RadioButton.OnClickListener(){ 3. public void onclick(view v) { 4. // 过程代码 5. }}; 6. radiobutton1.setonclicklistener(radiobuttonlistener); 7. radiobutton2.setonclicklistener(radiobuttonlistener);

37 5.2 界面控件 Spinner Spinner 是一种能够从多个选项中选一选项的控件, 类似于桌面程序的组合框 (ComboBox ), 但没有组合框的下拉菜单, 而是使用浮动菜单为用户提供选择建立一个程序 SpinnerDemo 包含 3 个子项 Spinner 控件

38 5.2 界面控件 Spinner SpinnerDemo 在 XML 文件中的代码 1. <TextView 2. android:layout_width="fill_parent" 3. android:layout_height="wrap_content" <Spinner 6. android:layout_width="300dip" 7. android:layout_height="wrap_content"> 8. </Spinner> 第 5 行使用 <Spinner> 标签声明了一个 Spinner 控件 第 6 行代码中指定了该控件的宽度为 300dip

39 5.2 界面控件 Spinner 在 SpinnerDemo.java 文件中, 定义一个 ArrayAdapter 适配器, 在 ArrayAdapter 中添加需要在 Spinner 中可以选择的内容, 需要在代码中引入 android.widget.arrayadapter 和 android.widget.spinner 1. Spinner spinner = (Spinner) findviewbyid(r.id.spinner01); 2. List<String> list = new ArrayList<String>(); 3. list.add("spinner 子项 1"); 4. list.add("spinner 子项 2"); 5. list.add("spinner 子项 3"); 6. ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.r.layout.simple_spinner_item, list ); 7. adapter.setdropdownviewresource(android.r.layout.simple_spinner_dropdown_item); 8. spinner.setadapter(adapter);

40 5.2 界面控件 Spinner 第 2 行代码建立了一个字符串数组列表 (ArrayList), 这种数组列表可以根据需要进行增减 <String> 表示数组列表中保存的是字符串类型的数据 在代码的第 行中, 使用 add() 函数分别向数组列表中添加 3 个字符串 第 6 行代码建立了一个 ArrayAdapter 的数组适配器, 数组适配器能够将界面控件和底层数据绑定在一起 第 7 行代码设定了 Spinner 的浮动菜单的显示方式, 其中, android.r.layout.simple_spinner_dropdown_item 是 Android 系统内置的一种浮动菜单 第 8 行代码实现绑定过程, 所有 ArrayList 中的数据, 将显示在 Spinner 的浮动菜单中

41 5.2 界面控件 Spinner 设置 android.r.layout.simple_spinner_item 浮动菜单, 显示结果如图 适配器绑定界面控件和底层数据, 如果底层数据更改了, 用户界面也相应修改显示内容, 就不需要应用程序再监视, 从而极大的简化的代码的复杂性

42 5.2 界面控件 ListView ListView 是一种用于垂直显示的列表控件, 如果显示内容过多, 则会出现垂直滚动条 ListView 能够通过适配器将数据和自身绑定, 在有限的屏幕上提供大量内容供用户选择, 所以是经常使用的用户界面控件 ListView 支持点击事件处理, 用户可以用少量的代码实现复杂的选择功能

43 5.2 界面控件 ListView 建立一个 ListViewDemo 程序, 包含四个控件, 从上至下分别为 TextView01 ListView01 ListView02 和 ListView03

44 5.2 界面控件 ListView ListViewDemo 在 XML 文件中的代码 1. <TextView 2. android:layout_width="fill_parent" 3. android:layout_height="wrap_content" 4. /> 5. <ListView 6. android:layout_width="wrap_content" 7. android:layout_height="wrap_content"> 8. </ListView>

45 5.2 界面控件 ListView 在 ListViewDemo.java 文件中, 首先需要为 ListView 创建适配器, 并添加 ListView 中所显示的内容 1. final TextView textview = (TextView)findViewById(R.id.TextView01); 2. ListView listview = (ListView)findViewById(R.id.ListView01); 3. List<String> list = new ArrayList<String>(); 4. list.add("listview 子项 1"); 5. list.add("listview 子项 2"); 6. list.add("listview 子项 3"); 7. ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.r.layout.simple_list_item_1, list ); 8. listview.setadapter(adapter); 第 2 行代码通过 ID 引用了 XML 文件中声明的 ListView 第 7 行代码声明了适配器 ArrayAdapter, 第三个参数 list 说明适配器的数据源为数组列表 第 8 行代码将 ListView 和适配器绑定

46 5.2 界面控件 ListView 下面的代码声明了 ListView 子项的点击事件监听器, 用以确定用户在 ListView 中, 选择的是哪一个子项 1. AdapterView.OnItemClickListener listviewlistener = new AdapterView.OnItemClickListener(){ 3. public void onitemclick(adapterview<?> arg0, View arg1, int arg2, long arg3) { 4. String msg = ; 5. textview.settext(msg); 6. }}; 7. listview.setonitemclicklistener(listviewlistener);

47 5.2 界面控件 ListView 第 1 行的 AdapterView.OnItemClickListener 是 ListView 子项的点击事件监听器, 同样是一个接口, 需要实现 onitemclick() 函数 在 ListView 子项被选择后, onitemclick() 函数将被调用 第 3 行的 onitemclick() 函数中一共有四个参数, 参数 0 表示适配器控件, 就是 ListView; 参数 1 表示适配器内部的控件, 是 ListView 中的子项 ; 参数 2 表示适配器内部的控件, 也就是子项的位置 ; 参数 3 表示子项的行号 第 4 行和第 5 行代码用于显示信息, 选择子项确定后, 在 TextView 中显示子项父控件的信息 子控件信息 位置信息和 ID 信息 第 7 行代码是 ListView 指定刚刚声明的监听器

48 5.2 界面控件 TabHost Tab 标签页是界面设计时经常使用的界面控件, 可以实现多个分页之间的快速切换, 每个分页可以显示不同的内容下图是 Android 系统内置的 Tab 标签页, 点击 呼出 / 接听键 后出现, 用于电话呼出和查看拨号记录 联系人

49 5.2 界面控件 TabHost Tab 标签页的使用 首先要设计所有的分页的界面布局 在分页设计完成后, 使用代码建立 Tab 标签页, 并给每个分页添加标识和标题 最后确定每个分页所显示的界面布局 每个分页建立一个 XML 文件, 用以编辑和保存分页的界面布局, 使用的方法与设计普通用户界面没有什么区别

50 5.2 界面控件 TabHost 建立一个 TabDemo 程序, 包含三个 XML 文件, 分别为 tab1.xml tab2.xml 和 tab3.xml, 这 3 个文件分别使用线性布局 相对布局和绝对布局示例中的 main.xml 的代码, 并将布局的 ID 分别定义为 layout01 layout02 和 layout03

51 5.2 界面控件 TabHost tab1.xml 文件代码 1. <?xml version="1.0" encoding="utf-8"?> 2. <LinearLayout android:id = "@+id/layout01" </LinearLayout> tab2.xml 文件代码 1. <?xml version="1.0" encoding="utf-8"?> 2. <AbsoluteLayout android:id="@+id/layout02" </AbsoluteLayout> tab3.xml 文件代码 1. <?xml version="1.0" encoding="utf-8"?> 2. <RelativeLayout android:id="@+id/layout03" </RelativeLayout>

52 5.2 界面控件 TabHost 在 TabDemo.java 文件中键入下面的代码, 创建 Tab 标签页, 并建立子页与界面布局直接的关联关系 1. package edu.hrbeu.tabdemo; import android.app.tabactivity; 4. import android.os.bundle; 5. import android.widget.tabhost; 6. import android.view.layoutinflater; public class TabDemo extends TabActivity {

53 5.2 界面控件 TabHost 10. public void oncreate(bundle savedinstancestate) { 11. super.oncreate(savedinstancestate); 12. TabHost tabhost = gettabhost(); 13. LayoutInflater.from(this).inflate(R.layout.tab1, tabhost.gettabcontentview(),true); 14. LayoutInflater.from(this).inflate(R.layout.tab2, tabhost.gettabcontentview(),true); 15. LayoutInflater.from(this).inflate(R.layout.tab3, tabhost.gettabcontentview(),true); 16. tabhost.addtab(tabhost.newtabspec("tab1") 17..setIndicator(" 线性布局 ").setcontent(r.id.layout01)); 18. tabhost.addtab(tabhost.newtabspec("tab2") 19..setIndicator(" 绝对布局 ").setcontent(r.id.layout02)); 20. tabhost.addtab(tabhost.newtabspec("tab3") 21..setIndicator(" 相对布局 ").setcontent(r.id.layout03)); 22. } 23. }

54 5.2 界面控件 TabHost 第 8 行代码的声明 TabDemo 类继承与 TabActivity, 与以往继承 Activity 不同,TabActivity 支持内嵌多个 Activity 或 View 第 12 行代码通过 gettabhost() 函数获得了 Tab 标签页的容器, 用以承载可以点击的 Tab 标签和分页的界面布局 第 13 行代码通过 LayoutInflater 将 tab1.xml 文件中的布局转换为 Tab 标签页可以使用的 View 对象 第 16 行代码使用 addtab() 函数添加了第 1 个分页, tabhost.newtabspec("tab1") 表明在第 12 行代码中建立的 tabhost 上, 添加一个标识为 TAB1 的 Tab 分页 第 17 行代码使用 setindicator() 函数设定分页显示的标题, 使用 setcontent() 函数设定分页所关联的界面布局

55 5.2 界面控件 TabHost TabDemo 示例的运行结果如图

56 5.2 界面控件 TabHost 在使用 Tab 标签页时, 可以将不同分页的界面布局保存在不同的 XML 文件中, 也可以将所有分页的布局保存在同一个 XML 文件中 第一种方法有利于在 Eclipse 开发环境中进行可视化设计, 并且不同分页的界面布局在不同的文件中更加易于管理 第二种方法则可以产生较少的 XML 文件, 同时编码时的代码也会更加简洁

57 5.3 界面布局 界面布局 界面布局 (Layout) 是用户界面结构的描述, 定义了界面中所有的元素 结构和相互关系声明 Android 程序的界面布局有两种方法 使用 XML 文件描述界面布局 在程序运行时动态添加或修改界面布局 用户既可以独立使用任何一种声明界面布局的方式, 也可以同时使用两种方式

58 5.3 界面布局 界面布局 使用 XML 文件声明界面布局的特点 将程序的表现层和控制层分离 在后期修改用户界面时, 无需更改程序的源代码 用户还能够通过可视化工具直接看到所设计的用户界面, 有利于加快界面设计的过程, 并且为界面设计与开发带来极大的便利性

59 5.3 界面布局 线性布局 线性布局 (LinearLayout) 是一种重要的界面布局中, 也是经常使用到的一种界面布局 在线性布局中, 所有的子元素都按照垂直或水平的顺序在界面上排列 如果垂直排列, 则每行仅包含一个界面元素 如果水平排列, 则每列仅包含一个界面元素

60 5.3 界面布局 线性布局 创建 Android 工程 工程名称是 LinearLayout 包名称是 edu.hrbeu.linearlayout Activity 名称为 LinearLayout 为了能够完整体验创建线性布局的过程, 首先删除 Eclipse 自动建立的 /res/layout/main.xml 文件, 然后建立用于显示垂直排列线性布局的 XML 文件

61 5.3 界面布局 线性布局 右击 /res/layout 文件夹 选择 New File 打开新文件建立向导文件名为 main_vertical.xml 保存位置为 LinearLayout/res/layout

62 5.3 界面布局 线性布局 双击新建立的 /res/layout/main_vertical.xml 文件, Eclipse 将打开界面布局的可视化编辑器

63 5.3 界面布局 线性布局 可视化编辑器顶部是资源配置清单, 可以根据手机的配置不同选择不同的资源, 主要用来实现应用软件的本地化 下部左侧是界面布局和界面控件, 用户可以将需要的布局和控件拖拽到右面的可视化界面中, 并修改布局和控件的属性 右侧是可视化的用户界面, 能够实时的呈现用户界面, 但对无法正确显示中文 左下角的 Layout 和 main_vertical.xml 能够在可视化编辑器和 XML 文件编辑器之间切换

64 5.3 界面布局 线性布局 在 Eclipse 右边的 Outline 中, 双击 LinearLayout, 打开线性布局的属性编辑器 线性布局的排列方法主要由 Orientation 属性进行控制, vertical 表示垂直排列,horizontal 表示水平排列 选择 Orientation 的值为 vertical, 表示该线性布局为垂直排列

65 5.3 界面布局 线性布局 缺省情况下,Layout height 的值为 wrap_content, 表示线性布局高度等于所有子控件的高度总和, 也就是线性布局的高度会刚好将所有子控件包含其中将 Layout width 属性的值改为 fill_parent, 表示线性布局宽度等于父控件的宽度, 就是将线性布局在横向上占据父控件的所有空间

66 5.3 界面布局 线性布局 打开 XML 文件编辑器,main_vertical.xml 文件的代码如下 1. <?xml version="1.0" encoding="utf-8"?> 2. <LinearLayout 3. xmlns:android=" 4. android:layout_width="fill_parent" 5. android:layout_height="wrap_content" 6. android:orientation="vertical"> 7. </LinearLayout> 第 2 行代码是声明 XML 文件的根元素为线性布局 第 行代码是在属性编辑器中修改过的宽度 高度和排列方式的属性 用户在可视化编辑器和属性编辑器中的任何修改, 都会同步的反映在 XML 文件中 ; 反之, 也是如此

67 5.3 界面布局 线性布局 将四个界面控件 TextView EditText Button Button 先后拖拽到可视化编辑器中 所有控件都自动获取控件名称, 并把该名称显示在控件上, 如 TextView01 EditText01 Button01 和 Button02

68 5.3 界面布局 线性布局 修改界面控件的属性 编号 类型 属性 值 1 TextVie w Text 用户名 : 2 EditTex t Layout width fill_parent Text [null] 3 Button Text 确认 4 Button Text 取消 所有界面控件都有一个共同的属性 ID ID 是一个字符串, 编译时被转换为整数, 可以用来在代码中引用界面元素, 一般仅在代码中需要动态修改的界面元素时才为界面元素设置 ID, 反之则不需要设置 ID

69 5.3 界面布局 线性布局 从可视化编辑器中发现, 界面控件的中文字符都显示为, 因为可视化编辑器还不能很好的支持中文字符 打开 XML 文件编辑器查看 main_vertical.xml 文件代码, 发现在属性编辑器内填入的文字已经正常写入到 XML 文 件中, 例如第 行代码 1. <?xml version="1.0" encoding="utf-8"?> 2. <LinearLayout 3. xmlns:android=" 4. android:layout_width="fill_parent" 5. android:layout_height="wrap_content" 6. android:orientation="vertical"> <TextView 9. android:layout_width="wrap_content" 10. android:layout_height="wrap_content" 11. android:text=" 用户名 :" >

70 5.3 界面布局 线性布局 12. </TextView> 13. <EditText 14. android:layout_height="wrap_content" 15. android:layout_width="fill_parent"> 16. </EditText> 17. <Button 18. android:layout_width="wrap_content" 19. android:layout_height="wrap_content" 20. android:text=" 确认 "> 21. </Button> 22. <Button 23. android:layout_width="wrap_content" 24. android:layout_height="wrap_content" 25. android:text=" 取消 " > 26. </Button> 27. </LinearLayout>

71 5.3 界面布局 线性布局 将 LinearLayout.java 文件中的 setcontentview(r.layout.main), 更改为 setcontentview(r.layout.main_vertical) 运行后的结果如图

72 5.3 界面布局 线性布局 建立横向线性布局与纵向线性布局相似, 只需注意以下几点 建立 main_ horizontal.xml 文件 线性布局的 Orientation 属性的值设置为 horizontal 将 EditText 的 Layout width 属性的值设置为 wrap_content 将 LinearLayout.java 文件中的 setcontentview(r.layout.main_vertical) 修改为 setcontentview(r.layout.main_ horizontal)

73 5.3 界面布局 框架布局 框架布局 (FrameLayout) 是最简单的界面布局, 是用来存放一个元素的空白空间, 且子元素的位置是不能够指定的, 只能够放置在空白空间的左上角如果有多个子元素, 后放置的子元素将遮挡先放置的子元素使用 Android SDK 中提供的层级观察器 (Hierarchy Viewer) 进一步分析界面布局 层级观察器能够对用户界面进行分析和调试, 并以图形化的方式展示树形结构的界面布局还提供了一个精确的像素级观察器 (Pixel Perfect View ), 以栅格的方式详细观察放大后的界面界面

74 5.3 界面布局 框架布局 在层级观察器中获得示例界面布局的树形结构图

75 5.3 界面布局 框架布局 示意图

76 5.3 界面布局 框架布局 结合界面布局的树形结构图和示意图, 分析不同界面布局和界面控件的区域边界 用户界面的根节点 是线性布局, 其边界是整个界面, 也就是示意图的最外层的实心线 根节点右侧的子节点 是框架布局, 仅有一个节点元素 这个子元素是 TextView 控件, 用来显示 Android 应用程序名称, 其边界是示意图中的区域 1 因此框架布局元素 #0@43599a730 的边界是同区域 1 的高度相同, 宽带充满整个根节点的区域 这两个界面元素是系统自动生成的, 一般情况下用户不能够修改和编辑 根节点左侧的子节点 (#1@4359b858) 也是框架布局, 边界是区域 2 到区域 7 的全部空间

77 5.3 界面布局 框架布局 子节点 下仅有一个子节点 ( #0@4359bd60) 元素是线性布局, 因为线性布局的 Layout width 属性设置为 fill_parent,layout height 属性设置为 wrap_content, 因此该线性布局的宽度就是其父节点 #1@4359b858 的宽带, 高度等于所有子节点元素的高度之和 线性布局 #0@4359bd60 的四个子节点元素 #0@4359bfa8 #1@4359c5f8 #2@4359d5d8 和 #3@4359de18 的边界, 分别是界面布局示意图中的区域 2 区域 3 区域 4 和区域 5

78 5.3 界面布局 表格布局 表格布局 (TableLayout) 也是一种常用的界面布局, 它将屏幕划分网格, 通过指定行和列可以将界面元素添加的网格中 网格的边界对用户是不可见的 表格布局还支持嵌套, 可以将另一个表格布局放置在前一个表格布局的网格中, 也可以在表格布局中添加其他界面布局, 例如线性布局 相对布局等等

79 5.3 界面布局 表格布局 表格布局示意图 表格布局效果图

80 5.3 界面布局 表格布局 建立表格布局要注意以下几点 向界面中添加一个表格布局, 无需修改布局的属性值 其中,Id 属性为 TableLayout01,Layout width 和 Layout height 属性都为 wrap_content 向 TableLayout01 中添加两个 TableRow TableRow 代表一个单独的行, 每行被划分为几个小的单元, 单元中可以添加一个界面控件 其中,Id 属性分别为 TableRow01 和 TableRow02,Layout width 和 Layout height 属性都为 wrap_content

81 5.3 界面布局 表格布局 通过 Outline, 向 TableRow01 中添加 TextView 和 EditText

82 5.3 界面布局 表格布局 通过 Outline, 向 TableRow02 中添加两个 Button 参考下表设置 TableRow 中四个界面控件的属性值 编号 类型 属性 值 1 TextVie w l Text 用户名 : Gravity right Padding 3dip Layout 160dip width 2 EditTex t y Text [null] Padding 3dip Layout 160dip width 3 Button Text 确认 Padding 3dip 4 Button el Text 取消 Padding 3dip

83 5.3 界面布局 表格布局 main.xml 文件的完整代码如下 1. <?xml version="1.0" encoding="utf-8"?> <TableLayout 4. android:layout_width="fill_parent" 5. android:layout_height="fill_parent" 6. xmlns:android=" 7. <TableRow 8. android:layout_width="wrap_content" 9. android:layout_height="wrap_content"> 10. <TextView 11. android:layout_height="wrap_content" 12. android:layout_width="160dip" 13. android:gravity="right" 14. android:text=" 用户名 :" 15. android:padding="3dip" > 16. </TextView>

84 5.3 界面布局 表格布局 17. <EditText 18. android:layout_height="wrap_content" 19. android:layout_width="160dip 20. android:padding="3dip" > 21. </EditText> 22. </TableRow> 23. <TableRow 24. android:layout_width="wrap_content" 25. android:layout_height="wrap_content"> 26. <Button 27. android:layout_height="wrap_content" 28. android:padding="3dip" 29. android:text=" 确认 "> 30. </Button>

85 5.3 界面布局 表格布局 31. <Button 32. android:layout_width="wrap_content" 33. android:layout_height="wrap_content" 34. android:padding="3dip" 35. android:text=" 取消 "> 36. </Button> 37. </TableRow> 38. </TableLayout> 第 3 行代码使用了 <TableLayout> 标签声明表格布局 第 7 行和第 23 行代码声明了两个 TableRow 元素 第 12 行设定宽度属性 android:layout_width:160dip 第 13 行设定属性 android:gravity, 指定文字为右对齐 第 15 行使用属性 android:padding, 声明 TextView 元素与其他元素的间隔距离为 3dip

86 5.3 界面布局 相对布局 相对布局 (RelativeLayout) 是一种非常灵活的布局方式, 能够通过指定界面元素与其他元素的相对位置关系, 确定界面中所有元素的布局位置特点 : 能够最大程度保证在各种屏幕类型的手机上正确显示界面布局

87 5.3 界面布局 相对布局 相对布局示例说明 添加 TextView 控件 ( 用户名 ), 相对布局会将 TextView 控件放置在屏幕的最上方 然后添加 EditText 控件 ( 输入框 ), 并声明该控件的位置在 TextView 控件的下方, 相对布局会根据 TextView 的位置确定 EditText 控件的位置 之后添加第一个 Button 控件 ( 取消 按钮 ), 声明在 EditText 控件的下方, 且在父控件的最右边 最后, 添加第二个 Button 控件 ( 确认 按钮 ), 声明该控件在第一个 Button 控件的左方, 且与第一个 Button 控件处于相同的水平位置

88 5.3 界面布局 相对布局 相对布局在 main.xml 文件的完整代码如下 1. <?xml version="1.0" encoding="utf-8"?> <RelativeLayout 4. android:layout_width="fill_parent" 5. android:layout_height="fill_parent" 6. xmlns:android=" 7. <TextView 8. android:layout_height="wrap_content" 9. android:layout_width="fill_parent" 10. android:text=" 用户名 :"> 11. </TextView> 12. <EditText 13. android:layout_height="wrap_content" 14. android:layout_width="fill_parent" </EditText>

89 5.3 界面布局 相对布局 17. <Button 18. android:layout_height="wrap_content" 19. android:layout_width="wrap_content" 20. android:layout_alignparentright="true" 21. android:layout_marginleft="10dip" android:text=" 取消 " > 24. </Button> 25. <Button 26. android:layout_height="wrap_content" 27. android:layout_width="wrap_content" android:text= 确认 > 31. </Button> 32. </RelativeLayout>

90 5.3 界面布局 相对布局 第 3 行使用了 <RelativeLayout> 标签声明一个相对布局 第 15 行使用位置属性 android:layout_below, 确定 EditText 控件在 ID 为 label 的元素下方 第 20 行使用属性 android:layout_alignparentright, 声明该元素在其父元素的右边边界对齐 第 21 行设定属性 android:layout_marginleft, 左移 10dip 第 22 行声明该元素在 ID 为 entry 的元素下方 第 28 行声明使用属性 android:layout_toleftof, 声明该元素在 ID 为 cancel 元素的左边 第 29 行使用属性 android:layout_aligntop, 声明该元素与 ID 为 cancel 的元素在相同的水平位置

91 5.3 界面布局 绝对布局 绝对布局 (AbsoluteLayout) 能通过指定界面元素的坐标位置, 来确定用户界面的整体布局绝对布局是一种不推荐使用的界面布局, 因为通过 X 轴和 Y 轴确定界面元素位置后,Android 系统不能够根据不同屏幕对界面元素的位置进行调整, 降低了界面布局对不同类型和尺寸屏幕的适应能力

92 5.3 界面布局 绝对布局 每一个界面控件都必须指定坐标 (X,Y), 例如 确认 按钮的坐标是 (40,120), 取消 按钮的坐标是 (120,120) 坐标原点 (0,0) 在屏幕的左上角

93 5.3 界面布局 绝对布局 绝对布局示例在 main.xml 文件的完整代码 1. <?xml version="1.0" encoding="utf-8"?> <AbsoluteLayout 4. android:layout_width="fill_parent" 5. android:layout_height="fill_parent" 6. xmlns:android=" 7. <TextView 8. android:layout_x="40dip" 9. android:layout_y="40dip" 10. android:layout_height="wrap_content" 11. android:layout_width="wrap_content" 12. android:text=" 用户名 :"> 13. </TextView> 14. <EditText 15. android:layout_x="40dip" 16. android:layout_y="60dip"

94 5.3 界面布局 绝对布局 17. android:layout_height="wrap_content" 18. android:layout_width="150dip"> 19. </EditText> 20. <Button 21. android:layout_width="70dip" 22. android:layout_height="wrap_content" 23. android:layout_x="40dip" 24. android:layout_y="120dip" 25. android:text=" 确认 "> 26. </Button> 27. <Button 28. android:layout_width="70dip" 29. android:layout_height="wrap_content" 30. android:layout_x="120dip" 31. android:layout_y="120dip" 32. android:text=" 取消 "> 33. </Button> 34. </AbsoluteLayout>

95 5.4 菜单 菜单是应用程序中非常重要的组成部分, 能够在不占用界面空间的前提下, 为应用程序提供了统一的功能和设置界面, 并为程序开发人员提供了易于使用的编程接口 Android 系统支持三种菜单 选项菜单 (Option Menu) 子菜单 (Submenu) 快捷菜单 (Context Menu)

96 5.4 菜单 选项菜单 选项菜单是一种经常被使用的 Android 系统菜单打开方式 : 通过 菜单键 (MENU key) 打开选项菜单分类 图标菜单 (Icon Menu) 扩展菜单 (Expanded Menu)

97 5.4 菜单 选项菜单 图标菜单能够同时显示文字和图标的菜单, 最多支持 6 个子项 图标菜单不支持单选框和复选框

98 5.4 菜单 选项菜单 扩展菜单是在图标菜单子项多余 6 个时才出现, 通过点击图标菜单最后的子项 More 才能打开扩展菜单是垂直的列表型菜单 不能够显示图标 支持单选框和复选框

99 5.4 菜单 选项菜单 重载 Activity 的 oncreateoptionmenu() 函数, 才能够在 Android 应用程序中使用选项菜单 初次使用选项菜单时, 会调用 oncreateoptionmenu() 函数, 用来初始化菜单子项的相关内容 设置菜单子项自身的 ID 和组 ID 菜单子项显示的文字和图片等

100 5.4 菜单 选项菜单 1. final static int MENU_DOWNLOAD = Menu.FIRST; 2. final static int MENU_UPLOAD = Menu.FIRST+1; 4. public boolean oncreateoptionsmenu(menu menu){ 5. menu.add(0,menu_download,0," 下载设置 "); 6. menu.add(0,menu_upload,1," 上传设置 "); 7. return true; 8. } 第 1 行和第 2 行代码将菜单子项 ID 定义成静态常量, 并使用静态常量 Menu.FIRST( 整数类型, 值为 1) 定义第一个菜单子项, 以后的菜单子项仅需在 Menu.FIRST 增加相应的数值即可 第 7 行代码是 oncreateoptionsmenu() 函数返回值, 函数的返回值类型为布尔型 返回 true 将显示在函数中设置的菜单, 否则不能够显示菜单

101 5.4 菜单 选项菜单 第 4 行代码 Menu 对象作为一个参数被传递到函数内部, 因此在 oncreateoptionsmenu() 函数中, 用户可以使用 Menu 对象的 add() 函数添加菜单子项 add() 函数的语法 MenuItem android.view.menu.add(int groupid, int itemid, int order, CharSequence title) 第 1 个参数 groupid 是组 ID, 用以批量的对菜单子项进行处理和排序 第 2 关参数 itemid 是子项 ID, 是每一个菜单子项的唯一标识, 通过子项 ID 使应用程序能够定位到用户所选择的菜单子项 第 3 个参数 order 是定义菜单子项在选项菜单中的排列顺序 第 4 个参数 title 是菜单子项所显示的标题

102 5.4 菜单 选项菜单 添加菜单子项的图标和快捷键 : 使用 seticon() 函数和 setshortcut() 函数 1. menu.add(0,menu_download,0," 下载设置 ") 2..setIcon(R.drawable.download); 3..setShortcut(, d ); MENU_DOWNLOAD 菜单设置图标和快捷键的代码 第 2 行代码中使用了新的图像资源, 用户将需要使用的图像文件拷贝到 /res/drawable 目录下 setshortcut() 函数第一个参数是为数字键盘设定的快捷键 第二个参数是为全键盘设定的快捷键, 且不区分字母的大小写

103 5.4 菜单 选项菜单 重载 onprepareoptionsmenu() 函数, 能够动态的添加 删除菜单子项, 或修改菜单的标题 图标和可见性等内容 onprepareoptionsmenu() 函数的返回值的含义与 oncreateoptionsmenu() 函数相同 返回 true 则显示菜单 返回 false 则不显示菜单

104 5.4 菜单 选项菜单 下面的代码是在用户每次打开选项菜单时, 在菜单子项中显示用户打开该子项的次数 1. static int MenuUploadCounter = 0; 3. public boolean onprepareoptionsmenu(menu menu){ 4. MenuItem uploaditem = menu.finditem(menu_upload); 5. uploaditem.settitle(" 上传设置 :" +String.valueOf(MenuUploadCounter)); 6. return true; 7. } 第 1 行代码设置一个菜单子项的计数器, 用来统计用户打开 上传设置 子项的次数 第 4 行代码是通过将菜单子项的 ID 传递给 menu.finditem() 函数, 获取到菜单子项的对象 第 5 行代码是通过 MenuItem 的 settitle() 函数修改菜单标题

105 5.4 菜单 选项菜单 onoptionsitemselected () 函数能够处理菜单选择事件, 且该函数在每次点击菜单子项时都会被调用下面的代码说明了如何通过菜单子项的子项 ID 执行不同的操作 2. public boolean onoptionsitemselected(menuitem item){ 3. switch(item.getitemid()){ 4. case MENU_DOWNLOAD: 5. MenuDownlaodCounter++; 6. return true; 7. case MENU_UPLOAD: 8. MenuUploadCounter++; 9. return true; 10. } 11. return false; 12. }

106 5.4 菜单 选项菜单 onoptionsitemselected () 的返回值表示是否对菜单的选择事件进行处理 如果已经处理过则返回 true, 否则返回 false 第 2 行的 MenuItem.getItemId() 函数可以获取到被选择菜单子项的 ID 完整代码请参考 OptionsMenu 程序 程序运行后, 通过点击 菜单键 可以调出程序设计的两个菜单子项

107 5.4 菜单 子菜单 子菜单是能够显示更加详细信息的菜单子项菜单子项使用了浮动窗体的显示形式, 能够更好适应小屏幕的显示方式

108 5.4 菜单 子菜单 Android 系统的子菜单使用非常灵活, 可以在选项菜单或快捷菜单中使用子菜单, 有利于将相同或相似的菜单子项组织在一起, 便于显示和分类子菜单不支持嵌套子菜单的添加是使用 addsubmenu() 函数实现 1. SubMenu uploadmenu = (SubMenu) menu.addsubmenu(0,menu_upload,1," 上传设置 ").seticon(r.drawable.upload); 2. uploadmenu.setheadericon(r.drawable.upload); 3. uploadmenu.setheadertitle(" 上传参数设置 "); 4. uploadmenu.add(0,sub_menu_upload_a,0," 上传参数 A"); 5. uploadmenu.add(0,sub_menu_upload_b,0," 上传参数 B");

109 5.4 菜单 子菜单 第 1 行代码在 oncreateoptionsmenu() 函数传递的 menu 对象上调用 addsubmenu() 函数, 在选项菜单中添加一个菜单子项, 用户点击后可以打开子菜单 addsubmenu() 函数与选项菜单中使用过的 add() 函数支持相同的参数, 同样可以指定菜单子项的 ID 组 ID 和标题等参数, 并且能够通过 seticon() 函数菜单所显示的图标 第 2 行代码使用 setheadericon () 函数, 定义子菜单的图标 第 3 行定义子菜单的标题, 若不规定子菜单的标题, 子菜单将显示父菜单子项标题, 即第 1 行代码中 上传设置 第 4 行和第 5 行在子菜单中添加了两个菜单子项, 菜单子项的更新函数和选择事件处理函数, 仍然使用 onprepareoptionsmenu() 函数和 onoptionsitemselected () 函数

110 5.4 菜单 子菜单 以上小节的代码为基础, 将 上传设置 改为子菜单, 并在子菜单中添加 上传参数 A 和 上传参数 B 两个菜单子项 完整代码请参考 MySubMenu 程序, 运行结果如图

111 5.4 菜单 快捷菜单 快捷菜单同样采用了动窗体的显示方式, 与子菜单的实现方式相同, 但两种菜单的启动方式却截然不同启动方式 : 快捷菜单类似于普通桌面程序中的 右键菜单, 当用户点击界面元素超过 2 秒后, 将启动注册到该界面元素的快捷菜单使用方法 : 与使用选项菜单的方法非常相似, 需要重载 oncreatecontextmenu() 函数和 oncontextitemselected() 函数 oncreatecontextmenu() 函数主要用来添加快捷菜单所显示的标题 图标和菜单子项等内容

112 5.4 菜单 快捷菜单 选项菜单中的 oncreateoptionsmenu() 函数仅在选项菜单第一次启动时被调用一次快捷菜单的 oncreatecontextmenu() 函数每次启动时都会被调用一次 1. final static int CONTEXT_MENU_1 = Menu.FIRST; 2. final static int CONTEXT_MENU_2 = Menu.FIRST+1; 3. final static int CONTEXT_MENU_3 = Menu.FIRST+2; 5. public void oncreatecontextmenu(contextmenu menu, View v, ContextMenuInfo menuinfo){ 6. menu.setheadertitle(" 快捷菜单标题 "); 7. menu.add(0, CONTEXT_MENU_1, 0," 菜单子项 1"); 8. menu.add(0, CONTEXT_MENU_2, 1," 菜单子项 2"); 9. menu.add(0, CONTEXT_MENU_3, 2," 菜单子项 3"); 10. }

113 5.4 菜单 快捷菜单 ContextMenu 类支持 add() 函数 ( 代码第 7 行 ) 和 addsubmenu() 函数, 可以在快捷菜单中添加菜单子项和子菜单 第 5 行代码的 oncreatecontextmenu() 函数中的参数 第 1 个参数 menu 是需要显示的快捷菜单 第 2 个参数 v 是用户选择的界面元素 第 3 个参数 menuinfo 是所选择界面元素的额外信息

114 5.4 菜单 快捷菜单 菜单选择事件的处理需要重载 oncontextitemselected() 函数, 该函数在用户选择快捷菜单中的菜单子项后被调用, 与 onoptionsitemselected () 函数的使用方法基本相同

115 5.4 菜单 快捷菜单 2. public boolean oncontextitemselected(menuitem item){ 3. switch(item.getitemid()){ 4. case CONTEXT_MENU_1: 5. LabelView.setText(" 菜单子项 1"); 6. return true; 7. case CONTEXT_MENU_2: 8. LabelView.setText(" 菜单子项 2"); 9. return true; 10. case CONTEXT_MENU_3: 11. LabelView.setText(" 菜单子项 3"); 12. return true; 13. } 14. return false; 15. }

116 5.4 菜单 快捷菜单 使用 registerforcontextmenu() 函数, 将快捷菜单注册到界面控件上 ( 下方代码第 7 行 ) 这样, 用户在长时间点击该界面控件时, 便会启动快捷菜单 为了能够在界面上直接显示用户所选择快捷菜单的菜单子项, 在代码中引用了界面元素 TextView( 下方代码第 6 行 ), 通过更改 TextView 的显示内容 ( 上方代码第 5 8 和 11 行 ), 显示用户所选择的菜单子项 1. TextView LabelView = null; 3. public void oncreate(bundle savedinstancestate) { 4. super.oncreate(savedinstancestate); 5. setcontentview(r.layout.main); 6. LabelView = (TextView)findViewById(R.id.label); 7. registerforcontextmenu(labelview); 8. }

117 5.4 菜单 快捷菜单 下方代码是 /src/layout/main.xml 文件的部分内容, 第 1 行声明了 TextView 的 ID 为 label, 在上方代码的第 6 行中, 通过 R.id.label 将 ID 传递给 findviewbyid() 函数, 这样用户便能够引用该界面元素, 并能够修改该界面元素的显示内容 1. <TextView android:id="@+id/label" 2. android:layout_width="fill_parent" 3. android:layout_height="fill_parent" 4. android:text="@string/hello" 5. />

118 5.4 菜单 快捷菜单 需要注意的一点, 上方代码的第 2 行, 将 android:layout_width 设置为 fill_parent, 这样 TextView 将填充满父节点的所有剩余屏幕空间, 用户点击屏幕 TextView 下方任何位置都可以启动快捷菜单如果将 android:layout_width 设置为 wrap_content, 则用户必须准确点击 TextView 才能启动快捷菜单

119 5.4 菜单 快捷菜单 完整代码参考 MyContextMenu 程序, 运行结果如图所示

120 5.4 菜单 快捷菜单 在 Android 系统中, 菜单不仅能够在代码中定义, 而且可以像界面布局一样在 XML 文件中进行定义 使用 XML 文件定义界面菜单, 将代码与界面设计分类, 有助于简化代码的复杂程度, 并且更有利于界面的可视化 下面将快捷菜的示例程序 MyContextMen 改用 XML 实现, 新程序的工程名称为 MyXLMContoxtMenu

121 5.4 菜单 快捷菜单 首先需要创建保存菜单内容的 XML 文件 在 /src 目录下建立子目录 menu, 并在 menu 下建立 context_menu.xml 文件, 代码如下 1. <menu xmlns:android=" 2. <item 3. android:title=" 菜单子项 1"/> 4. <item 5. android:title=" 菜单子项 2"/> 6. <item 7. android:title=" 菜单子项 3"/> 8. </menu> 在描述菜单的 XML 文件中, 必须以 <menu> 标签 ( 代码第 1 行 ) 作为根节点,<item> 标签 ( 代码第 2 行 ) 用来描述菜单中的子项,<item> 标签可以通过嵌套实现子菜单的功能

122 5.4 菜单 快捷菜单 XML 菜单的显示结果如图所示

123 5.4 菜单 快捷菜单 在 XML 文件中定义菜单后, 在 oncreatecontextmenu() 函数中调用 inflater.inflate() 方法, 将 XML 资源文件传递给菜单对象 2. public void oncreatecontextmenu(contextmenu menu, 3. View v, ContextMenuInfo menuinfo){ 4. MenuInflater inflater = getmenuinflater(); 5. inflater.inflate(r.menu.context_menu, menu); 6. } 第 4 行代码中的 getmenuinflater() 为当前的 Activity 返回 MenuInflater 第 5 行代码将 XML 资源文件 R.menu.context_menu, 传递给 menu 这个快捷菜单对象

124 5.5 界面事件 在 Android 系统中, 存在多种界面事件, 如点击事件 触摸事件 焦点事件和菜单事件等等 在这些界面事件发生时,Android 界面框架调用界面控件的事件处理函数对事件进行处理

125 5.5 界面事件 按键事件 在 MVC 模型中, 控制器根据界面事件 (UI Event) 类型不同, 将事件传递给界面控件不同的事件处理函数 按键事件 (KeyEvent) 将传递给 onkey() 函数进行处理 触摸事件 (TouchEvent) 将传递给 ontouch() 函数进行处理

126 5.5 界面事件 按键事件 Android 系统界面事件的传递和处理遵循一的规则 如果界面控件设置了事件监听器, 则事件将先传递给事件监听器 如果界面控件没有设置事件监听器, 界面事件则会直接传递给界面控件的其他事件处理函数 即使界面控件设置了事件监听器, 界面事件也可以再次传递给其他事件处理函数

127 5.5 界面事件 按键事件 Android 系统界面事件的传递和处理遵循一的规则 是否继续传递事件给其他处理函数是由事件监听器处理函数的返回值决定的 如果监听器处理函数的返回值为 true, 表示该事件已经完成处理过程, 不需要其他处理函数参与处理过程, 这样事件就不会再继续进行传递 如果监听器处理函数的返回值为 false, 则表示该事件没有完成处理过程, 或需要其他处理函数捕获到该事件, 事件会被传递给其他的事件处理函数

128 5.5 界面事件 按键事件 以 EditText 控件中的按键事件为例, 说明 Android 系统界面事件传递和处理过程, 假设 EditText 控件已经设置了按键事件监听器 当用户按下键盘上的某个按键时, 控制器将产生 KeyEvent 按键事件 Android 系统会首先判断 EditText 控件是否设置了按键事件监听器, 因为 EditText 控件已经设置按键事件监听器 OnKeyListener, 所以按键事件先传递到监听器的事件处理函数 onkey() 中

129 5.5 界面事件 按键事件 事件能够继续传递给 EditText 控件的其他事件处理函数, 完全根据 onkey() 函数的返回值来确定 如果 onkey() 函数返回 false, 事件将继续传递, 这样 EditText 控件就可以捕获到该事件, 将按键的内容显示在 EditText 控件中 如果 onkey() 函数返回 true, 将阻止按键事件的继续传递, 这样 EditText 控件就不能够捕获到按键事件, 也就不能够将按键内容显示在 EditText 控件中

130 5.5 界面事件 按键事件 Android 界面框架支持对按键事件的监听, 并能够将按键事件的详细信息传递给处理函数为了处理控件的按键事件, 先需要设置按键事件的监听器, 并重载 onkey() 函数 示例代码如下 1. entrytext.setonkeylistener(new OnKeyListener(){ 3. public boolean onkey(view view, int keycode, KeyEvent keyevent) { 4. // 过程代码 5. return true/false; 6. }

131 5.5 界面事件 按键事件 第 1 行代码是设置控件的按键事件监听器 第 3 行代码的 onkey () 函数中的参数 第 1 个参数 view 表示产生按键事件的界面控件 第 2 个参数 keycode 表示按键代码 第 3 个参数 keyevent 则包含了事件的详细信息, 如按键的重复次数 硬件编码和按键标志等 第 5 行代码是 onkey () 函数的返回值 返回 true, 阻止事件传递 返回 false, 允许继续传递按键事件

132 5.5 界面事件 按键事件 KeyEventDemo 是一个说明如何处理按键事件的示例 KeyEventDemo 用户界面 最上方的 EditText 控件是输入字符的区域 中间的 CheckBox 控件用来控制 onkey() 函数的返回值 最下方的 TextView 控件用来显示按键事件的详细信息, 包括按键动作 按键代码 按键字符 Unicode 编码 重复次数 功能键状态 硬件编码和按键标志

133 5.5 界面事件 按键事件 界面的 XML 文件的代码如下 1. <EditText 2. android:layout_width="fill_parent" 3. android:layout_height="wrap_content"> 4. </EditText> 5. <CheckBox 6. android:layout_width="wrap_content" 7. android:layout_height="wrap_content" 8. android:text=" 返回 true, 阻止将按键事件传递给界面元素 " > 9. </CheckBox> 10. <TextView 11. android:layout_width="wrap_content" 12. android:layout_height="wrap_content" 13. android:text=" 按键事件信息 " > 14. </TextView>

134 5.5 界面事件 按键事件 在 EditText 中, 每当任何一个键子按下或抬起时, 都会引发按键事件为了能够使 EditText 处理按键事件, 需要使用 setonkeylistener () 函数在代码中设置按键事件监听器, 并在 onkey() 函数添加按键事件的处理过程 1. entrytext.setonkeylistener(new OnKeyListener(){ 3. public boolean onkey(view view, int keycode, KeyEvent keyevent) { 4. int metastate = keyevent.getmetastate(); 5. int unicodechar = keyevent.getunicodechar(); 6. String msg = "";

135 5.5 界面事件 按键事件 7. msg +=" 按键动作 :" + String.valueOf(keyEvent.getAction())+"\n"; 8. msg +=" 按键代码 :" + String.valueOf(keyCode)+"\n"; 9. msg +=" 按键字符 :" + (char)unicodechar+"\n"; 10. msg +="UNICODE:" + String.valueOf(unicodeChar)+"\n"; 11. msg +=" 重复次数 :" + String.valueOf(keyEvent.getRepeatCount())+"\n"; 12. msg +=" 功能键状态 :" + String.valueOf(metaState)+"\n"; 13. msg +=" 硬件编码 :" + String.valueOf(keyEvent.getScanCode())+"\n"; 14. msg +=" 按键标志 :" + String.valueOf(keyEvent.getFlags())+"\n"; 15. labelview.settext(msg); 16. if (checkbox.ischecked()) 17. return true; 18. else 19. return false; 20. }

136 5.5 界面事件 按键事件 第 4 行代码用来获取功能键状态 功能键包括左 Alt 键 右 Alt 键和 Shift 键, 当这三个功能键被按下时, 功能键代码 metastate 值分别为 和 65; 但没有功能键被按下时, 功能键代码 metastate 值分别为 0 第 5 行代码获取了按键的 Unicode 值, 在第 9 行中, 将 Unicode 转换为字符, 显示在 TextView 中 第 7 行代码获取了按键动作,0 表示按下按键,1 表示抬起按键 第 7 行代码获取按键的重复次数, 但按键被长时间按下时, 则会产生这个属性值 第 13 行代码获取了按键的硬件编码, 不同硬件设备的按键硬件编码都不相同, 因此该值一般用于调试 第 14 行获取了按键事件的标志符

137 5.5 界面事件 触摸事件 Android 界面框架支持对触摸事件的监听, 并能够将触摸事件的详细信息传递给处理函数需要设置触摸事件的监听器, 并重载 ontouch () 函数 1. touchview.setontouchlistener(new View.OnTouchListener(){ 3. public boolean ontouch(view v, MotionEvent event) { 4. // 过程代码 5. return true/false; 6. } 第 1 行代码是设置控件的触摸事件监听器 在代码第 3 行的 ontouch() 函数中, 第 1 个参数 View 表示产生触摸事件的界面控件 ; 第 2 个参数 MontionEvent 表示触摸事件的详细信息, 如产生时间 坐标和触点压力等 第 5 行是 ontouch() 函数的返回值

138 5.5 界面事件 触摸事件 TouchEventDemo 是一个说明如何处理触摸事件的示例 TouchEventDemo 用户界面 浅蓝色区域是可以接受触摸事件的区域, 用户可以在 Android 模拟器中使用鼠标点击屏幕, 用以模拟触摸手机屏幕 下方黑色区域是显示区域, 用来显示触摸事件的类型 相对坐标 绝对坐标 触点压力 触点尺寸和历史数据量等信息

139 5.5 界面事件 触摸事件 在用户界面中使用了线性布局, 并加入了 3 个 TextView 控件 第 1 个 TextView(ID 为 touch_area) 用来标识触摸事件的测试区域 第 2 个 TextView(ID 为 history_label) 用来显示触摸事件的历史数据量 第 3 个 TextView(ID 为 event_label) 用来触摸事件的详细信息, 包括类型 相对坐标 绝对坐标 触点压力和触点尺寸

140 5.5 界面事件 触摸事件 XML 文件的代码如下 1. <?xml version="1.0" encoding="utf-8"?> 2. <LinearLayout xmlns:android=" 3. android:orientation="vertical" 4. android:layout_width="fill_parent" 5. android:layout_height="fill_parent"> 6. <TextView 7. android:layout_width="fill_parent" 8. android:layout_height="300dip" 9. android:background="#0ff" 10. android:textcolor="#ffffff" 11. android:text=" 触摸事件测试区域 "> 12. </TextView>

141 5.5 界面事件 触摸事件 13. <TextView 14. android:layout_width="wrap_content" 15. android:layout_height="wrap_content" 16. android:text=" 历史数据量 :" > 17. </TextView> 18. <TextView 19. android:layout_width="wrap_content" 20. android:layout_height="wrap_content" 21. android:text=" 触摸事件 :" > 22. </TextView> 23. </LinearLayout> 第 9 行代码定义了 TextView 的背景颜色,#80A0FF 是颜色代码 第 10 行代码定义了 TextView 的字体颜色

142 5.5 界面事件 触摸事件 在代码中为了能够引用 XML 文件中声明的界面元素, 使用了下面的代码 1. TextView labelview = null; 2. labelview = (TextView)findViewById(R.id.event_label); 3. TextView touchview = (TextView)findViewById(R.id.touch_area); 4. final TextView historyview = (TextView)findViewById(R.id.history_label);

143 5.5 界面事件 触摸事件 当手指接触到触摸屏 在触摸屏上移动或离开触摸屏时, 分别会引发 ACTION_DOWN ACTION_UP 和 ACTION_MOVE 触摸事件, 而无论是哪种触摸事件, 都会调用 ontouch() 函数进行处理 事件类型包含在 ontouch() 函数的 MotionEvent 参数中, 可以通过 getaction() 函数获取到触摸事件的类型, 然后根据触摸事件的不同类型进行不同的处理 为了能够使屏幕最上方的 TextView 处理触摸事件, 需要使用 setontouchlistener() 函数在代码中设置触摸事件监听器, 并在 ontouch() 函数添加触摸事件的处理过程

144 5.5 界面事件 触摸事件 1. touchview.setontouchlistener(new View.OnTouchListener(){ 3. public boolean ontouch(view v, MotionEvent event) { 4. int action = event.getaction(); 5. switch (action) { 6. case (MotionEvent.ACTION_DOWN): 7. Display("ACTION_DOWN",event); 8. break; 9. case (MotionEvent.ACTION_UP): 10. int historysize = ProcessHistory(event); 11. historyview.settext(" 历史数据量 :"+historysize); 12. Display("ACTION_UP",event); 13. break; 14. case (MotionEvent.ACTION_MOVE): 15. Display("ACTION_MOVE",event); 16. break; 17. }

145 5.5 界面事件 触摸事件 18. return true; 19. } 20. }); 第 7 行代码的 Display() 是一个自定义函数, 主要用来显示触摸事件的详细信息, 函数的代码和含义将在后面进行介绍 第 10 行代码的 ProcessHistory() 也是一个自定义函数, 用来处理触摸事件的历史数据, 后面进行介绍 第 11 行代码是使用 TextView 显示历史数据的数量

146 5.5 界面事件 触摸事件 MotionEvent 参数中不仅有触摸事件的类型信息, 还触点的坐标信息, 获取方法是使用 getx() 和 gety() 函数, 这两个函数获取到的是触点相对于父界面元素的坐标信息 如果需要获取绝对坐标信息, 则可使用 getrawx() 和 getrawy() 函数 触点压力是一个介于 0 和 1 之间的浮点数, 用来表示用户对触摸屏施加压力的大小, 接近 0 表示压力较小, 接近 1 表示压力较大, 获取触摸事件触点压力的方式是调用 getpressure() 函数触点尺寸指用户接触触摸屏的接触点大小, 也是一个介于 0 和 1 之间的浮点数, 接近 0 表示尺寸较小, 接近 1 表示尺寸较大, 可以使用 getsize() 函数获取

147 5.5 界面事件 触摸事件 Display() 将 MotionEvent 参数参数中的事件信息提取出来, 并显示在用户界面上 1. private void Display(String eventtype, MotionEvent event){ 2. int x = (int)event.getx(); 3. int y = (int)event.gety(); 4. float pressure = event.getpressure(); 5. float size = event.getsize(); 6. int RawX = (int)event.getrawx(); 7. int RawY = (int)event.getrawy(); String msg = ""; 10. msg += " 事件类型 :" + eventtype + "\n"; 11. msg += " 相对坐标 :"+String.valueOf(x)+","+String.valueOf(y)+"\n"; 12. msg += " 绝对坐标 :"+String.valueOf(RawX)+","+String.valueOf(RawY)+"\n"; 13. msg += " 触点压力 :"+String.valueOf(pressure)+", "; 14. msg += " 触点尺寸 :"+String.valueOf(size)+"\n"; 15. labelview.settext(msg); 16. }

148 5.5 界面事件 触摸事件 一般情况下, 如果用户将手指放在触摸屏上, 但不移动, 然后抬起手指, 应先后产生 ACTION_DOWN 和 ACTION_UP 两个触摸事件但如果用户在屏幕上移动手指, 然后再抬起手指, 则会产生这样的事件序列 :ACTION_DOWN ACTION_MOVE ACTION_MOVE ACTION_MOVE ACTION_UP

149 5.5 界面事件 触摸事件 在手机上运行的应用程序, 效率是非常重要的 如果 Android 界面框架不能产生足够多的触摸事件, 则应用程序就不能够很精确的描绘触摸屏上的触摸轨迹如果 Android 界面框架产生了过多的触摸事件, 虽然能够满足精度的要求, 但却降低了应用程序效率 Android 界面框架使用了 打包 的解决方法 在触点移动速度较快时会产生大量的数据, 每经过一定的时间间隔便会产生一个 ACTION_MOVE 事件, 在这个事件中, 除了有当前触点的相关信息外, 还包含这段时间间隔内触点轨迹的历史数据信息, 这样既能够保持精度, 又不至于产生过多的触摸事件

150 5.5 界面事件 触摸事件 通常情况下, 在 ACTION_MOVE 的事件处理函数中, 都先处理历史数据, 然后再处理当前数据 1. private int ProcessHistory(MotionEvent event) 2. { 3. int historysize = event.gethistorysize(); 4. for (int i = 0; i < historysize; i++) { 5. long time = event.gethistoricaleventtime(i); 6. float pressure = event.gethistoricalpressure(i); 7. float x = event.gethistoricalx(i); 8. float y = event.gethistoricaly(i); 9. float size = event.gethistoricalsize(i); // 处理过程 } 13. return historysize; 14. }

151 5.5 界面事件 触摸事件 第 3 行代码获取了历史数据的数量 然后在第 4 行至 12 行中循环处理这些历史数据 第 5 行代码获取了历史事件的发生时间 第 6 行代码获取历史事件的触点压力 第 7 行和第 8 行代码获取历史事件的相对坐标 第 9 行获取历史事件的触点尺寸 在第 14 行返回历史数据的数量, 主要是用于界面显示 Android 模拟器并不支持触点压力和触点尺寸的模拟, 所有触点压力恒为 1.0, 触点尺寸恒为 0.0 同时 Android 模拟器上无法产生历史数据, 因此历史数据量一直显示为 0

152