Share
Lors du développement d'applications mobiles, il est parfois nécessaire d'avoir un navigateur Web complet, mais permettre à votre utilisateur de quitter votre application n'est pas une option. Dans ce didacticiel, vous apprendrez à incorporer une instance WebKit dans votre application, évitant ainsi à l'utilisateur de devoir quitter l'application pour naviguer sur un site Web..
Utiliser la couronne originaire de la classe et la showWebPopup () méthode, nous allons intégrer une instance de navigateur et afficher un bouton pour revenir au contenu de l'application.
La première chose à faire est de sélectionner la plate-forme sur laquelle vous souhaitez exécuter votre application. Ainsi, vous pourrez choisir la taille des images que vous utiliserez..
La plate-forme iOS présente les caractéristiques suivantes:
Android étant une plate-forme ouverte, il existe de nombreux appareils et résolutions. Voici quelques-unes des caractéristiques d'écran les plus courantes:
Dans ce tutoriel, nous allons nous concentrer sur la plate-forme iOS, spécialement conçue pour la distribution sur un iPhone / iPod touch..
Nous allons créer une interface de base avec un bouton qui appellera la vue Web lorsque vous appuierez dessus, nous travaillerons également avec du texte qui servira de retour.
Selon le périphérique que vous avez sélectionné, vous devrez exporter les graphiques dans l'IPP recommandé. Vous pouvez le faire dans votre éditeur d'images préféré..
J'ai utilisé le Ajuster la taille… fonction dans l'application Aperçu sous Mac OS X.
N'oubliez pas de donner un nom descriptif aux images et de les enregistrer dans votre dossier de projet..
Temps d'écrire notre application!
Ouvrez votre éditeur Lua préféré (tout éditeur de texte fonctionnera, mais vous n'aurez pas la coloration syntaxique) et préparez-vous à écrire votre superbe application.
Tout d’abord, nous masquons la barre d’état, c’est la barre en haut de l’écran qui indique l’heure, le signal et d’autres indicateurs..
display.setStatusBar (display.HiddenStatusBar)
Maintenant, nous ajoutons le fond de l'application.
Accentsconagua
fond local = display.newImage ("background.png") Cette ligne crée la variable locale Contexte et utilise le afficher API pour ajouter l'image spécifiée à la scène. Par défaut, l'image est ajoutée à 0,0 en utilisant le coin supérieur gauche comme point de référence..
Répétez le processus avec l'image du logo en le plaçant en haut au centre de la scène..
logo local = display.newImage ("logo.png", 20, 20) Les lignes suivantes créeront le texte au centre de la scène. Normalement, nous n’aurons besoin que d’un seul champ TextField, mais apparemment, le caractère newline (\ n) ne fonctionne pas avec les caractères. nouveauTexte méthode en ce moment.
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 = "Merci d'avoir utilisé MobileTuts +!" local aboutText2 = display.newText ("", 0, 0, native.systemFontBold, 13) aboutText2: setReferencePoint (display.CenterReferencePoint) aboutText2.x = display.contentWidth * 0.5 aboutText2.y = aboutText.y = aboutText.y + 17 aboutTextColor ( 238, 238, 238) - #EEEEEE aboutText2.text = "Pour plus d’informations et mises à jour, visitez:" lien local = display.newText ("", 0, 0, native.systemFontBold, 13) lien: 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" Ce bouton appelle la vue Web, ce code l’ajoute à la scène.
local goButton = display.newImage ("goButton.png") goButton: setReferencePoint (display.CenterReferencePoint) goButton.x = display.contentWidth * 0.5 goButton.y = lien.y + 50 Lorsque l'utilisateur active la vue Web, une barre apparaît en bas de l'écran. Cette barre contient un bouton permettant de supprimer la vue Web et d'afficher le contenu de l'application..
Le code suivant ajoute la barre inférieure et le rend masqué par défaut.
local bottomBar = display.newImage ("bottomBar.png", 0, 436) bottomBar.isVisible = false Le bouton de retour qui supprimera la vue Web (également masqué par défaut).
local retour = display.newImage ("backButton.png", 286, 448) back.isVisible = false Cette fonction sera exécutée par le bouton retour. Il masque la barre inférieure et le bouton arrière et il supprime également le menu contextuel Web..
fonction back: tap (e) bottomBar.isVisible = false back.isVisible = false native.cancelWebPopup () end
Ce code appelle la fenêtre contextuelle Web et rend la barre inférieure et le bouton précédent visibles pour l'utilisateur..
function goButton: tap (e) native.showWebPopup (0, 0, 320, 436, "http://mobile.tutsplus.com/author/carloz-yanez/") - Visibilité du bouton Précédent bottomBar.isVisible = true. isVisible = vrai fin
La méthode Web popup contient les paramètres suivants:
Les lignes suivantes ajoutent les écouteurs requis aux boutons de l'écran.
goButton: addEventListener ("tap", goButton) retour: addEventListener ("tap", retour) 
Si tout fonctionne comme prévu, nous sommes presque prêts à créer notre application pour tester les appareils. Encore une chose: l'icône de l'application.
En utilisant les graphiques que vous avez créés avant de pouvoir créer une belle et jolie icône, la taille de l'icône pour l'icône iPhone est de 57x57px (114x114px pour l'écran Retina de l'iPhone 4), mais le magasin iTunes utilise une version de 512x512px. Il est donc préférable de créer votre icône. dans cette taille.
Il n'est pas nécessaire que les angles soient arrondis ou que la lumière soit transparente, iTunes et l'iPhone le feront pour vous..
L'affichage de contenu Web depuis votre application empêchera les utilisateurs de votre application de quitter votre application pour accéder à un site Web et créera généralement une expérience utilisateur plus agréable. Merci d'avoir lu ce tutoriel. J'espère que vous l'avez trouvé utile!
