Share
Questo tutorial ti insegnerà come creare un menu scorrevole simile a quello presente nell'applicazione Facebook utilizzando Titanium Mobile.
Il menu scorrevole è costituito da una finestra a dimensione intera (la finestra principale) in cima a una più piccola che contiene una vista tabella (il menu). Per creare l'effetto di scorrimento, dovremo attivare un'animazione che traccerà e seguirà un evento di tocco in senso orizzontale. Tuttavia, salviamolo per dopo. Per ora, inizieremo impostando le finestre.
Innanzitutto, creeremo il menu:
//// ---- Finestra del menu, posizionata sulla sinistra var menuWindow = Ti.UI.createWindow (top: 0, left: 0, width: 150); menuWindow.open (); //// ---- Menu Tabella // Menu Titoli var menuTitoli = [titolo: 'Menu 1', titolo: 'Menu 2', titolo: 'Menu 3', titolo: 'Menu 4 ', title:' Menu 5 ', title:' Menu 6 ']; // Tableview var tableView = Ti.UI.createTableView (data: menuTitles); menuWindow.add (tableView);
Questa è una configurazione di visualizzazione di tabella molto semplice, ma lo farà. Quindi ora dovresti avere qualcosa di simile al seguente:
Ora abbiamo bisogno di una finestra con una barra di navigazione e un pulsante che ci consenta di aprire il menu con un'animazione. Quindi, per raggiungere questo obiettivo, abbiamo effettivamente bisogno di due finestre: una contenente un gruppo di navigazione (indispensabile per avere una barra di navigazione) e un'altra che sia nel il gruppo di navigazione:
//// ---- Finestra con navigationGroup var navWindow = Ti.UI.createWindow (width: 320 // Imposta la larghezza della finestra scorrevole per evitare ritagli di animazione); navWindow.open (); // Finestra principale var win = Ti.UI.createWindow (title: 'Main Window', backgroundColor: '# 28292c', barColor: '# 28292c'); // NavigationGroup var navGroup = Ti.UI.iPhone.createNavigationGroup (window: win); navWindow.add (navGroup); // Pulsante in alto a sinistra var menuButton = Ti.UI.createButton (title: 'Menu', toggle: false // Proprietà personalizzata per il menu toggle); win.setLeftNavButton (MenuButton);
Ehi, probabilmente l'hai notato ginocchiera: true proprietà nel nostro pulsante, giusto? Non esiste davvero; è una proprietà personalizzata che ho aggiunto. Puoi praticamente chiamarlo come vuoi o persino crearne una variabile (come var toggle = true;) se ti fa sentire più a tuo agio. Tuttavia, ti consiglio di utilizzare questo piccolo trucco perché è molto utile quando hai molte proprietà personalizzate nella tua app.
Ecco la nostra finestra principale:
Ok, ora animeremo la nostra finestra in modo che scorra da sinistra a destra quando premiamo il pulsante "Menu".
Vediamo come funziona:
Accentsconagua
menuButton.addEventListener ('click', function (e) // Se il menu è aperto if (e.source.toggle == true) navWindow.animate (left: 0, duration: 400, curve: Ti.UI .ANIMATION_CURVE_EASE_IN_OUT); e.source.toggle = false; // Se il menu non è aperto else navWindow.animate (left: 150, duration: 400, curve: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT); e. source.toggle = true;); Vedete che quando clicchiamo sul pulsante, chiamiamo Funzione (e), dove e è il nostro oggetto (il pulsante). A chiamata e.source.toggle, stiamo controllando la proprietà "toggle" personalizzata discussa sopra (puoi anche usarla menuButton.toggle, è la stessa cosa). Se è falso, stiamo spostando la nostra finestra a destra e cambiando la proprietà in vero. Quindi, ovviamente, se lo è vero, la finestra torna alla normalità e la nostra proprietà viene quindi impostata su falso ancora.
Il Curva: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT è solo un modo per attenuare l'animazione.
Sì, sembra abbastanza carino, vero? Ma quella era la parte facile, perché ora stiamo diventando seri! Tracciamo un evento di tocco in modo che possiamo rivelare il menu spostando la finestra principale orizzontalmente. Ma prima, aggiungeremo alcune proprietà personalizzate:
// Finestra principale var win = Ti.UI.createWindow (title: 'Main Window', backgroundColor: '# 28292c', barColor: '# 28292c', moving: false, // Proprietà personalizzata per l'asse di movimento: 0 // Proprietà personalizzata per l'asse X);
Anche in questo caso, puoi dare un nome a queste proprietà come vuoi, oppure puoi anche creare variabili dedicate per loro, ma ti consiglio vivamente di usare questo metodo perché salva la memoria ed è più facile da leggere rispetto a un mucchio di variabili sparse sul tuo bel file.
Ora useremo il TouchStart evento per ottenere la posizione del nostro dito quando tocca lo schermo:
win.addEventListener ('touchstart', function (e) // Ottieni posizione orizzontale iniziale e.source.axis = parseInt (e.x);); Qui prendiamo la coordinata orizzontale (ex) del nostro evento, analizzarlo come un numero intero e quindi salvarlo nella nostra proprietà personalizzata asse.
Ora andiamo ad animare la finestra a seconda della posizione del nostro dito:
win.addEventListener ('touchmove', function (e) // Sottrai la posizione corrente all'avvio della posizione orizzontale var coordinates = parseInt (e.globalPoint.x) - e.source.axis; // Rileva movimento dopo uno spostamento di 20px se ( coordinate> 20 || coordinate < -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) // Questo renderà l'animazione più fluida e renderà meno jumpy navWindow.animate (left: coordinates, duration: 20); // Definizione delle coordinate come posizione finale sinistra navWindow.left = coordinate; ); Per evitare che la finestra si sposti ogni volta che la tocchiamo, stiamo aspettando un movimento di oltre 20 pixel prima dell'animazione. Seguiamo il nostro tocco coordinato con e.globalPoint.x e sottraetelo al nostro punto di partenza (asse) così possiamo spostare la finestra. Inoltre, non può scorrere oltre la larghezza del menu (150 pixel) o oltre il lato sinistro dello schermo.
Se provi a eseguire la tua app, vedrai che la tua finestra rimarrà esattamente dove la lasci. Non è quello che vogliamo. Abbiamo bisogno di riposizionarlo quando l'evento di tocco è finito, quindi si aprirà / chiuderà se stesso a seconda di dove si trova:
win.addEventListener ('touchend', function (e) // Non sposta più la finestra 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; ); Quando il nostro dito non tocca più lo schermo, il touchend l'evento è licenziato, quindi possiamo regolare la posizione della nostra finestra.
Sono stati fatti! Come vedi, abbiamo usato un'animazione e una matematica molto elementari per ottenere un grande effetto professionale. Spero davvero che ti sia piaciuto questo tutorial e ho imparato alcuni nuovi trucchi!
