AppInventor2組件應(yīng)用在AppInventor2的組件面板中有用戶界面（User界面布局（layout）、多媒體（media）、繪畫與動(dòng)畫（drawingandAnimation）、傳感器（sensors）等九種組件，它們分為可視組件和非可視組件兩類。用戶界面組件（UserInterface）用戶界面組件是App開發(fā)過程中使用頻率最高的組件。它包括按鈕（Button）、標(biāo)簽（Label）、圖像（Image）、文本輸入框（TextBox）、日期選擇框（DatePicker）等組件，如圖2.36所示。這些組件大部分都是可視組件。它們有許多共同的屬性，如：背景顏色、字體、字號(hào)、高度、寬度等。這些屬性的設(shè)置方法也基本相同。按鈕（Button）按鈕是程序中最常用的組件，用戶通過點(diǎn)擊按鈕完成程序交互。按鈕支持的事件包括：被點(diǎn)擊（Click）、被按壓（LongClick）、獲得焦點(diǎn)（GotFocus）、失去焦點(diǎn)（LostFocus）等，如圖2.37所示。會(huì)變顏色的按鈕本例題只使用到一個(gè)按鈕組件。當(dāng)“按鈕1”被點(diǎn)擊時(shí)，改變“按鈕1”的背景顏色。顏色的改變需要用到“模塊”菜單中的“內(nèi)置塊”→“顏色”-“合成顏色”模塊，如圖2.38所示。合成顏色模塊包括R、G、B三種顏色值和透明度四個(gè)參數(shù)。本程序只設(shè)置了R、G、B三種顏色，它們的分配范圍是0-255，例如：純紅為R值255，G值0，B值0，RGB圖像中使用這三種顏色就可以混合出許多種不同的顏色。為了使按鈕的顏色呈現(xiàn)不同的變化，程序在設(shè)置R、G、B三種顏色的值時(shí)使用了隨機(jī)數(shù)。隨機(jī)數(shù)是在一定范圍內(nèi)隨機(jī)產(chǎn)生的數(shù)，并且在這個(gè)范圍內(nèi)得到的每一個(gè)數(shù)的機(jī)會(huì)是一樣的。它就如同我們擲硬幣正反面或是擲骰子所產(chǎn)生的結(jié)果一樣，在本程序中我們?cè)O(shè)定隨機(jī)數(shù)的范圍為0-255，組件屬性設(shè)置如下表。標(biāo)簽（Label）、文本輸入框（TextBox）標(biāo)簽是開發(fā)者顯示信息給用戶的組件，在程序運(yùn)行時(shí)，標(biāo)簽的信息只能通過代碼修改，標(biāo)簽只有屬性沒有事件。文本輸入框是開發(fā)者供用戶輸入信息的組件。雖然它也可以用來顯示提示信息，但主要功能還是為用戶輸入信息使用的。文本輸入框支持“獲取焦點(diǎn)”和“失去焦點(diǎn)”事件。標(biāo)簽和文本輸入框的基本屬性設(shè)置與按鈕類似。用戶登錄，設(shè)計(jì)如圖2.40所示的項(xiàng)目。本項(xiàng)目界面包括兩個(gè)標(biāo)簽、兩個(gè)水平布局、一個(gè)文本輸入框、兩個(gè)按鈕。當(dāng)用戶在“文本輸入框1”輸入姓名并點(diǎn)擊“確定”按鈕后，“標(biāo)簽2”將顯示“某某同學(xué)，歡迎你?！弊謽?。當(dāng)用戶點(diǎn)擊“退出”按鈕后，程序?qū)⒆詣?dòng)退出，所用的組件屬性設(shè)置如下表。這段代碼中，點(diǎn)擊“按鈕1”后“標(biāo)簽2”顯示的文本信息，是由“內(nèi)置塊”→“文本”中的“合并文本（join）”塊將“文本輸入框1”的信息和變量"welcome"中的信息合并得到的。文本塊是與字符操作相關(guān)的模塊，它可以實(shí)現(xiàn)對(duì)文本進(jìn)行編輯、合并、長(zhǎng)度測(cè)量、刪除、轉(zhuǎn)換、查找等功能，如圖2.42所示本例中使用了“合并文本”塊將兩段文本進(jìn)行了合并。本例題中“按鈕2”被點(diǎn)擊后，程序通過執(zhí)行“內(nèi)置塊”-“控制”中的“退出程序”模塊實(shí)現(xiàn)了程序的退出。圖像是顯示圖片的組件。圖像只有屬性沒有事件。設(shè)計(jì)石頭、剪刀、布游戲程序。分析石頭、剪刀、布是我們小時(shí)候經(jīng)常玩的游戲。這個(gè)程序使用按鈕和圖像組件簡(jiǎn)單模擬計(jì)算機(jī)出招的過程。程序的界面包括一個(gè)圖像組件、一個(gè)按鈕組件，如圖2.43所示。本程序需要使用圖片素材bu.png.jd.png，st.png，logo.png（bu.png是出示“布”的圖片，id.png是出示“剪刀”的圖片，st.png是出示“石頭”的圖片，logo.png為標(biāo)題圖片），組件屬性設(shè)置如下表。這段代碼中，我們使用了列表。列表的功能類似于其他編程語言中的數(shù)組。根據(jù)程序的需要，列表的元素可以動(dòng)態(tài)地增減。我們通過列表名和索引值來訪問列表中的元素。程序最開始，首先聲明變量“pic”為空列表。并且在“screenl”初始化事件里將變量“pic”創(chuàng)建為一維列表，列表元素分別是字符串“jd.png”、字符串“st.png”、字符串“bu.png”。在“按鈕1”被點(diǎn)擊事件中，隨機(jī)選取列表“pic”中的元素作為“圖像1”圖片的名稱，實(shí)現(xiàn)石頭、剪刀、布的隨機(jī)變化。多媒體（media）AI2支持的多媒體組件包括照相機(jī)（Camera）、錄音機(jī)（SoundRecorder）、音頻播放器（Player）、攝像機(jī)（Camcorder）和視頻播放器（VideoPlayer）等。照相機(jī)（Camera）照相機(jī)是非可視組件，它調(diào)用Android設(shè)備的照相機(jī)功能拍攝圖片。照相機(jī)的屬性、事件和方法如圖2.45所示。照相機(jī)應(yīng)用實(shí)例，設(shè)計(jì)如圖2.46照相機(jī)應(yīng)用程序。程序通過點(diǎn)擊“拍攝”按鈕，調(diào)用系統(tǒng)照相機(jī)進(jìn)行拍照點(diǎn)擊“選擇圖像”按鈕，即可獲取設(shè)備中的圖像資源，并顯示在“圖像1”中，所用到的組件屬性設(shè)置如下表。音效播放器（Sound）音效播放器同音頻播放器一樣是用來播放音頻文件的音效播放器，更適合播放短小的音頻文件。我們?cè)谇斑叺摹皭鄞蛘泻舻腡om貓”實(shí)例中使用了這個(gè)組件。通過設(shè)置音效播放器最小間隔（MinimumInterval）屬性，我們可以保證鈴音不會(huì)出現(xiàn)重疊效果。它的方法包括：暫停（Pause）播放（Play）、恢復(fù)（Resume）、停止（Stop）、震動(dòng)（Vibrate等，如圖2.48所示。音效播放器一般用于播放音效和震動(dòng)手機(jī)，如圖2.49所示。需要注意的是，音效播放器在播放聲音之前應(yīng)提前向服務(wù)器上傳音頻文件素材，并根據(jù)素材的時(shí)長(zhǎng)設(shè)置最小時(shí)間間隔。錄音機(jī)（SoundRecorder）錄音機(jī)組件是通過啟動(dòng)設(shè)備中的錄音機(jī)功能來實(shí)現(xiàn)錄音，它是非可視組件。錄音機(jī)的事件包括完成錄制時(shí)（AfterSoundRecorded）、開始錄制（StartedRecording）、停止錄制（StoppedRecording）。方法有開始（Start）和停止（Stop）。錄音機(jī)只有錄制結(jié)果文件一個(gè)屬性，用戶可以通過設(shè)置該屬性，獲得錄制聲音文件的文件名和保存路徑。如果不設(shè)置該屬性，則錄音機(jī)將自行創(chuàng)建和保存，創(chuàng)建保存的地址一般為“內(nèi)部存儲(chǔ)/MyDocuments/Recordings”下，也可以通過“完成錄制時(shí)”事件去查詢存儲(chǔ)位置。如圖2.50所示。一般情況下錄音機(jī)和音頻播放器配合實(shí)現(xiàn)錄制并播放聲音的功能。錄音機(jī)組件調(diào)用的是系統(tǒng)錄音，因此沒有在程序中指定存，儲(chǔ)位置時(shí)，錄音文件會(huì)存儲(chǔ)在系統(tǒng)錄音機(jī)默認(rèn)的存儲(chǔ)路徑中，我們可以通過“完成錄音”事件的“聲音”參數(shù)查找到它。設(shè)計(jì)如圖2.51所示的錄音應(yīng)用程序。本程序的功能是通過調(diào)用系統(tǒng)錄音機(jī)和音頻播放器實(shí)現(xiàn)的。通過點(diǎn)擊“開始錄音”按鈕，調(diào)用系統(tǒng)錄音機(jī)進(jìn)行錄音，點(diǎn)擊“停止錄音”按鈕，則停止錄音，點(diǎn)擊“播放錄音”按鈕，使用音頻播放器播放錄制好的聲音，所用到的組件屬性設(shè)置如下表。代碼說明：這段代碼中“按鈕1”被點(diǎn)擊事件里調(diào)用錄音機(jī)組件開始錄音，“按鈕2”被點(diǎn)擊事件里調(diào)用錄音機(jī)組件停止錄音?！颁浺魴C(jī)1”錄制完成事件將錄音地址賦值給全局變量RecordSound，最后在“按鈕3”的點(diǎn)擊事件中設(shè)置“音頻播放器1”的源文件為全局變量RecordSound所存儲(chǔ)的錄音地址，并且調(diào)用音頻播放器播放聲音。繪畫與動(dòng)畫（DrawingandAnimation）畫布（Canvas）畫布是一種可在其上面繪圖的組件，它的二維坐標(biāo)系的坐標(biāo)原點(diǎn)在畫布的左上角。畫布內(nèi)指定的坐標(biāo)（X，Y）點(diǎn)，X代表該點(diǎn)距離畫布左邊界的像素?cái)?shù)；Y代表該點(diǎn)距離畫布上邊界的像素?cái)?shù)，X、Y都取正值，這與直角坐標(biāo)系不同，如圖2.53所示。畫布除了高度、寬度這些常見的屬性外，還支持更改背景圖片、設(shè)置畫筆顏色等屬性。畫布的事件有被拖動(dòng)事件（Dragged）、被觸碰事件（Touched）、被劃動(dòng)事件（Flung）、被按壓事件（TouchDown）、被松開事件（TouchUp）等，如圖2.54所示。畫布的拖動(dòng)事件是手指在移動(dòng)過程中持續(xù)產(chǎn)生，這一事件可以跟蹤手指的移動(dòng)軌跡。該事件提供三個(gè)坐標(biāo)，分別是移動(dòng)開始“起點(diǎn)坐標(biāo)點(diǎn)”（startX和startY）、事件產(chǎn)生時(shí)的“當(dāng)前坐標(biāo)點(diǎn)”（currentX和currentY）、相鄰事件產(chǎn)生時(shí)的前點(diǎn)坐標(biāo)點(diǎn)（prevx和prevY）。利用拖動(dòng)事件在畫布添加畫線功能添加畫布并設(shè)置它的高度、寬度為充滿。根據(jù)兩點(diǎn)確定一線的原理，我們?cè)O(shè)（X1，Y1）為起點(diǎn)，（X2，Y2）為終點(diǎn)畫線。當(dāng)手指在畫布上拖動(dòng)時(shí)，拖動(dòng)事件將被調(diào)用很多次：手指的每次移動(dòng)都會(huì)繪制出一個(gè)微小線段，從前點(diǎn)坐標(biāo)prevx，prevy到當(dāng)前坐標(biāo)currentX，currentY，因此，用前點(diǎn)坐標(biāo)prevx與prevY分別作為畫布畫線的參數(shù)X1和Y1；用當(dāng)前坐標(biāo)currentX與currentY分別作為畫布畫線的參數(shù)X2和Y2，即可形成有趣的畫筆功能程序代碼如圖2.55所示。圖像精靈（ImageSprite）與球形精靈（Ball）圖像精靈是一種可以在畫布中自由移動(dòng)的圖像組件。球形精靈是一種特殊的圖像精靈。圖像精靈與球形精靈都只能放置在畫布中。它們可以響應(yīng)觸摸和拖拽等事件，并且可以與畫布邊界產(chǎn)生交互，精靈和精靈之間同樣也可以。球形精靈和圖像精靈的差，別在于用戶可以通過設(shè)置圖像屬性來改變后者的外觀，而球形精靈只能改變顏色和半徑。對(duì)于圖像精靈與球形精靈來說，我們可以通過設(shè)置屬性來改變它們的速度、坐標(biāo)、方向等。利用畫布被劃動(dòng)事件控制小球的滾動(dòng)添加畫布并設(shè)置它的高度、寬度為充滿。添加一個(gè)球形精靈到畫布中，時(shí)間間隔1毫秒，速度為0，半徑為20，畫布的被劃動(dòng)事件只有手指在屏幕上快速劃動(dòng)的時(shí)候才會(huì)產(chǎn)生。被劃動(dòng)事件中提供劃動(dòng)起點(diǎn)的（x，y）坐標(biāo)、劃動(dòng)方向（0到360度）、速度、速度在軸和Y軸的分量。我們可以將獲取到的這些參數(shù)賦值給小球精靈，完成控制小球的程序，程序代碼如圖2.56所示。傳感器組件（SensorsComponents）傳感器組件主要是用來感知手機(jī)的位置、方向、加速度等參數(shù)變化的。A12針對(duì)一般手機(jī)的常用傳感器提供了計(jì)時(shí)器、方向傳感器、加速度傳感器等組件。計(jì)時(shí)器（Clock）AI2的計(jì)時(shí)器是通過調(diào)用設(shè)備內(nèi)部的時(shí)鐘實(shí)現(xiàn)的。計(jì)時(shí)器的屬性包括：一直計(jì)時(shí)（TimerAlwaysFires）：選中該事件，計(jì)時(shí)將和應(yīng)用程序一起執(zhí)行和結(jié)束。啟用計(jì)時(shí)（TimerEnabled）：該事件被選中，則開始進(jìn)行計(jì)時(shí)。計(jì)時(shí)間隔（TimerInterval）：為計(jì)時(shí)器設(shè)定時(shí)間間隔，單位為“毫秒”，1秒=1000毫秒。計(jì)時(shí)器（Clock）只有“到達(dá)計(jì)時(shí)點(diǎn)”一個(gè)事件，計(jì)時(shí)器啟動(dòng)后，每過一個(gè)“時(shí)間間隔”就會(huì)觸發(fā)該事件一次。就如同我們的心跳，每次心跳都是一個(gè)“到達(dá)計(jì)時(shí)點(diǎn)”事件?！坝?jì)時(shí)間隔”屬性就相當(dāng)于兩次心跳的間歇時(shí)間。編寫時(shí)鐘應(yīng)用程序，利用計(jì)時(shí)器組件獲取系統(tǒng)時(shí)間，設(shè)計(jì)界面如圖2.57所示。分析此題主要是將“計(jì)時(shí)器1"調(diào)用到的系統(tǒng)當(dāng)前時(shí)間轉(zhuǎn)化為小時(shí)、分鐘、秒，并賦值給h，m，s三個(gè)標(biāo)簽顯示出來，所用到的組件屬性設(shè)置如下表。設(shè)計(jì)3秒倒計(jì)時(shí)應(yīng)用程序通過計(jì)時(shí)器與變量、圖像組件配合實(shí)現(xiàn)倒計(jì)時(shí)3秒的程序。程序的界面包括一個(gè)圖像組件、一個(gè)按鈕組件、一個(gè)計(jì)時(shí)器組件，如圖2.59所示。要顯示3、2、1、0四個(gè)數(shù)字，程序需要1.png、2.png.3.png.0.png四張圖片素材（注釋：1.png是顯示“1”的圖片，2.png是顯示“2”的圖片，3.png顯示“3”的圖片，0.png是顯示“0”圖片）。代碼說明：計(jì)時(shí)的開始與結(jié)束主要是通過控制計(jì)時(shí)器的“啟用計(jì)時(shí)”屬性實(shí)現(xiàn)的。設(shè)計(jì)界面時(shí)，先將“計(jì)時(shí)器1"的屬性面板中“啟用計(jì)時(shí)”勾選項(xiàng)取消，并且設(shè)定時(shí)間間隔為1000毫秒。當(dāng)用戶點(diǎn)擊“按鈕1”時(shí)再啟用計(jì)時(shí)器計(jì)時(shí)事件。通過計(jì)時(shí)器“達(dá)，到計(jì)時(shí)點(diǎn)”事件與變量n的累減配合實(shí)現(xiàn)倒計(jì)時(shí)。倒計(jì)時(shí)的效果，是每隔一秒用“圖像1”的圖片屬性顯示一張數(shù)字圖片。變量n不僅控制倒計(jì)時(shí)時(shí)間，同時(shí)它與".png"合并文本一起也作為“圖像1”屬性所需的參數(shù)。加速度傳感器（AccelerometerSensor）加速度傳感器用于測(cè)量x、y、z三個(gè)維度的加速度分量的近似值和檢測(cè)設(shè)備的搖晃。測(cè)量結(jié)果使用加速度單位米/秒“（m/s）”表示。xAccel：手機(jī)靜止水平時(shí)值為0，左側(cè)抬高值為正，右側(cè)抬高值為負(fù)。yAccel：手機(jī)靜止水平值為0，底部抬高值為正，頂部抬高值為負(fù)。zAccel：當(dāng)設(shè)備屏幕朝上水平靜止值為-9.8（地球重力加速度），垂直于地面時(shí)值為0，屏幕朝下時(shí)值為9.8。