Share
Welkom bij het tweede deel van onze Corona SDK-muziekspeler-zelfstudie. In dit deel plaatsen we de interface in scène, verwerken we de app-logica, knopbedieningen en de stappen om de laatste app te bouwen.
Controleer alsjeblieft deel 1 van de serie om deze tutorial volledig te begrijpen.
Dit zijn de variabelen die we zullen gebruiken. Lees de opmerkingen in de code om meer over hen te weten, sommige van hun namen verklaren zichzelf, dus daar zal geen commentaar zijn.
-- Variabelen local currentSong = 1 lokaal spelende lokale timer Source lokaal min = 0 local sec = 0
Verklaar alle functies als lokaal aan het begin.
-- Lokale functies Main = local buildGUI = local playCurrentSong = local stopSong = local nextSong = local prevSong = local updateInfo = local updateProgress =
Vervolgens maken we de functie waarmee alle app-logica wordt geïnitialiseerd:
-- Hoofdfunctiefunctie Hoofd () buildGUI () einde
De volgende functie plaatst alle GUI op het podium. Het is gebouwd in dezelfde volgorde waarin we de variabelen hebben gedeclareerd, dus u kunt elk onderdeel eenvoudig identificeren aan de hand van de namen van de variabelen.
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 ('Door', 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) voortgang: 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) huidig: setTextColor (246 , 237, 240) total = display.newText ('/ 00:00', 259, 288, native.systemFont, 9) total: setTextColor (191, 182, 183) playBtn: addEventListener ('tap', playCurrentSong) stopBtn: addEventListener ('tap', stopSong) nextBtn: addEventListener ('tap', nextSong) prevBtn: addEventListener ('tap', prevSong) einde We voegen de tikluisteraars toe van de knoppen in de laatste regels en dit zorgt ervoor dat de knoppen de overeenkomstige functie uitvoeren wanneer ze worden aangeraakt.
Deze code wordt uitgevoerd wanneer op de afspeelknop wordt gedrukt.
Het reset de song- en tijdtellers (in het geval dat dit niet de eerste keer is dat de knop wordt ingedrukt) en speelt de song die is gespecificeerd door de currentSong variabel. Daarna, de spelen variabele is ingesteld op waar, Hiermee wordt het volgende of vorige nummer automatisch afgespeeld wanneer de volgende of vorige knoppen worden ingedrukt.
function playCurrentSong: tik op (e) audio.rewind (liedjes [currentSong]) sec = 0 min = 0 audio.play (liedjes [currentSong]) spelen = true updateInfo () timerSource = timer.performWithDelay (1000, updateProgress, 0) playBtn .isVisible = false stopBtn.isVisible = true end
Het start ook de timer om de songduurteller te starten en verbergt de afspeelknop om de stopknop te onthullen.
Wanneer op de stopknop wordt gedrukt, stopt het huidige nummer en wordt de timer geannuleerd. Knoppen worden teruggezet naar normaal en spelen ingesteld op vals.
functie stopSong: tik (e) audio.stop () timer.cancel (timerSource) playBtn.isVisible = true stopBtn.isVisible = false playing = false end
Deze functie stopt de huidige song en verandert naar de volgende in de tabel, als de spelen variabele is ingesteld op
waar het zal het automatisch afspelen. Het controleert ook of het volgende nummer de laatste is, als dat het geval is, gaat het terug naar de eerste in de regel.
functie nextSong: tik op (e) audio.stop () currentSong = currentSong + 1 if (currentSong> #songs) then currentSong = 1 end if (afspelen) en audio.rewind (songs [currentSong]) sec = 0 min = 0 audio .play (liedjes [currentSong]) eind updateInfo () einde
Zoals je je misschien kunt voorstellen gedraagt deze functie zich op dezelfde manier als de vorige, alleen achteruit.
functie vorige reeks: tik op (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
Deze code (in de vorige drie functies genoemd) behandelt de informatie die in beide balken wordt weergegeven.
Het werkt de albumillustraties, de titel, de artiest en de tijden van de nummers bij.
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 = nihil 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 (liedjes [currentSong]) / 1000% 60) - total.text = '/'? totalMin? ':'? totalSec-totaal: setReferencePoint (display.topLeftReferencePoint) total.x = 275 einde
Uitgevoerd elke seconde, werkt deze functie de voortgangsbalk van de song bij op basis van de huidige positie en de totale duur ervan.
Houd er rekening mee dat de methoden die worden gebruikt door de Corona API verschillende resultaten kunnen opleveren, afhankelijk van het formaat van de audiobestanden.
functie updateProgress: timer (e) sec = sec + 1 if (sec == 60) dan 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
Om de app in eerste instantie te starten, is deHoofdEr moet een functie worden aangeroepen. Met de bovenstaande code op zijn plaats, doen we dat hier:
Hoofd()
Het bestand Default.png is een afbeelding die juist wordt weergegeven wanneer u de toepassing start terwijl de iOS de basisgegevens laadt om het hoofdscherm weer te geven. Voeg deze afbeelding toe aan uw projectbronmap en deze wordt automatisch toegevoegd door de Corona-compileermachine.
Met behulp van de afbeeldingen die u eerder hebt gemaakt, kunt u nu een mooi en goed uitziend pictogram maken. De pictogramgrootte voor het niet-retina-iPhone-pictogram is 57x57px, maar de netvliesversie is 114x114px en de iTunes-winkel heeft een 512x512px-versie nodig. Ik stel voor eerst de 512- 512-versie te maken en vervolgens de overige formaten te verkleinen.
Het hoeft niet de afgeronde hoeken of de transparante schittering te hebben, iTunes en de iPhone zullen dat voor je doen.
Het is tijd om de laatste test te doen. Open de Corona Simulator, blader naar uw projectmap en klik vervolgens op Openen. Als alles werkt zoals verwacht, bent u klaar voor de laatste stap!
Ga in de Corona Simulator naarBestand> Builden selecteer je doelapparaat. Vul de vereiste gegevens in en klik op
bouwen. Wacht een paar seconden en uw app is gereed voor apparaattesten en / of verzending voor distributie!
Experimenteer met het eindresultaat en probeer je aangepaste versie van de app te maken!
Ik hoop dat je deze tutorialserie leuk vond en het nuttig vond. Bedankt voor het lezen!
