Share
Ce tutoriel va vous apprendre à construire un menu coulissant similaire à celui présenté dans l'application Facebook avec Titanium Mobile..
Le menu déroulant comprend une fenêtre de taille normale (la fenêtre principale) au-dessus d’une fenêtre plus petite contenant une vue sous forme de tableau (le menu). Pour créer l'effet de glissement, nous devrons déclencher une animation qui suivra et suivra un événement tactile horizontalement. Cependant, gardons cela pour plus tard. Pour l'instant, nous allons commencer par configurer les fenêtres.
Tout d'abord, nous allons créer le menu:
//// ---- Fenêtre de menu, positionnée à gauche var menuWindow = Ti.UI.createWindow (top: 0, left: 0, width: 150); menuWindow.open (); //// ---- Tableau de menus // Titres de menus var menuTitles = [titre: 'Menu 1', titre: 'Menu 2', titre: 'Menu 3', titre: 'Menu 4 ', titre:' Menu 5 ', titre:' Menu 6 ']; // Tableview var tableView = Ti.UI.createTableView (data: menusTitles); menuWindow.add (tableView);
Il s’agit d’une configuration très sommaire de la vue tableau. Donc, vous devriez maintenant avoir quelque chose comme ce qui suit:
Nous avons maintenant besoin d’une fenêtre avec une barre de navigation et d’un bouton qui nous permettra d’ouvrir le menu avec une animation. Donc, pour y parvenir, nous avons besoin de deux fenêtres: une contenant un groupe de navigation (indispensable pour avoir une barre de navigation) et une autre qui est dans le groupe de navigation:
//// ---- Fenêtre avec navigationGroup var navWindow = Ti.UI.createWindow (width: 320 // Définit la largeur de la fenêtre glissante pour éviter la coupure de l'animation); navWindow.open (); // Fenêtre principale var win = Ti.UI.createWindow (titre: 'Fenêtre principale', backgroundColor: '# 28292c', barColor: '# 28292c'); // NavigationGroup var navGroup = Ti.UI.iPhone.createNavigationGroup (window: win); navWindow.add (navGroup); // Bouton en haut à gauche var menuButton = Ti.UI.createButton (title: 'Menu', toggle: false // Propriété personnalisée pour le menu alterné); win.setLeftNavButton (menuButton);
Hey, vous avez probablement remarqué que bascule: vrai propriété dans notre bouton, non? Ça n'existe pas vraiment; c'est une propriété personnalisée que j'ai ajoutée. Vous pouvez le nommer comme vous le souhaitez ou même créer une variable (comme var toggle = true;) si cela vous met plus à l’aise. Cependant, je vous recommande d'utiliser cette astuce car elle est très pratique lorsque vous avez beaucoup de propriétés personnalisées dans votre application..
Voici notre fenêtre principale:
Bon, maintenant nous allons animer notre fenêtre pour qu'elle glisse de gauche à droite lorsque nous appuyons sur le bouton "Menu".
Voyons voir comment ça fonctionne:
Accentsconagua
menuButton.addEventListener ('click', fonction (e) // Si le menu est ouvert si (e.source.toggle == true) navWindow.animate (left: 0, durée: 400, curve: Ti.UI .ANIMATION_CURVE_EASE_IN_OUT); e.source.toggle = false; // Si le menu n'est pas ouvert, autrement navWindow.animate (left: 150, durée: 400, courbe: Ti.UI.ANIMATION_CURVE_EASE_IN_IN_OUT); e. source.toggle = true;); Vous voyez que lorsque nous cliquons sur le bouton, nous appelons fonction (e), où e est notre objet (le bouton). En appelant e.source.toggle, nous vérifions la propriété "bascule" personnalisée décrite ci-dessus (vous pouvez également utiliser menuButton.toggle, c'est la même chose). Si c'est faux, nous déplaçons notre fenêtre vers la droite et commutons la propriété sur vrai. Alors, bien sûr, si c'est vrai, la fenêtre revient à la normale et notre propriété est ensuite définie sur faux encore.
le courbe: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT est juste un moyen de lisser l'animation.
Ouais, c'est plutôt chouette, non? Mais c’était la partie facile, parce que maintenant nous commençons à être sérieux! Nous allons suivre un événement tactile afin de pouvoir révéler le menu en déplaçant la fenêtre principale horizontalement. Mais avant cela, nous allons ajouter des propriétés personnalisées:
// Fenêtre principale var win = Ti.UI.createWindow (titre: 'Fenêtre principale', backgroundColor: '# 28292c', barColor: '# 28292c', déplacement: false, // Propriété personnalisée pour l'axe de déplacement: 0 // Propriété personnalisée pour l’axe X);
Encore une fois, vous pouvez nommer ces propriétés comme bon vous semble, ou vous pouvez même créer des variables qui leur sont dédiées, mais je vous recommande vivement d’utiliser cette méthode car elle économise de la mémoire et est plus facile à lire qu’un tas de variables dispersées dans votre fichier..
Maintenant, nous allons utiliser le touchstart événement pour obtenir la position de notre doigt quand il touche l'écran:
win.addEventListener ('touchstart', fonction (e) // Récupère la position horizontale de départ e.source.axis = parseInt (e.x);); Ici nous prenons la coordonnée horizontale (ex) de notre événement, analysez-le comme un entier, puis enregistrez-le dans notre propriété personnalisée axe.
Ensuite, nous allons animer la fenêtre en fonction de la position de notre doigt:
win.addEventListener ('touchmove', fonction (e) // soustraction de la position actuelle à la position horizontale de départ var coord = parseInt (e.globalPoint.x) - e.source.axis; // détection du mouvement après un décalage de 20 pixels si ( coordonnées> 20 || coordonnées < -20) e.source.moving = true; // Locks the window so it doesn't move further than allowed if(e.source.moving == true && coordinates <= 150 && coordinates >= 0) // Ceci adoucira l'animation et la rendra moins agitée navWindow.animate (left: coordonne, duration: 20); // Définition des coordonnées comme position finale gauche navWindow.left = coordonnees; ); Pour éviter que la fenêtre ne bouge à chaque fois que nous la touchons, nous attendons un mouvement de plus de 20 pixels avant de l'animer. Nous suivons nos coordonnées tactiles avec e.globalPoint.x et soustrayez-le à notre point de départ (axe) afin que nous puissions déplacer la fenêtre. En outre, il ne peut pas glisser au-delà de la largeur du menu (150 pixels) ou du côté gauche de l'écran.
Si vous essayez d'exécuter votre application, vous verrez que votre fenêtre restera exactement là où vous la laissez. Ce n'est pas ce que nous voulons. Nous devons le repositionner à la fin de l'événement tactile. Il s'ouvrira / se fermera en fonction de l'endroit où il se trouve:
win.addEventListener ('touchend', fonction (e) // Ne déplace plus la fenêtre e.source.moving = false; if (navWindow.left> = 75 && navWindow.left < 150) // Repositioning the window to the right navWindow.animate( left:150, duration:300 ); menuButton.toggle = true; else // Repositioning the window to the left navWindow.animate( left:0, duration:300 ); menuButton.toggle = false; ); Lorsque notre doigt ne touche plus l'écran, le toucher événement est déclenché, nous pouvons donc ajuster la position de notre fenêtre.
Avaient fini! Comme vous le voyez, nous avons utilisé une animation et des calculs très élémentaires pour obtenir un effet remarquable et professionnel. J'espère vraiment que vous avez apprécié ce tutoriel et appris quelques nouveaux trucs!
