Share
Quando si sviluppano applicazioni mobili, ci sono momenti in cui è necessario un browser Web completo, ma consentire all'utente di lasciare la propria applicazione non è un'opzione. In questo tutorial, imparerai come incorporare un'istanza WebKit nella tua applicazione, impedendo all'utente di dover lasciare l'app per navigare in un sito web.
Usando la Corona nativo classe e il showWebPopup () metodo, incorporeremo un'istanza del browser e mostreremo un pulsante per tornare al contenuto dell'app.
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 di base con un pulsante che chiamerà la vista Web quando premuto, lavoreremo anche con testo che fungerà da feedback.
A seconda del dispositivo selezionato, sarà necessario esportare la grafica nel PPI consigliato, è possibile farlo nel proprio 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 lo sfondo dell'app.
Accentsconagua
background locale = display.newImage ("background.png") Questa linea crea la variabile locale sfondo 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.
Ripeti il processo con l'immagine del logo, posizionandola in alto al centro del palco.
logo locale = display.newImage ("logo.png", 20, 20) Le righe successive creeranno il testo al centro dello stage, normalmente, avremo solo bisogno di un campo di testo, ma a quanto pare il carattere di nuova riga (\ n) non funziona con il newText metodo in questo momento.
local aboutText = display.newText ("", 0, 0, native.systemFontBold, 13) aboutText: setReferencePoint (display.CenterReferencePoint) aboutText.x = display.contentWidth * 0.5 aboutText.y = display.contentHeight * 0.5 - 30 aboutText: setTextColor (238, 238, 238) - #EEEEEE aboutText.text = "Grazie per aver utilizzato MobileTuts +!" local aboutText2 = display.newText ("", 0, 0, native.systemFontBold, 13) aboutText2: setReferencePoint (display.CenterReferencePoint) aboutText2.x = display.contentWidth * 0.5 aboutText2.y = aboutText.y + 17 aboutText2: setTextColor ( 238, 238, 238) - #EEEEEE aboutText2.text = "Per ulteriori informazioni e aggiornamenti, visitare:" link locale = display.newText ("", 0, 0, native.systemFontBold, 13) collegamento: setReferencePoint (display.CenterReferencePoint ) link.x = display.contentWidth * 0.5 link.y = aboutText2.y + 30 link: setTextColor (229, 175, 6) - # E5AF06 link.text = "http://mobile.tutsplus.com/app" Questo pulsante chiamerà la vista Web, questo codice lo aggiunge allo stage.
goButton locale = display.newImage ("goButton.png") goButton: setReferencePoint (display.CenterReferencePoint) goButton.x = display.contentWidth * 0.5 goButton.y = link.y + 50 Quando l'utente attiva la visualizzazione Web, nella parte inferiore dello schermo viene visualizzata una barra, questa barra conterrà un pulsante che rimuoverà la vista Web e mostrerà il contenuto dell'app.
Il codice seguente aggiunge la barra in basso e lo rende nascosto per impostazione predefinita.
bottomBar locale = display.newImage ("bottomBar.png", 0, 436) bottomBar.isVisible = false Il pulsante Indietro che rimuoverà la vista Web (anch'essa nascosta di default).
local back = display.newImage ("backButton.png", 286, 448) back.isVisible = false Questa funzione verrà eseguita dal pulsante Indietro. Nasconde la barra in basso e il pulsante indietro e rimuove anche il popup web.
funzione indietro: toccare (e) bottomBar.isVisible = false back.isVisible = false native.cancelWebPopup () fine
Questo codice chiamerà il popup Web e renderà visibile la barra inferiore e il pulsante indietro all'utente.
function goButton: tap (e) native.showWebPopup (0, 0, 320, 436, "http://mobile.tutsplus.com/author/carloz-yanez/") - Visibilità pulsante posteriore bottomBar.isVisible = true back. isVisible = true end
Il metodo popup Web ha i seguenti parametri:
Le righe successive aggiungono gli ascoltatori richiesti ai pulsanti dello schermo.
goButton: addEventListener ("tap", goButton) indietro: addEventListener ("tap", indietro) 
Se tutto funziona come previsto, siamo quasi pronti a creare la nostra app per il test dei dispositivi. Ancora una cosa: l'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 è 57x57px (114x114px per il display retina di iPhone 4), ma lo store di iTunes utilizza una versione 512x512px quindi è meglio creare l'icona in questa taglia.
Non è necessario avere gli angoli arrotondati o il bagliore trasparente, iTunes e l'iPhone lo faranno per te.
La visualizzazione di contenuti Web dall'interno dell'applicazione impedirà agli utenti delle app di lasciare l'app per accedere a un sito Web e in genere crea un'esperienza utente più piacevole. Grazie per aver letto questo tutorial. Spero che tu l'abbia trovato utile!
