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

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