《用户界面设计》PPT课件.ppt

1、第五章 用户界面设计,哈尔滨工程大学 王向辉,本章学习目标：,5.1 控件概述,什么是控件？,5.1 控件概述,APP Inventor的界面开发采用可视化的方法，通过将界面控件拖住到界面编辑器内，在设计区中直接生成界面效果图，这些可以被拖拽的界面元素就是控件。,App Inventor的控件库有丰富的界面控件，涵盖了程序开发的各个方面。控件库细分为10个子类，共51个控件。,5.1 控件概述,5.2 基础控件,5.2 基础控件,按钮控件,5.2 基础控件,5.2 基础控件,按钮支持的事件,5.2 基础控件,标签控件,5.2 基础控件,图片控件,5.2 基础控件,图片控件虽然功能单一，但由于属

2、性简单，易于使用，因此在应用开发过程中会经常被使用到。 图片的使用会极大的增强 应用程序的美观程度 巧妙的使用图片是一项技巧,5.2 基础控件,文本框控件,5.2 基础控件,密码框控件,5.2 基础控件,需要注意的是，密码框的密码功能需要TinyDB数据库控件的支持。当输入密码时，密码框控件需要在数据库中查找相应的密码字段进行比较。由于TinyDB不属于可视化应用的范畴，因此我们在后面的章节再对这一功能进行介绍。,5.2 基础控件,复选框控件,5.2 基础控件,选单控件,5.2 基础控件,5.2 基础控件,选单控件的独有事件,5.2 基础控件,选单控件的具体选项列表可以在Designer或者模

3、块编辑器中进行定义： 一种方法是编辑控件属性中的ElementsFromString属性，采用逗号分隔开不同的表项（例如choice 1, choice 2, choice 3这样的形式） 另一种方法是将Elements属性在模块编辑器中和列表元件相关联。,5.2 基础控件,时钟控件,5.2 基础控件,时钟控件的属性,5.2 基础控件,时钟控件并不是可视化组件，但是由于其在许多应用当中都有着非常重要的作用，所以被分类在基本控件当中。使用时钟控件的目的是建立一个计时器，并在固定时间间隔的情况下触发事件。时钟控件同样也可以执行多种不同的基于时间单位的操作。,5.3 布局控件,5.3 布局控件,Ap

4、pInventor提供了水平布局（HorizontalArrangement）、垂直布局（VerticalArrangement）、表格布局（TableArrangement）三种布局方式。 布局控件唯一的作用就是安排其它可视化控件在界面上的构图，本身并不具有特别的功能，所以布局控件都没有对应的控件事件，也不能在应用当中响应点击或拖动等操作。即使如此，布局控件仍然是几乎所有应用当中都不可缺少的组成部分，在提升应用的视觉效果和美观程度方面有着不可或缺的地位。,5.3 布局控件,在将布局控件添加进窗口之后，便可以将欲按此布局安置的控件直接拖动到布局控件上，即可以完成布局 可以看到，两个按钮在水平布

5、局控件框内呈水平分布状态，我们可以试着再往里面添加更多的控件，但是不管添加多少控件，只要是在水平布局控件框内，这些控件就都会呈水平分布。 垂直布局方式的属性和使用方法和水平布局方式相类似，这里不再重复介绍。垂直布局分布的效果是使得所有拖动进其中的控件呈垂直布局分布。,5.3 布局控件,需要注意的是，布局方式控件本身可以进行相互嵌套，例如我们可以添加一个垂直布局控件，然后在里面添加若干个水平布局控件，这样几个水平布局控件在其中就会呈垂直分布，而水平布局控件内部的控件则分别呈水平分布。,5.3 布局控件,表格式布局方式和前两种布局方式的主要不同之处在于，它可以预先设定表格的行列数，来设计特定的布局

6、方式： 在很多时候，表格式布局方式往往可以替代水平布局方式和垂直布局方式，后二者更多的是在一些相对简单的构图场合得到应用。,5.3 布局控件,需要注意的是，上述三种布局控件的功能仅对界面显示的可视化控件起作用，并没有其它的功能。但是即使这样，布局控件在模块编辑器当中仍然有着相关的属性，这是和AppInventor的控件属性设置思想相一致的，即，所有控件的可编辑属性都可以在界面编辑器界面和BlockerEditor编程两个途径下进行。,5.4 媒体控件,5.4 媒体控件,录像控件的功能是利用手机的摄像头进行录制视频的工作，并且在录制视频之后提取视频的名称供如视频播放器等其它控件的调用，或是用在自

7、身的AfterRecording事件当中作为参数处理。 行为RecordVideo的功能是开始用录像控件进行录像，而事件AfterRecording在录像结束时自动执行，提示视频录制完毕并提供视频片段存放的相应路径。,5.4 媒体控件,选图工具的功能是从手机的相册中选取图片。选图工具在界面上的显示外观和按钮类似，当用户点击选图工具时，就会调出手机的相册，供用户选择。在用户选择了图片之后，控件会采用一串表示图片路径的字符串赋予ImagePath属性。选取的图片可以用于其它控件的使用，如设置背景图片等等。 选图工具所特有的功能属性是ImagePath，此属性的含义是用户所选择的图片，即用一串字符串

8、给出用户所选图片的地址。,5.4 媒体控件,音频播放器控件的主要功能是播放视频文件，同时也有控制手机振动器的功能。音频播放器属于非可视化控件，并不在界面内显示。播放的媒体文件的名称可以通过界面编辑器或者模块编辑器在Source属性中进行定义。,5.4 媒体控件,视频播放器控件的功能是用于播放视频文件。视频播放器在界面上显示为一个矩形，当用户点击矩形区域时，就会弹出媒体控制选项，包括播放/暂停、快进、快退等等。也可以通过控制控件内Start、Pause、SeekTo等行为来控制播放的进度。 视频播放器的属性包括Source和Visible，前者设定视频播放器所播放的视频文件，后者则控制视频播放器

9、是否可见。,5.5 社交控件,时至今日，手机的用途早已不仅仅局限于单纯的通讯领域，但是通信功能仍然是手机最基本也是最核心的功能。AppInventor的社交控件模块支持对手机的电话、号码薄和短信、邮件等功能进行管理的调用，并应用在各种不同的通信类应用当中。,5.5 社交控件,通讯录控件的功能是让用户从手机的通讯录中选取项目。通讯录控件在界面上显示效果与按钮相同，如图5.51所示： 当用户点击通讯录控件时，将列出具体的通讯对象的表单供用户进行选择。在用户选择了一个联系对象之后，将会自动设定控件的部分主要属性，,5.5 社交控件,邮件控件供用户输入联系人的电子邮件地址。控件内容的初值和用户输入后的

10、值在Text属性中进行修改。如果Text属性初值为空，则将Hint属性里的内容在文本框里进行灰显以起到对用户的提示作用。,5.5 社交控件,邮件控件在界面上的显示效果类似于文本框，邮件选取控件仅有获取焦点和失去焦点两种事件，也没有控件行为。除Text和Hint属性之外，其余用于设置外观效果等的属性和文本框控件类似，这里不再重复叙述。 由于邮件控件本身并没有检验输入内容是否完成的功能，所以通常和按钮按键联立使用，即在输入之后通过按钮来触发其它事件等等。,5.5 社交控件,拨号控件是一个非可视化控件，用于进行手机的拨号功能，即对PhoneNumber属性中设定的号码进行拨号。此设定值可以在界面编辑

11、器或者模块编辑器中进行定义和修改。另外，通过控件的MakePhoneCall事件也可以令应用按照程序触发的方式进行拨号。 由于是非可视化控件，拨号控件没有除PhoneNumber之外的其它可编辑属性。拨号控件唯一的行为是MakePhoneCall()，当执行此行为时，控件将会控制手机对PhoneNumber属性中定义的号码进行拨号。,5.5 社交控件,号码选取控件的作用是允许用户从手机的联系人电话号码表里选取一个电话号码。当用户点击号码选取控件时，将列出联系对象的电话号码列表供用户选择。号码选取控件的显示效果、属性、事件、工作方式和内容均与通讯录控件相同，这里不再重复叙述。二者主要的区别在于，

12、通讯录控件列出的是通讯录里联系对象的表单列表，而号码选取控件则只列出联系对象的电话号码列表。,5.5 社交控件,短信息控件主要实现的是控制手机的短信息进行发送和接收等功能。 应用如果包含此控件的话，将会带有接收短信息的功能，此功能只要该应用安装在了手机上就会触发，即使应用正处于后台，甚至没有处于运行中也是一样。如果应用处于后台运行时手机接收到了短信息，手机就会在通知栏内显示一条通知，选择此通知就会自动将该应用切换到前台。当此控件接收到短信时将会触发MessageReceived事件，并且提取发送方的号码和短信息内容。,5.5 社交控件,通过编辑模块编辑器内的ReceivingEnabled属性，可以让应用忽略接收到的短信息。ReceiveEnable属性如果被设置为1，则不会接收短信；如果设置为2，则当应用运行时才会接收短信；而如果将此属性设置为3，则当应用运行时接收短信，而应用未运行的时候接收到的短信将被送入队列并对用户显示提示信息。 短信息控件发送短信的方式是当SendMessage行为触发的时候，将Message属性中定义的内容作为短信息的正文发