Share
Benvenuti alla seconda parte del tutorial sul nostro lettore musicale Corona SDK. In questa parte inseriremo l'interfaccia nello stage, gestiremo la logica dell'app, i controlli dei pulsanti e i passaggi per creare l'app finale.
Assicurati di controllare parte 1 della serie per comprendere appieno questo tutorial.
Queste sono le variabili che useremo. Leggi i commenti nel codice per saperne di più su di loro, alcuni dei loro nomi sono auto spieganti quindi non ci sarà alcun commento lì.
-- Variabili locali currentSong = 1 locale che suona il timer localeSource local min = 0 local sec = 0
Dichiara tutte le funzioni come Locale all'inizio.
-- Funzioni locali Main = buildGUI locali = local playCurrentSong = local stopSong = local nextSong = local prevSong = local updateInfo = local updateProgress =
Successivamente creeremo la funzione che inizializzerà tutta la logica dell'app:
-- Funzione principale Funzione Main () buildGUI () end
La seguente funzione posiziona tutta la GUI sullo stage. È costruito nello stesso ordine in cui abbiamo dichiarato le variabili, in modo da identificare facilmente ciascuna parte in base ai nomi delle variabili.
Accentsconagua
function buildGUI () bg = display.newImage ('background.png') infoBar = display.newImage ('infoBar.png', 20, 168) imageMarker = display.newImage ('imageMarker.png', 30, 178) cdCover = display.newImage ('s1.png', 30, 178) titleText = display.newText ('1. Here Without You', 117, 176, native.systemFontBold, 14) titleText: setTextColor (246, 237, 240) byText = display.newText ('By', 121, 197, native.systemFont, 10) byText: setTextColor (191, 182, 183) artistText = display.newText ('3 Doors Down', 137, 197, native.systemFontBold, 10) artistText: setTextColor (244, 204, 106) buttonBar = display.newImage ('buttonBar.png', 20, 278) playBtn = display.newImage ('playBtn.png', 25, 279) stopBtn = display.newImage ('stopBtn .png ', 27, 282) stopBtn.isVisible = false prevBtn = display.newImage (' prevBtn.png ', 55, 279) nextBtn = display.newImage (' nextBtn.png ', 85, 279) progressBar = display.newImage ('progressBar.png', 126, 290) progress = display.newRoundedRect (0, 0, 100, 10, 3) progress: setFillColor (244, 204, 106) prog ress: setReferencePoint (display.TopLeftReferencePoint) progress.x = 126 progress.y = 290 progress.isVisible = false current = display.newText ('00: 00 ', 235, 288, native.systemFont, 9) corrente: setTextColor (246 , 237, 240) total = display.newText ('/ 00:00', 259, 288, native.systemFont, 9) totale: setTextColor (191, 182, 183) playBtn: addEventListener ('tap', playCurrentSong) stopBtn: addEventListener ('tap', stopSong) nextBtn: addEventListener ('tap', nextSong) prevBtn: addEventListener ('tap', prevSong) end Aggiungiamo gli ascoltatori di tocchi dei pulsanti nelle ultime righe e questo farà sì che i pulsanti eseguano la funzione corrispondente quando toccati.
Questo codice viene eseguito quando si preme il pulsante di riproduzione.
Reimposta i contatori della canzone e del tempo (nel caso non sia la prima volta che viene premuto il pulsante) e riproduce il brano specificato dal currentSong variabile. Dopo quello, il giocando la variabile è impostata su vero, questo riprodurrà automaticamente il brano successivo o precedente quando vengono premuti i pulsanti successivo o posteriore.
function playCurrentSong: tap (e) audio.rewind (songs [currentSong]) sec = 0 min = 0 audio.play (songs [currentSong]) playing = true updateInfo () timerSource = timer.performWithDelay (1000, updateProgress, 0) playBtn .isVisible = false stopBtn.isVisible = true end
Inoltre, avvia il timer per iniziare il contatore della durata della canzone e nasconde il pulsante di riproduzione per rivelare il pulsante di arresto.
Quando viene premuto il pulsante stop, la canzone corrente smette di suonare e il timer viene cancellato. I pulsanti vengono restituiti alla normalità e giocando è impostato per falso.
function stopSong: tap (e) audio.stop () timer.cancel (timerSource) playBtn.isVisible = true stopBtn.isVisible = false playing = false end
Questa funzione arresta il brano corrente e passa al successivo nella tabella, se il giocando la variabile è impostata su
vero lo giocherà automaticamente. Controlla anche se il brano successivo è l'ultimo, se questo è il caso torna al primo della riga.
function nextSong: tap (e) audio.stop () currentSong = currentSong + 1 if (currentSong> #songs) then currentSong = 1 end if (playing) then audio.rewind (songs [currentSong]) sec = 0 min = 0 audio .play (songs [currentSong]) end updateInfo () end
Come puoi immaginare questa funzione si comporta allo stesso modo della precedente, solo all'indietro.
funzione prevSong: tap (e) audio.stop () currentSong = currentSong - 1 if (currentSong < 1) then currentSong = #songs end if(playing) then audio.rewind(songs[currentSong]) sec = 0 min = 0 audio.play(songs[currentSong]) end updateInfo() end
Questo codice (chiamato nelle tre funzioni precedenti) gestisce le informazioni visualizzate in entrambe le barre.
Aggiorna l'arte dell'album, il titolo, l'artista e gli orari delle canzoni.
function updateInfo () titleText.text = tostring (currentSong)? '. '? songsInfo [currentSong] [2] titleText: setReferencePoint (display.TopLeftReferencePoint) titleText.x = 117 artistText.text = songsInfo [currentSong] [3] artistText: setReferencePoint (display.TopLeftReferencePoint) artistText.x = 137 display.remove (cdCover) cdCover = nil local cdCover = display.newImage (songsInfo [currentSong] [4], 30, 178) local totalMin = math.floor (audio.getDuration (songs [currentSong]) / 1000/60) - local totalSec = math. floor (audio.getDuration (songs [currentSong]) / 1000% 60) - total.text = '/'? totalMin? ':'? totale Totale totale: setReferencePoint (display.topLeftReferencePoint) total.x = 275 fine
Eseguito ogni secondo, questa funzione aggiorna la barra di avanzamento del brano in base alla posizione corrente e alla durata totale di esso.
Si noti che i metodi utilizzati dall'API Corona possono restituire risultati diversi a seconda del formato dei file audio.
function updateProgress: timer (e) sec = sec + 1 if (sec == 60) then sec = 0 min = min + 1 end local secS = tostring (sec) if (#secS < 2) then sec = '0'? sec end current.text = min? ':'? sec current:setReferencePoint(display.topLeftReferencePoint) current.x = 250 -- Progress Bar local position = min? sec position = position * 1000 local duration = audio.getDuration(songs[currentSong]) local percent = (position / duration) print(position, duration, percent) progress.isVisible = true progress.xScale = percent end
Per avviare inizialmente l'app, theяPrincipaledeve essere chiamata. Con il codice sopra riportato, lo faremo qui:
Principale()
Il file Default.png è un'immagine che verrà visualizzata quando si avvia l'applicazione mentre iOS carica i dati di base per mostrare la schermata principale. Aggiungi questa immagine alla cartella sorgente del progetto, verrà automaticamente aggiunta dal complino Corona.
Usando la grafica che hai creato prima ora puoi creare un'icona carina e di bell'aspetto. La dimensione dell'icona per l'icona dell'iPhone non retina è 57x57px, ma la versione retina è 114x114px e lo store iTunes richiede una versione 512x512px. Suggerisco di creare prima la versione 512? 512 e poi ridimensionare le altre dimensioni.
Non è necessario avere gli angoli arrotondati o il bagliore trasparente, iTunes e l'iPhone lo faranno per te.
È tempo di fare il test finale. Apri il simulatore Corona, vai alla cartella del progetto, quindi fai clic su apri. Se tutto funziona come previsto, sei pronto per il passaggio finale!
Nel simulatore Corona vai suFile> CreaE selezionare il dispositivo di destinazione. Compila i dati richiesti e clicca
costruire. Attendi qualche secondo e la tua app sarà pronta per il test del dispositivo e / o l'invio per la distribuzione!
Sperimenta il risultato finale e prova a creare la tua versione personalizzata dell'app!
Spero ti sia piaciuta questa serie di tutorial e la trovi utile. Grazie per aver letto!
