Share
Sebbene alcune applicazioni possano eseguire completamente in un'unica visualizzazione, la maggior parte delle volte è necessario più di una schermata o visualizzazione per visualizzare il contenuto dell'app. In questo tutorial imparerai come creare e passare da una vista all'altra usando Corona.
Usando la Corona display classe e il transition.from () metodo, aggiungeremo alcune immagini allo stage e passeremo da una all'altra. Potrai anche saperne di più tabelle e funzioni così come gruppi, che sono contenitori per oggetti di visualizzazione.
La transizione sarà chiamata da a Rubinetto evento.
La prima cosa che devi fare è selezionare la piattaforma su cui vuoi eseguire la tua app, in questo modo sarai in grado di scegliere la dimensione per le immagini che userai.
La piattaforma iOS ha queste caratteristiche:
Perché Android è una piattaforma aperta, ci sono molti diversi dispositivi e risoluzioni. Alcune delle caratteristiche dello schermo più comuni sono:
In questo tutorial ci concentreremo sulla piattaforma iOS, in particolare lo sviluppo per la distribuzione su un iPhone / iPod touch.
Creeremo un'interfaccia pulita con tre immagini, la prima sarà una singola immagine contenente lo sfondo e una grafica a pulsante. Il resto delle immagini seguirà lo stesso concetto ma saranno aggiunte separatamente per mostrare come utilizzare gruppi. Questo è molto utile quando è necessario modificare una vista piena di pulsanti, testi, immagini, ecc.
A seconda del dispositivo selezionato, potrebbe essere necessario esportare la grafica nell'IPP consigliato, è possibile farlo nell'editor di immagini preferito.
Ho usato il Regola dimensioni funzione nell'app Anteprima in Mac OS X.
Ricordarsi di assegnare alle immagini un nome descrittivo e di salvarle nella cartella del progetto.
È tempo di scrivere la nostra applicazione!
Apri il tuo editor Lua preferito (qualsiasi editor di testo funzionerà, ma non avrai l'evidenziazione della sintassi) e preparati a scrivere la tua fantastica app.
Per prima cosa nascondiamo la barra di stato, questa è la barra in cima allo schermo che mostra l'ora, il segnale e altri indicatori.
display.setStatusBar (display.HiddenStatusBar)
Ora aggiungiamo la prima vista, questa sarà l'immagine con il titolo verde.
Accentsconagua
defaultView = display.newImage ('defaultView.png') Questa linea crea la variabile globale visualizzazione predefinita e usa il display API per aggiungere l'immagine specificata allo stage. Per impostazione predefinita, l'immagine viene aggiunta a 0,0 usando l'angolo in alto a sinistra come punto di riferimento.
La seguente variabile memorizzerà l'ultima vista toccata per determinare quale vista dovrebbe essere mostrata successivamente. Sarà anche usato per rimuovere la vista quando non è più visibile.
lastView =
La prossima funzione è molto importante perché gestisce la direzione della nuova conversione della vista. Questo è anche un nuovo tipo di funzione che non abbiamo mai usato prima nella serie Corona: una funzione basata su parametri. Non ti preoccupare però, le funzioni basate su parametri sono piuttosto semplici, specialmente se conosci qualsiasi altro linguaggio di programmazione. Diamo un'occhiata:
funzione locale swapViews (corrente, nuova, da)
lastView = corrente
se (da == 'down') allora
transition.from (nuovo, y = new.height * 2, onComplete = removeLastView)
elseif (da == 'up') quindi
transition.from (nuovo, y = -new.height, onComplete = removeLastView)
elseif (da == 'left') quindi
transition.from (new, x = -new.width * 2, onComplete = removeLastView)
elseif (da == 'right') quindi
transition.from (nuovo, x = new.width * 2, onComplete = removeLastView)
fine
fine
Ha tre parametri:
Quando la transizione è completa, il removeLastView la funzione verrà chiamata.
Questa funzione cancella la vista precedentemente scambiata.
removeLastView =
function removeLastView ()
lastView: removeSelf () - qui usiamo la variabile lastView
fine
Queste righe dichiarano alcune variabili utilizzate nella funzione successiva.
modi locali = 'su', 'giù', 'sinistra', 'destra' - le quattro modalità disponibili per la modifica locale dell'animazioneView = - dichiara la prossima funzione locale changed = false - controlla se la vista ha stato scambiato
Questa funzione viene eseguita quando l'utente tocca lo schermo.
Rileva la schermata corrente e chiama la funzione swapViews utilizzando i parametri determinati dal cambiato variabile. Il codice crea l'oggetto Gruppo e aggiunge la vista corrispondente e il suo listener. Seleziona anche una direzione di transizione casuale dal modalità tavolo.
function changeView: tap (e) if (changed == false) then secondView = display.newGroup () bg = display.newImage ('secondViewBg.png') button = display.newImage ('button.png', 40, 223) secondView.insert (secondView, bg) secondView.insert (secondView, button) secondView: addEventListener ('tap', changeView) swapViews (defaultView, secondView, modes [math.random (1, 4)]) changed = true else defaultView = display.newImage ('defaultView.png') defaultView: addEventListener ('tap', changeView) swapViews (secondView, defaultView, modes [math.random (1, 4)]) changed = false end end La riga successiva aggiunge l'ascoltatore richiesto alla visualizzazione dello schermo.
defaultView: addEventListener ('tap', changeView) 
Se tutto funziona come previsto, siamo quasi pronti a creare la nostra app per il test dei dispositivi. Ancora una cosa: la nostra icona dell'applicazione.
Utilizzando la grafica creata prima di poter creare un'icona bella e di bell'aspetto, la dimensione dell'icona per l'icona di iPhone (senza retina) è 57x57px, ma l'archivio iTunes utilizza una versione 512x512px, quindi è meglio creare l'icona in questa dimensione.
Non è necessario avere gli angoli arrotondati o il bagliore trasparente perché sarà aggiunto automaticamente da iTunes e iOS.
Ora hai un modo utile e di bell'aspetto per cambiare le visualizzazioni nelle tue applicazioni. Provalo e aggiungi il tuo tocco personale!
Grazie per aver letto questo tutorial. Spero che tu l'abbia trovato utile!
