4_组件-用户界面

College of Mathematics and Computer Science, Hunan Normal University 瞿绍军
湖南师范大学数学与计算机科学学院

College of Mathematics and Computer Science, Hunan Normal University 
在AI中组件分为可视组件和非可视组件。  可视组件指当App运行后能够看见的组件，如按钮、标签和文本输入框等。可视组件常用于设计App 的界面。  非可视组件在应用中发挥特定作用，但不会显示在用户界面中,如传感器组件和声音组件等。  组件一般都有属性和行为，通过设置每个组件的属性值和对事件响应的行为，组合形成独特的App应用。组件

College of Mathematics and Computer Science, Hunan Normal University

College of Mathematics and Computer Science, Hunan Normal University 
Screen相当于手机的屏幕，是进行用户界面设计的地方。它是一个容器，上面可以放置组件面板中的组件。 Screen

College of Mathematics and Computer Science, Hunan Normal University Screen

应用说明（AboutScreen）：对App的说明，不会显示在用户界面上。  水平对齐（AlignHorizontal）：屏幕中放置的组件在水平方向上的对齐方式。包括居左、居中、居右三种方式。  垂直对齐（AlignVertical）：屏幕中放置的组件在垂直方向上的对齐方式。包括居上、居中、居下三种方式。  AppName：App应用程序名称。导出项目源文件和apk 文件时的名称。  背景颜色（BackgroundColor）：Screen的背景颜色。可以单击下面颜色框选取适合的颜色。 Screen

背景图片（BackgroundImage）：用图片作为 Screen的背景。  关屏动画（CloseScreenAnimation）：关闭当前屏幕时的过渡效果，  图标（Icon）：apk程序安装到手机后，在手机里显示的程序图标。  开屏动画（OpenScreenAnimation）：打开该屏幕时的过渡效果。 Screen

屏幕方向（ScreenOrientation）：设定屏幕显示的方向。包括不设方向（默认）、锁定竖屏（只能竖屏方式）、锁定横屏（只能横屏方式）、自动感应（利用方向传感器自动设置屏幕方向）和用户设定（根据用户手机设置显示）。  允许滚动（Scrollable）：设置是否允许屏幕进行滚动。  状态栏显示（ShowStatusBar）：设置是否显示状态栏。 Screen

标题（Title）：设置屏幕上端标题栏显示内容。  标题展示（TitleVisible）：设置是否显示屏幕上端标题栏。  版本编号（VersionCode）：设置程序版本号。  版本名称（VersionName）：设置程序版本名称。 Screen

College of Mathematics and Computer Science, Hunan Normal University Screen事件

点击设备上的返回键时触发事件。  错误发生时引起的事件。  屏幕初始化时触发事件。  当另外的屏幕关闭时，返回到当前屏幕触发事件。  屏幕方向改变时触发事件。 Screen事件

College of Mathematics and Computer Science, Hunan Normal University 用户界面

用户通过触摸按钮来完成应用中的某些动作。按钮可以感知用户的触摸；可以改变按钮的某些外观特性。按钮Button

College of Mathematics and Computer Science, Hunan Normal University 按钮Button
启用如果选中该属性, 则用户触摸按钮时将引起某些动作。

College of Mathematics and Computer Science, Hunan Normal University 按钮
显示交互效果：如果按钮设置了背景图，如果选中，点击时按钮颜色变浅；否则按钮无变化。

College of Mathematics and Computer Science, Hunan Normal University 按钮

College of Mathematics and Computer Science, Hunan Normal University 按钮事件

被点击（Click）：用户按下并松开按钮时被触发。  获得焦点（GotFocus）：按钮获得焦点时触发，即当指示光标移动到按钮上面时，可以单击到按钮时触发。  被慢点击（LongClick）：用户按下按钮时触发。  失去焦点（LostFocus）：按钮失去焦点时触发。  被按压（TouchDown）：按钮被按下时触发。  被松开（TouchUp）：按钮被松开时触发。按钮事件

文本输入框是供用户输入文字的组件。文本输入框TextBox

提示（Hint）：出现在文本框中的浅色文字，提示用户需要输入的内容。只有当文字的属性值为空时才显示提示信息。  允许多行（MultiLine）：如果选中，则文本输入框支持多行输入。在输入文本过程中按回车键实现换行。  仅限数字（NumbersOnly）：如果选中，文本输入框将只允许输入数字。包括小数点及前置的“-”(负号)，这些限定只适用于键盘输入。无论仅限数字属性是否选中，在程序中可以通过为文本输入框设定文字属性的内容，设定文本输入框的内容为任何字符。文本输入框属性

College of Mathematics and Computer Science, Hunan Normal University 文本输入框TextBox

单击按钮后将文本输入框中的文本大小变成原来大小的2倍，颜色修改为红色。按钮和文本输入框实例

运行效果按钮和文本输入框实例

代码按钮和文本输入框实例

该可视组件用于显示文字元素组成的列表。列表的内容可以用元素字串属性来设定，也可以在编程视图中使用元素块来定义。列表显示框ListView

元素字串（ ElementsFromString）：用一系列“,”(英文逗号)分隔的字符串来设置列表项。如：“北京,上海, 广州”，构成三个列表项。列表显示框ListView

College of Mathematics and Computer Science, Hunan Normal University 列表显示框ListView

当用户点击某个列表项时将其列表项显示到标签上。列表显示框实例

College of Mathematics and Computer Science, Hunan Normal University 列表显示框实例

日期选择框是一个按钮，点击后将弹出窗口，允许用户从中选择日期并设定日期。设计视图中组件属性和按钮一样。  在逻辑设计视图中,日期选择框还获取属性值的块。分别是取得日期选择框最后选择日期后的日期实例，天，月份，月份的名称和年。日期选择框DatePicker

College of Mathematics and Computer Science, Hunan Normal University 日期选择框DatePicker

事件日期选择框DatePicker

完成日期设定（AfterDateSet）：当用户在组件窗口中选中日期后触发该事件。  获得焦点（GotFocus）：表明指针移至按钮上，并可以进行点击。  失去焦点（LostFocus）：表明指针从按钮上移出，不再能点击到组件。  被按压（TouchDown）：用户按下按钮时，触发该事件。  被松开（TouchUp）：用户松开按钮时，触发该事件。日期选择框DatePicker

方法  打开日期选择框弹出窗口，相当于点击了日期选择框按钮，在弹出窗口中允许用户从中选择日期并设定日期。  设置日期选择框中显示的日期，此时并没有将设置的日期设定为系统日期。需要年、月、日三个参数，月份1-12，日期1-31。  通过日期实例设置日期选择框中的日期。日期选择框DatePicker

当用户点击“调用设置日期”按钮时，设置日期选择框的日期为你设定的日期（如20150316），并将当前日期显示到“标签1”；然后当用户单击日期选择框设定好日期后，将日期和时刻分别显示到 “标签1”和“标签2”；此外添加日期选择框“被按压”和“被松开”事件，分别实现改变“标签 1”的背景颜色。日期选择框实例

College of Mathematics and Computer Science, Hunan Normal University 日期选择框实例

效果日期选择框实例

College of Mathematics and Computer Science, Hunan Normal University 日期选择框实例

时间选择框是用来供用户选择和设定时间的，其用法与日期选择框类似时间选择框TimePicker

College of Mathematics and Computer Science, Hunan Normal University 时间选择框TimePicker

复选框是供用户在两种状态中选择其中一种,如果选中了复选框，则复选框的选中属性为true,否则为 false。当用户触摸复选框时，将触发相应的事件。复选框

College of Mathematics and Computer Science, Hunan Normal University 复选框

状态被改变（Changed）：当用户触摸并松开复选框的时候触发动作。  获得焦点（GotFocus）：当复选框获得焦点的时候触发动作。  失去焦点（LostFocus）：当复选框失去焦点时触发动作。复选框CheckBox

例：运行效果复选框实例

界面设计复选框实例

代码复选框实例

标签用来显示文字，在程序运行时，只能通过代码修改其内容，用户不能直接输入内容进行修改。其属性与文本输入框类似。标签Label

College of Mathematics and Computer Science, Hunan Normal University 标签Label

在用户界面上显示为一个按钮，当用户点击时，会显示一个列表供用户选择。列表中的文字可以在设计或编程视窗中设置：将选项字符属性设置为一个逗号分隔的字符串(如选项一, 选项二, 选项三)；或者在编程视窗中，将组件的元素字串(Elements)属性设置为一个列表。如果选中了搜索 (ShowFilterBar)属性，将为列表添加搜索功能。列表选择框ListPicker

College of Mathematics and Computer Science, Hunan Normal University 列表选择框ListPicker

选择完成（AfterPicking）：当用户在列表选择框中选中了某项时，触发该事件。此时选中项及选中项索引两个属性都被赋值。  准备选择（BeforePicking）：当用户点击了列表选择框按钮时触发该事件，此时列表选择框尚未展开。列表选择框ListPicker

设…元素…为：从列表中提取列表元素，后接列表型变量。用来在程序中动态设置列表中的选择项内容。设…元素字串…为：后面接逗号分隔的文本，用来在程序中动态设置列表中的选择项内容。

当单击按钮组件时，动态的修改列表选择框中选择项的内容为“北京，上海，长沙”，当用户从列表选择框中选择完成后将用户选择的选择项内容显示到标签上。列表选择框实例

College of Mathematics and Computer Science, Hunan Normal University 列表选择框实例

运行效果列表选择框实例

College of Mathematics and Computer Science, Hunan Normal University 列表选择框实例

滑动条由一个进度条和一个可拖动的滑块组成。可以左右拖动滑块来设定滑块位置，拖动滑块将触发 “位置变化”事件，并记录滑块位置。滑块位置可以动态更新其他组件的某些属性，如改变输入框中文字的大小或球的半径等。滑动条Slider

College of Mathematics and Computer Science, Hunan Normal University 滑动条Slider

实现通过拖动红色、绿色、蓝色三个滑动条滑块的位置动态改变标签文本的颜色。使用滑动条动态改变标签文本的颜色

College of Mathematics and Computer Science, Hunan Normal University 使用滑动条动态改变标签文本的颜
色

密码输入框供用户输入密码，将隐藏用户输入的文字内容(以圆点代替字符)。  密码输入框与普通的文字输入框组件相同，只是不显示用户输入的字符。可以通过文字属性来设置或读取两种输入框中的文字内容，如果文字属性为空，可以设置提示属性，来提醒用户需要输入的内容。提示文字的颜色较浅。密码输入框PasswordTextBox

College of Mathematics and Computer Science, Hunan Normal University 密码输入框PasswordTextBox

用于显示警告、消息以及临时性的通知，是非可视组件。并通过下述方法构建一次交互：  显示消息对话框：显示一条消息及一个按钮，用户需要点击按钮才能让它关闭。  显示选择对话框：显示一条消息及两个按钮，如“ 是”和“否”，用户可以选择点击其中一个作为对系统的响应。点击按钮之后将触发“完成选择”事件。对话框Notifier

显示文本输入对话框: 用户可以输入文字来响应系统的提示，输入之后将触发“输入完成”事件。  显示警告：先是一段临时性的警告，稍后将自动关闭。  记录错误：向Android日志中记录一条错误信息。  记录信息：向Android日志中记录一条信息。  记录警告：向Android日志中记录一条警告信息。对话框Notifier

College of Mathematics and Computer Science, Hunan Normal University 对话框Notifier

用户在选择对话框中做出选择后，触发该事件。用户在输入对话框中完成输入时，触发该事件。

显示进度对话框对话框Notifier

用于显示图像的组件图像Image

College of Mathematics and Computer Science, Hunan Normal University 图像Image
动画【Animation】这是一种功能有限的动画，通过定义几种动作来实现简单的动画：图像缓慢向右滑入(ScrollRightSlow)、向右滑入(ScrollRight)、快速向右滑入(ScrollRightFast)、缓慢向左滑入 (ScrollLeftSlow)、向左滑入 (ScrollLeft)、快速向左滑入 (ScrollLeftFast)以及停止 (Stop)。

点击该组件时将弹出列表窗口。列表元素可以在组件设计及逻辑设计中通过元素字串属性进行设置，该字串由一组逗号分隔的字符串组成（如选项1,选项2,选项3)，也可以在编程视图中将元素属性设置为某个列表。下拉框Spinner

College of Mathematics and Computer Science, Hunan Normal University 下拉框Spinner

College of Mathematics and Computer Science, Hunan Normal University 下拉框使用-选择民族

该组件用于浏览网页，可以在组件设计或逻辑设计中设置默认的访问地址(URL)，可以设定视窗内的链接是否可以响应用户的点击而转到新的页面。用户可以在视窗中填写表单。  本视窗并非浏览器，当点击设备上的“返回”键时，将退出应用，而不是循历史记录回到上个页面。 Web浏览框WebViewer

College of Mathematics and Computer Science, Hunan Normal University Web浏览框WebViewer

允许链接跳转（FollowLinks）：决定Web浏览框中的链接是否响应用户的点击而跳转到相应的页面。如果选中，可以使用后退及前进方法来访问历史记录。  首页地址（HomeUrl）：Web浏览框打开时初始访问的页面地址。如果设置，将自动加载页面。  IgnoreSslErrors：决定是否忽略SSL错误。设置为“ 真”则忽略错误。使用这个去接受来自网站的自签名证书。 Web浏览框WebViewer

开启授权提示（PromptforPermission）：如果选中，当用户在访问定位API时，将提示用户授权访问定位API；如果不选中，则假定用户已经授权访问。  允许使用位置信息（UsesLocation）：是否允许应用使用JavaScript定位API权限。此属性只能在组件设计视窗中设定。  显示状态（Visible）：指定组件在屏幕上是否可见。值为“真”可见，值为假“隐藏”。 Web浏览框WebViewer

当前页标题（CurrentPageTitle）：当前浏览框中的页面标题。  当前页URL地址（CurrentUrl）：当前浏览框中页面的URL地址，如果页面转向后续链接时，其值不再是首页URL。  页面交换字串（WebViewString）：可以实现应用和运行在Web浏览框中页面的JavaScript代码之间的通信。 Web浏览框WebViewer

College of Mathematics and Computer Science, Hunan Normal University Web浏览框WebViewer

检查可否后退（CanGoBack）：如果在历史记录列表中，Web浏览框可以返回，则返回值为真。  检查可否前进（CanGoForward）：如果在历史记录列表中，Web浏览框可以前进，则返回值为真。  清楚缓存(ClearCaches)：清楚Web浏览框缓存信息。  清除位置信息（ClearLocations）：清除存储的位置许可权限。 Web浏览框WebViewer

后退（GoBack）：返回到历史记录列表的前一页。如果不存在前一页面，则什么都不做。  前进（GoForward）：前进到历史记录列表中的下一页，如果不存在下一页面，则什么都不做。  回首页（GoHome）：加载首页，当首页的URL地址发生变化时，将自动加载页面。  访问网页（GoToUrl）：访问指定URL地址的网页。 Web浏览框WebViewer

设计一个简单的网页浏览器，可以输入URL、浏览网页、前进和后退等功能。简单网页浏览器

College of Mathematics and Computer Science, Hunan Normal University 简单网页浏览器

实验1：设计一个学生学籍信息注册界面，尽量把所有组件都用上。  实验2：开发调色板，实现自己定制颜色。实验

4_组件-用户界面

4_组件-用户界面

More Decks by powerhope

Featured

Transcript