Share
Bien que certaines applications puissent fonctionner complètement dans une seule vue, la plupart du temps, vous aurez besoin de plusieurs écrans ou vues pour afficher le contenu de votre application. Dans ce tutoriel, vous allez apprendre à créer et à basculer entre différentes vues à l'aide de Corona..
Utiliser la couronne afficher la classe et la transition.from () méthode, nous allons ajouter des images pour mettre en scène et basculer entre eux. Vous en apprendrez aussi plus sur les tables et Les fonctions aussi bien que Groupes, qui sont des conteneurs pour les objets d'affichage.
La transition sera appelée par un Robinet un événement.
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 plateforme 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 épurée comprenant trois images, la première sera une image unique contenant l’arrière-plan et un bouton graphique. Le reste des images suivra le même concept mais ils seront ajoutés séparément pour vous montrer comment utiliser Groupes. Ceci est très utile lorsque vous devez modifier une vue remplie de boutons, textes, images, etc..
En fonction du périphérique que vous avez sélectionné, vous devrez peut-être 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é (n'importe quel éditeur de texte fonctionnera, mais vous n'aurez pas la coloration syntaxique en surbrillance) 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 la première vue, ce sera l'image avec le titre vert.
Accentsconagua
defaultView = display.newImage ('defaultView.png') Cette ligne crée la variable globale vue par défaut 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..
La variable suivante stockera la dernière vue exploitée afin de déterminer la vue à afficher ensuite. Il sera également utilisé pour supprimer la vue lorsqu'elle ne sera plus visible..
lastView =
La fonction suivante est très importante car elle gère la direction de la nouvelle transition de vue. C’est aussi un nouveau type de fonction que nous n’avions pas encore utilisé dans la série Corona: une fonction basée sur les paramètres. Ne vous inquiétez pas, les fonctions basées sur les paramètres sont assez simples, surtout si vous connaissez un autre langage de programmation. Nous allons jeter un coup d'oeil:
fonction locale swapViews (actuelle, nouvelle, à partir de)
lastView = actuel
si (de == 'bas') alors
transition.from (nouveau, y = new.height * 2, onComplete = removeLastView)
elseif (de == 'up') puis
transition.from (nouveau, y = -new.height, onComplete = removeLastView)
elseif (de == 'gauche') puis
transition.from (nouveau, x = -nouveau.width * 2, onComplete = removeLastView)
elseif (de == 'right') alors
transition.from (nouveau, x = nouveau.width * 2, onComplete = removeLastView)
fin
fin
Il a trois paramètres:
Lorsque la transition est terminée, le enleverLastView la fonction sera appelée.
Cette fonction supprime la vue précédemment échangée..
removeLastView =
fonction removeLastView ()
lastView: removeSelf () - nous utilisons ici la variable lastView
fin
Cette ligne déclare certaines variables utilisées dans la fonction suivante.
modes locaux = 'up', 'down', 'left', 'right' - les quatre modes disponibles pour l'animation local changeView = - déclare la fonction suivante local modified = false - vérifie si la vue a été échangé
Cette fonction est exécutée lorsque l'utilisateur appuie sur l'écran..
Il détecte l'écran en cours et appelle la fonction swapViews à l'aide des paramètres déterminés par le modifié variable. Le code crée l'objet Groupe et ajoute la vue correspondante et son écouteur. Il sélectionne également une direction de transition aléatoire parmi mode table.
function changeView: tapez sur (e) si (changé == faux) alors secondView = display.newGroup () bg = display.newImage ('secondViewBg.png') bouton = display.newImage ('button.png', 40, 223) secondView.insert (secondView, bg) secondView.insert (secondView, bouton) secondView: addEventListener ('tap', changeView) swapViews (defaultView, secondView, modes [math.random (1, 4)]) modifié = true sinon defaultView = display.newImage ('defaultView.png') defaultView: addEventListener ('tap', changeView) swapViews (secondView, defaultView, modes [math.random (1, 4)]) changé = false end end La ligne suivante ajoute l'auditeur requis à la vue d'écran.
defaultView: addEventListener ('tap', changeView) 
Si tout fonctionne comme prévu, nous sommes presque prêts à créer notre application pour tester les appareils. Encore une chose: notre icône d'application.
En utilisant les graphiques que vous avez créés avant de créer une jolie icône, la taille de l'icône de l'icône iPhone (non rétinienne) est de 57x57 pixels, mais l'iTunes Store utilise une version de 512 x 512 pixels. Il est donc préférable de créer votre icône dans cette taille..
Il n’est pas nécessaire d’avoir les coins arrondis ou l’éblouissement transparent, car cela sera ajouté automatiquement par iTunes et iOS..
Vous disposez désormais d'un moyen pratique et esthétique pour modifier les vues dans vos applications. Essayez-le et ajoutez votre propre touche!
Merci d'avoir lu ce tutoriel. J'espère que vous l'avez trouvé utile!
