Share
Bienvenido a la segunda parte de nuestro tutorial del reproductor de música Corona SDK. En esta parte colocaremos la interfaz en el escenario, manejaremos la lógica de la aplicación, los controles de los botones y los pasos para crear la aplicación final.
Por favor, asegúrese de comprobar parte 1 De la serie para entender completamente este tutorial..
Estas son las variables que usaremos. Lea los comentarios en el código para saber más sobre ellos; algunos de sus nombres se explican por sí mismos, por lo que no habrá comentarios allí..
-- Variables local currentSong = 1 local playing local timerSource local min = 0 local sec = 0
Declara todas las funciones como local al principio.
-- Funciones locales principales = local buildGUI = local playCurrentSong = local stopSong = local nextSong = local prevSong = local updateInfo = local updateProgress =
A continuación, crearemos la función que inicializará toda la lógica de la aplicación:
-- Función principal Función Main () buildGUI () end
La siguiente función coloca toda la GUI en el escenario. Está construido en el mismo orden en que declaramos las variables, por lo que podrá identificar fácilmente cada parte por los nombres de las variables..
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) current: 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) end Añadimos los escuchas de los botones en las últimas líneas y esto hará que los botones realicen la función correspondiente cuando se pulsan..
Este código se ejecuta cuando se presiona el botón de reproducción.
Reinicia los contadores de canciones y de tiempo (en caso de que no sea la primera vez que se presiona el botón) y reproduce la canción especificada por el canción actual variable. Después de eso, el jugando variable se establece en cierto, esto reproducirá la canción siguiente o anterior automáticamente cuando se presionan los botones siguiente o atrás.
función playCurrentSong: toque (e) audio.rewind (canciones [currentSong]) sec = 0 min = 0 audio.play (canciones [currentSong]) playing = true updateInfo () timerSource = timer.performWithDelay (1000, updateProgress, 0) playBtn .isVisible = false stopBtn.isVisible = true end
También inicia el temporizador para comenzar el contador de duración de la canción y oculta el botón de reproducción para revelar el botón de parada.
Cuando se presiona el botón de parada, la canción actual se detiene y el temporizador se cancela. Los botones vuelven a la normalidad y jugando se establece en falso.
función stopSong: toque (e) audio.stop () timer.cancel (timerSource) playBtn.isVisible = true stopBtn.isVisible = false playing = false end
Esta función detiene la canción actual y cambia a la siguiente en la Tabla, si la jugando variable se establece en
cierto Se reproducirá automáticamente. También verifica si la siguiente canción es la última, si ese es el caso, se remonta a la primera de la línea..
función nextSong: pulse (e) audio.stop () currentSong = currentSong + 1 if (currentSong> #songs) currentSong = 1 end if (playing) entonces audio.rewind (songs [currentSong]) sec = 0 min = 0 audio .play (canciones [currentSong]) end updateInfo () end
Como puedes imaginar, esta función se comporta de la misma manera que la anterior, solo hacia atrás.
función prevSong: pulse (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
Este código (llamado en las últimas tres funciones) maneja la información mostrada en ambas barras.
Actualiza la carátula del álbum, título, artista y tiempos de las canciones..
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? ':'? totalSec total: setReferencePoint (display.topLeftReferencePoint) total.x = 275 final
Ejecutada cada segundo, esta función actualiza la barra de progreso de la canción según la posición actual y la duración total de la misma..
Tenga en cuenta que los métodos utilizados por Corona API pueden generar resultados diferentes según el formato de los archivos de audio..
función updateProgress: timer (e) sec = sec + 1 if (sec == 60) luego 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
Con el fin de iniciar inicialmente la aplicación, theяPrincipalSe necesita llamar a la función. Con el código anterior en su lugar, lo haremos aquí:
Principal()
El archivo Default.png es una imagen que se mostrará justo al iniciar la aplicación, mientras que iOS carga los datos básicos para mostrar la pantalla principal. Agregue esta imagen a su carpeta de origen del proyecto, se agregará automáticamente por el complemento de Corona.
Usando los gráficos que creó antes, ahora puede crear un ícono agradable y atractivo. El tamaño del icono para el icono del iPhone sin retina es de 57x57px, pero la versión de la retina es de 114x114px y la tienda de iTunes requiere una versión de 512x512px. Sugiero crear primero la versión 512? 512 y luego reducir la escala para los otros tamaños.
No es necesario que tenga las esquinas redondeadas o el brillo transparente, iTunes y el iPhone lo harán por usted..
Es hora de hacer la prueba final. Abra el simulador de Corona, busque la carpeta de su proyecto y luego haga clic en Abrir. Si todo funciona como se espera, estás listo para el paso final!
En el simulador de corona ir a la jaArchivo> Construiry seleccione su dispositivo de destino. Rellene los datos requeridos y haga clic
construir. Espere unos segundos y su aplicación estará lista para la prueba del dispositivo y / o el envío para su distribución!
Experimente con el resultado final e intente hacer su versión personalizada de la aplicación!
Espero que les haya gustado esta serie de tutoriales y les resulte útil. Gracias por leer!
