《《用戶(hù)界面設(shè)計(jì)》PPT課件.ppt》由會(huì)員分享，可在線(xiàn)閱讀，更多相關(guān)《《用戶(hù)界面設(shè)計(jì)》PPT課件.ppt（42頁(yè)珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。

1、第五章 用戶(hù)界面設(shè)計(jì),哈爾濱工程大學(xué) 王向輝,,,本章學(xué)習(xí)目標(biāo)：,5.1 控件概述,什么是控件？,5.1 控件概述,APP Inventor的界面開(kāi)發(fā)采用可視化的方法，通過(guò)將界面控件拖住到界面編輯器內(nèi)，在設(shè)計(jì)區(qū)中直接生成界面效果圖，這些可以被拖拽的界面元素就是控件。,App Inventor的控件庫(kù)有豐富的界面控件，涵蓋了程序開(kāi)發(fā)的各個(gè)方面。控件庫(kù)細(xì)分為10個(gè)子類(lèi)，共51個(gè)控件。,5.1 控件概述,5.2 基礎(chǔ)控件,5.2 基礎(chǔ)控件,按鈕控件,5.2 基礎(chǔ)控件,5.2 基礎(chǔ)控件,按鈕支持的事件,5.2 基礎(chǔ)控件,標(biāo)簽控件,5.2 基礎(chǔ)控件,圖片控件,5.2 基礎(chǔ)控件,圖片控件雖然功能單一，但由

2、于屬性簡(jiǎn)單，易于使用，因此在應(yīng)用開(kāi)發(fā)過(guò)程中會(huì)經(jīng)常被使用到。 圖片的使用會(huì)極大的增強(qiáng) 應(yīng)用程序的美觀(guān)程度 巧妙的使用圖片是一項(xiàng)技巧,,,5.2 基礎(chǔ)控件,文本框控件,5.2 基礎(chǔ)控件,密碼框控件,5.2 基礎(chǔ)控件,需要注意的是，密碼框的密碼功能需要TinyDB數(shù)據(jù)庫(kù)控件的支持。當(dāng)輸入密碼時(shí)，密碼框控件需要在數(shù)據(jù)庫(kù)中查找相應(yīng)的密碼字段進(jìn)行比較。由于TinyDB不屬于可視化應(yīng)用的范疇，因此我們?cè)诤竺娴恼鹿?jié)再對(duì)這一功能進(jìn)行介紹。,5.2 基礎(chǔ)控件,復(fù)選框控件,5.2 基礎(chǔ)控件,選單控件,5.2 基礎(chǔ)控件,5.2 基礎(chǔ)控件,選單控件的獨(dú)有事件,5.2 基礎(chǔ)控件,選單

3、控件的具體選項(xiàng)列表可以在Designer或者模塊編輯器中進(jìn)行定義： 一種方法是編輯控件屬性中的ElementsFromString屬性，采用逗號(hào)分隔開(kāi)不同的表項(xiàng)（例如choice 1, choice 2, choice 3這樣的形式） 另一種方法是將Elements屬性在模塊編輯器中和列表元件相關(guān)聯(lián)。,5.2 基礎(chǔ)控件,時(shí)鐘控件,5.2 基礎(chǔ)控件,時(shí)鐘控件的屬性,5.2 基礎(chǔ)控件,時(shí)鐘控件并不是可視化組件，但是由于其在許多應(yīng)用當(dāng)中都有著非常重要的作用，所以被分類(lèi)在基本控件當(dāng)中。使用時(shí)鐘控件的目的是建立一個(gè)計(jì)時(shí)器，并在固定時(shí)間間隔的情況下觸發(fā)事件。時(shí)鐘控件同樣也可以執(zhí)行多種不同的基于時(shí)間單位的操

4、作。,5.3 布局控件,5.3 布局控件,AppInventor提供了水平布局（HorizontalArrangement）、垂直布局（VerticalArrangement）、表格布局（TableArrangement）三種布局方式。 布局控件唯一的作用就是安排其它可視化控件在界面上的構(gòu)圖，本身并不具有特別的功能，所以布局控件都沒(méi)有對(duì)應(yīng)的控件事件，也不能在應(yīng)用當(dāng)中響應(yīng)點(diǎn)擊或拖動(dòng)等操作。即使如此，布局控件仍然是幾乎所有應(yīng)用當(dāng)中都不可缺少的組成部分，在提升應(yīng)用的視覺(jué)效果和美觀(guān)程度方面有著不可或缺的地位。,5.3 布局控件,在將布局控件添加進(jìn)窗口之后，便可以將欲按此布局安置的控件直接拖動(dòng)到布局控件

5、上，即可以完成布局 可以看到，兩個(gè)按鈕在水平布局控件框內(nèi)呈水平分布狀態(tài)，我們可以試著再往里面添加更多的控件，但是不管添加多少控件，只要是在水平布局控件框內(nèi)，這些控件就都會(huì)呈水平分布。 垂直布局方式的屬性和使用方法和水平布局方式相類(lèi)似，這里不再重復(fù)介紹。垂直布局分布的效果是使得所有拖動(dòng)進(jìn)其中的控件呈垂直布局分布。,5.3 布局控件,需要注意的是，布局方式控件本身可以進(jìn)行相互嵌套，例如我們可以添加一個(gè)垂直布局控件，然后在里面添加若干個(gè)水平布局控件，這樣幾個(gè)水平布局控件在其中就會(huì)呈垂直分布，而水平布局控件內(nèi)部的控件則分別呈水平分布。,5.3 布局控件,表格式布局方式和前兩種布局方式的主要不同之處在于

6、，它可以預(yù)先設(shè)定表格的行列數(shù)，來(lái)設(shè)計(jì)特定的布局方式： 在很多時(shí)候，表格式布局方式往往可以替代水平布局方式和垂直布局方式，后二者更多的是在一些相對(duì)簡(jiǎn)單的構(gòu)圖場(chǎng)合得到應(yīng)用。,5.3 布局控件,需要注意的是，上述三種布局控件的功能僅對(duì)界面顯示的可視化控件起作用，并沒(méi)有其它的功能。但是即使這樣，布局控件在模塊編輯器當(dāng)中仍然有著相關(guān)的屬性，這是和AppInventor的控件屬性設(shè)置思想相一致的，即，所有控件的可編輯屬性都可以在界面編輯器界面和BlockerEditor編程兩個(gè)途徑下進(jìn)行。,5.4 媒體控件,5.4 媒體控件,錄像控件的功能是利用手機(jī)的攝像頭進(jìn)行錄制視頻的工作，并且在錄制視頻之后提取視頻的

7、名稱(chēng)供如視頻播放器等其它控件的調(diào)用，或是用在自身的AfterRecording事件當(dāng)中作為參數(shù)處理。 行為RecordVideo的功能是開(kāi)始用錄像控件進(jìn)行錄像，而事件AfterRecording在錄像結(jié)束時(shí)自動(dòng)執(zhí)行，提示視頻錄制完畢并提供視頻片段存放的相應(yīng)路徑。,5.4 媒體控件,選圖工具的功能是從手機(jī)的相冊(cè)中選取圖片。選圖工具在界面上的顯示外觀(guān)和按鈕類(lèi)似，當(dāng)用戶(hù)點(diǎn)擊選圖工具時(shí)，就會(huì)調(diào)出手機(jī)的相冊(cè)，供用戶(hù)選擇。在用戶(hù)選擇了圖片之后，控件會(huì)采用一串表示圖片路徑的字符串賦予ImagePath屬性。選取的圖片可以用于其它控件的使用，如設(shè)置背景圖片等等。 選圖工具所特有的功能屬性是ImagePath，

8、此屬性的含義是用戶(hù)所選擇的圖片，即用一串字符串給出用戶(hù)所選圖片的地址。,5.4 媒體控件,音頻播放器控件的主要功能是播放視頻文件，同時(shí)也有控制手機(jī)振動(dòng)器的功能。音頻播放器屬于非可視化控件，并不在界面內(nèi)顯示。播放的媒體文件的名稱(chēng)可以通過(guò)界面編輯器或者模塊編輯器在Source屬性中進(jìn)行定義。,5.4 媒體控件,視頻播放器控件的功能是用于播放視頻文件。視頻播放器在界面上顯示為一個(gè)矩形，當(dāng)用戶(hù)點(diǎn)擊矩形區(qū)域時(shí)，就會(huì)彈出媒體控制選項(xiàng)，包括播放/暫停、快進(jìn)、快退等等。也可以通過(guò)控制控件內(nèi)Start、Pause、SeekTo等行為來(lái)控制播放的進(jìn)度。 視頻播放器的屬性包括Source和Visible，前者設(shè)定視

9、頻播放器所播放的視頻文件，后者則控制視頻播放器是否可見(jiàn)。,5.5 社交控件,時(shí)至今日，手機(jī)的用途早已不僅僅局限于單純的通訊領(lǐng)域，但是通信功能仍然是手機(jī)最基本也是最核心的功能。AppInventor的社交控件模塊支持對(duì)手機(jī)的電話(huà)、號(hào)碼薄和短信、郵件等功能進(jìn)行管理的調(diào)用，并應(yīng)用在各種不同的通信類(lèi)應(yīng)用當(dāng)中。,,,5.5 社交控件,通訊錄控件的功能是讓用戶(hù)從手機(jī)的通訊錄中選取項(xiàng)目。通訊錄控件在界面上顯示效果與按鈕相同，如圖5.51所示： 當(dāng)用戶(hù)點(diǎn)擊通訊錄控件時(shí)，將列出具體的通訊對(duì)象的表單供用戶(hù)進(jìn)行選擇。在用戶(hù)選擇了一個(gè)聯(lián)系對(duì)象之后，將會(huì)自動(dòng)設(shè)定控件的部分主要屬性，,5.5 社交控件,郵件控件供用戶(hù)輸入

10、聯(lián)系人的電子郵件地址。控件內(nèi)容的初值和用戶(hù)輸入后的值在Text屬性中進(jìn)行修改。如果Text屬性初值為空，則將Hint屬性里的內(nèi)容在文本框里進(jìn)行灰顯以起到對(duì)用戶(hù)的提示作用。,5.5 社交控件,郵件控件在界面上的顯示效果類(lèi)似于文本框，郵件選取控件僅有獲取焦點(diǎn)和失去焦點(diǎn)兩種事件，也沒(méi)有控件行為。除Text和Hint屬性之外，其余用于設(shè)置外觀(guān)效果等的屬性和文本框控件類(lèi)似，這里不再重復(fù)敘述。 由于郵件控件本身并沒(méi)有檢驗(yàn)輸入內(nèi)容是否完成的功能，所以通常和按鈕按鍵聯(lián)立使用，即在輸入之后通過(guò)按鈕來(lái)觸發(fā)其它事件等等。,5.5 社交控件,撥號(hào)控件是一個(gè)非可視化控件，用于進(jìn)行手機(jī)的撥號(hào)功能，即對(duì)PhoneNumbe

11、r屬性中設(shè)定的號(hào)碼進(jìn)行撥號(hào)。此設(shè)定值可以在界面編輯器或者模塊編輯器中進(jìn)行定義和修改。另外，通過(guò)控件的MakePhoneCall事件也可以令應(yīng)用按照程序觸發(fā)的方式進(jìn)行撥號(hào)。 由于是非可視化控件，撥號(hào)控件沒(méi)有除PhoneNumber之外的其它可編輯屬性。撥號(hào)控件唯一的行為是MakePhoneCall()，當(dāng)執(zhí)行此行為時(shí)，控件將會(huì)控制手機(jī)對(duì)PhoneNumber屬性中定義的號(hào)碼進(jìn)行撥號(hào)。,5.5 社交控件,號(hào)碼選取控件的作用是允許用戶(hù)從手機(jī)的聯(lián)系人電話(huà)號(hào)碼表里選取一個(gè)電話(huà)號(hào)碼。當(dāng)用戶(hù)點(diǎn)擊號(hào)碼選取控件時(shí)，將列出聯(lián)系對(duì)象的電話(huà)號(hào)碼列表供用戶(hù)選擇。號(hào)碼選取控件的顯示效果、屬性、事件、工作方式和內(nèi)容均與通訊

12、錄控件相同，這里不再重復(fù)敘述。二者主要的區(qū)別在于，通訊錄控件列出的是通訊錄里聯(lián)系對(duì)象的表單列表，而號(hào)碼選取控件則只列出聯(lián)系對(duì)象的電話(huà)號(hào)碼列表。,5.5 社交控件,短信息控件主要實(shí)現(xiàn)的是控制手機(jī)的短信息進(jìn)行發(fā)送和接收等功能。 應(yīng)用如果包含此控件的話(huà)，將會(huì)帶有接收短信息的功能，此功能只要該應(yīng)用安裝在了手機(jī)上就會(huì)觸發(fā)，即使應(yīng)用正處于后臺(tái)，甚至沒(méi)有處于運(yùn)行中也是一樣。如果應(yīng)用處于后臺(tái)運(yùn)行時(shí)手機(jī)接收到了短信息，手機(jī)就會(huì)在通知欄內(nèi)顯示一條通知，選擇此通知就會(huì)自動(dòng)將該應(yīng)用切換到前臺(tái)。當(dāng)此控件接收到短信時(shí)將會(huì)觸發(fā)MessageReceived事件，并且提取發(fā)送方的號(hào)碼和短信息內(nèi)容。,5.5 社交控件,通過(guò)編輯

13、模塊編輯器內(nèi)的ReceivingEnabled屬性，可以讓?xiě)?yīng)用忽略接收到的短信息。ReceiveEnable屬性如果被設(shè)置為1，則不會(huì)接收短信；如果設(shè)置為2，則當(dāng)應(yīng)用運(yùn)行時(shí)才會(huì)接收短信；而如果將此屬性設(shè)置為3，則當(dāng)應(yīng)用運(yùn)行時(shí)接收短信，而應(yīng)用未運(yùn)行的時(shí)候接收到的短信將被送入隊(duì)列并對(duì)用戶(hù)顯示提示信息。 短信息控件發(fā)送短信的方式是當(dāng)SendMessage行為觸發(fā)的時(shí)候，將Message屬性中定義的內(nèi)容作為短信息的正文發(fā)送給PhoneNumber屬性中定義的電話(huà)號(hào)碼。 通過(guò)修改PhoneNumber屬性可以改變發(fā)送短信目標(biāo)的電話(huà)號(hào)碼，具體的設(shè)置方式和撥號(hào)控件類(lèi)似：可以直接在界面編輯器內(nèi)進(jìn)行修改，也可以在模塊編輯器內(nèi)通過(guò)將數(shù)字型字符串賦值給該屬性的方式進(jìn)行定義，不能包含標(biāo)點(diǎn)符號(hào)和空格，等等。另外，短信息控件也可以和號(hào)碼選取控件組合使用：使用號(hào)碼選取控件從手機(jī)的電話(huà)薄中選取號(hào)碼，然后用短信息控件對(duì)此號(hào)碼發(fā)送短信。,