《App-Inventor移動(dòng)終端應(yīng)用開(kāi)發(fā)》教學(xué)課件06音樂(lè)播放器

模塊6音樂(lè)播放器6.1項(xiàng)目描述6.2項(xiàng)目組件設(shè)計(jì)6.3項(xiàng)目邏輯設(shè)計(jì)6.4項(xiàng)目測(cè)試6.1項(xiàng)目描述音樂(lè)播放器的主要功能是實(shí)現(xiàn)對(duì)音樂(lè)的播放、暫停等管理，其運(yùn)行界面如圖6-1所示。說(shuō)明：音樂(lè)播放器的運(yùn)行界面由音樂(lè)列表、播放操作按鈕和音量調(diào)節(jié)三部分組成。直接單擊音樂(lè)列表中的某一項(xiàng)，將播放該選項(xiàng)對(duì)應(yīng)的音樂(lè)。圖6-1音樂(lè)播放器的運(yùn)行界面6.2項(xiàng)目組件設(shè)計(jì)6.2.1準(zhǔn)備素材為實(shí)現(xiàn)音樂(lè)播放器的界面效果，本項(xiàng)目需要一些圖片素材和音頻素材，如圖6-2所示。圖片素材主要用作應(yīng)用圖標(biāo)、項(xiàng)目界面背景和操作按鈕圖片。icon.pngbutton_play.pngbutton_pause.pngbutton_previous.pngbutton_next.pngbackground.jpgmusic1.mp3music2.mp3music3.mp3圖6-2音樂(lè)播放器所需的圖片素材和音頻素材6.2項(xiàng)目組件設(shè)計(jì)6.2.2設(shè)計(jì)界面登錄開(kāi)發(fā)平臺(tái)，新建一個(gè)項(xiàng)目，項(xiàng)目名稱為MusicPlayer。在設(shè)計(jì)視窗中，將項(xiàng)目素材上傳到開(kāi)發(fā)平臺(tái)。本項(xiàng)目用到的組件包括用戶界面組件中的按鈕、標(biāo)簽、列表顯示框和滑動(dòng)條，界面布局中的水平布局，多媒體組件中的音頻播放器，以及傳感器組件中的加速度傳感器。其中，按鈕用于控制音樂(lè)的播放，滑動(dòng)條用于調(diào)節(jié)播放音量，音頻播放器用于播放音樂(lè)，加速度傳感器用于切換音樂(lè)。音樂(lè)播放器的組件列表如圖6-3所示。將這些組件從組件面板添加到工作面板中，并按照教材中音樂(lè)播放器組件屬性進(jìn)行設(shè)置。音樂(lè)播放器工作面板的設(shè)計(jì)效果如圖6-4所示。說(shuō)明：對(duì)于表格中沒(méi)有說(shuō)明的組件屬性均采用默認(rèn)屬性值。6.2項(xiàng)目組件設(shè)計(jì)6.2.2設(shè)計(jì)界面圖6-3音樂(lè)播放器的組件列表圖6-4音樂(lè)播放器工作面板的設(shè)計(jì)效果6.3項(xiàng)目邏輯設(shè)計(jì)圖6-5音樂(lè)播放器的項(xiàng)目設(shè)計(jì)流程音樂(lè)播放器的項(xiàng)目設(shè)計(jì)流程如圖6-5所示。6.3項(xiàng)目邏輯設(shè)計(jì)6.3.1編程模塊在項(xiàng)目設(shè)計(jì)界面中單擊“邏輯設(shè)計(jì)”按鈕，切換到編程視窗。本項(xiàng)目用到的編程模塊有內(nèi)置塊中的變量、文本、列表、控制、邏輯、數(shù)學(xué)、過(guò)程和各組件的事件處理模塊、調(diào)用過(guò)程模塊、屬性設(shè)置及取值模塊，部分編程模塊見(jiàn)教材。6.3項(xiàng)目邏輯設(shè)計(jì)6.3.2功能實(shí)現(xiàn)1.初始化變量本項(xiàng)目定義了2個(gè)全局變量，如圖6-6所示。“音樂(lè)列表索引”用來(lái)記錄當(dāng)前播放的音樂(lè)在音樂(lè)列表中的索引值，“音樂(lè)列表”為本項(xiàng)目用到的所有音頻文件列表。圖6-6音樂(lè)播放器定義的全局變量6.3項(xiàng)目邏輯設(shè)計(jì)6.3.2功能實(shí)現(xiàn)2.定義過(guò)程在本項(xiàng)目中，無(wú)論是初始化屏幕，還是播放音樂(lè)或晃動(dòng)手機(jī)切換音樂(lè)，都需要為音樂(lè)播放器設(shè)置其源文件屬性；無(wú)論是單擊“下一首”按鈕，還是晃動(dòng)手機(jī)，音樂(lè)列表索引值都會(huì)增加，音樂(lè)播放器都將播放下一首音樂(lè)。定義“設(shè)置音樂(lè)播放器的源文件”過(guò)程的代碼模塊如圖6-7所示。定義“播放下一首”過(guò)程的代碼模塊如圖6-8所示。在播放音樂(lè)時(shí)，音樂(lè)列表索引值每增加1，音頻播放器就開(kāi)始播放音樂(lè)列表中的下一首音樂(lè)。如果音樂(lè)列表索引值大于音樂(lè)列表長(zhǎng)度，則將其值設(shè)置為1，從而實(shí)現(xiàn)音樂(lè)列表中音樂(lè)的循環(huán)播放。6.3項(xiàng)目邏輯設(shè)計(jì)6.3.2功能實(shí)現(xiàn)圖6-7定義“設(shè)置音頻播放器的源文件”過(guò)程的代碼模塊圖6-8定義“播放下一首”過(guò)程的代碼模塊6.3項(xiàng)目邏輯設(shè)計(jì)6.3.2功能實(shí)現(xiàn)3.初始化屏幕在屏幕初始化時(shí)，要將音樂(lè)列表顯示在列表顯示框中，并設(shè)置音頻播放器的源文件，如圖6-9所示。圖6-9初始化屏幕的代碼模塊6.3項(xiàng)目邏輯設(shè)計(jì)6.3.2功能實(shí)現(xiàn)4.播放或暫停播放音樂(lè)單擊播放按鈕，音頻播放器開(kāi)始播放音樂(lè)，其圖標(biāo)將更換為，并啟用加速度傳感器，這時(shí)的應(yīng)用可以響應(yīng)并處理手機(jī)晃動(dòng)事件。再次單擊該按鈕，音頻播放器將暫停播放音樂(lè)，圖標(biāo)更換回，將加速度傳感器的“啟用”屬性設(shè)置為假，這時(shí)晃動(dòng)手機(jī)將無(wú)法切換播放音樂(lè)。單擊“按鈕_播放”按鈕的事件處理模塊如圖6-10所示。圖6-10單擊“按鈕_播放”按鈕的事件處理模塊6.3項(xiàng)目邏輯設(shè)計(jì)6.3.2功能實(shí)現(xiàn)5.播放列表選中項(xiàng)音樂(lè)單擊“列表顯示框”音樂(lè)列表中的某一首音樂(lè)，可以觸發(fā)列表顯示框選擇完成事件，這時(shí)音頻播放器應(yīng)播放選中項(xiàng)對(duì)應(yīng)的音樂(lè)。其事件處理模塊如圖6-11所示。圖6-11播放列表選中項(xiàng)音樂(lè)的事件處理模塊6.3項(xiàng)目邏輯設(shè)計(jì)6.3.2功能實(shí)現(xiàn)6.播放上一首音樂(lè)單擊“按鈕_上一首”按鈕的事件處理模塊如圖6-12所示。在播放音樂(lè)時(shí)，音樂(lè)列表索引值每減少1，音頻播放器就開(kāi)始播放音樂(lè)列表中的上一首音樂(lè)。如果音樂(lè)列表索引值小于1，則將其值設(shè)置為音樂(lè)列表長(zhǎng)度，從而實(shí)現(xiàn)音樂(lè)列表中音樂(lè)的循環(huán)播放。圖6-12單擊“按鈕_上一首”按鈕的事件處理模塊6.3項(xiàng)目邏輯設(shè)計(jì)6.3.2功能實(shí)現(xiàn)7.播放下一首音樂(lè)單擊“按鈕_下一首”按鈕時(shí)，直接調(diào)用“播放下一首”過(guò)程，如圖6-13所示。8.處理手機(jī)晃動(dòng)事件晃動(dòng)手機(jī)時(shí)，若加速度傳感器“啟用”屬性為真，則觸發(fā)加速度傳感器的被晃動(dòng)事件，將播放音樂(lè)切換為音樂(lè)列表中的下一首音樂(lè)，調(diào)用“播放下一首”過(guò)程，如圖6-14所示。圖6-13播放下一首音樂(lè)的代碼模塊圖6-14手機(jī)晃動(dòng)事件的代碼模塊6.3項(xiàng)目邏輯設(shè)計(jì)6.3.2功能實(shí)現(xiàn)9.音量控制拖動(dòng)“滑動(dòng)條_音量”組件的滑塊位置，會(huì)觸發(fā)其位置被改變事件，這時(shí)將音頻播放器的音量屬性設(shè)置為滑塊位置，就可以修改音頻播放器的播放音量，實(shí)現(xiàn)音量控制，如圖6-15所示。10.循環(huán)播放為實(shí)現(xiàn)音樂(lè)列表的循環(huán)播放，增加如圖6-16所示的代碼模塊。在播放音樂(lè)時(shí)，一首音樂(lè)播放完畢，音頻播放器將會(huì)自動(dòng)播放下一首音樂(lè)。至此，音樂(lè)播放器項(xiàng)目的開(kāi)發(fā)工