Share
Acest tutorial vă va învăța cum să construiți un meniu alunecător similar cu cel prezentat în aplicația Facebook folosind Titanium Mobile.
Meniul de alunecare constă dintr-o fereastră de dimensiuni complete (fereastra principală) deasupra unei ferestre mai mici, care conține o vizualizare de tabel (meniul). Pentru a crea efectul de alunecare, va trebui să declanșăm o animație care să urmărească și să urmeze un eveniment tactil orizontal. Cu toate acestea, hai să salvăm asta pentru mai târziu. Pentru moment, vom începe prin aranjarea ferestrelor.
În primul rând, vom crea meniul:
//// ---- Fereastra de meniu, poziționată în meniul din stânga varWindow = Ti.UI.createWindow (top: 0, stânga: 0, lățimea: 150); menuWindow.open (); //// ---- Tabelul meniurilor // Titlurile meniurilor var menuTitles = [title: 'Meniu 1', title: 'Meniu 2', title: ' 4 ', title:' Meniu 5 ', title:' Meniu 6 ']; // Tableview var tabView = Ti.UI.createTableView (date: menuTitles); menuWindow.add (tableView);
Aceasta este o setare de bază a tabelului de bază, dar o va face. Deci, acum ar trebui să aveți ceva de genul:
Acum avem nevoie de o fereastră cu o bară de navigare și un buton care să ne permită să deschidem meniul cu o animație. Deci, pentru a realiza acest lucru, avem nevoie de două ferestre: unul care conține un grup de navigare (indispensabil pentru a avea o bară de navigare) și altul care este în navigareaGroup:
//// ---- Window with navigationGroup var navWindow = Ti.UI.createWindow (width: 320 // Setați lățimea ferestrei de alunecare pentru a evita tăierea din animație); navWindow.open (); // fereastra principală var win = Ti.UI.createWindow (title: 'Fereastră principală', fundalColor: '# 28292c', barColor: '# 28292c'); // NavigationGroup var navGroup = Ti.UI.iPhone.createNavigationGroup (fereastră: victorie); navWindow.add (navGroup); // Butonul din partea stângă sus var menuButton = Ti.UI.createButton (title: 'Meniu', comutare: false // proprietate personalizată pentru comutare meniu); win.setLeftNavButton (menuButton);
Hei, probabil ai observat asta comutare: true proprietate în butonul nostru, nu? Nu există într-adevăr; este o proprietate personalizată pe care am adăugat-o. Puteți să o numiți destul de mult, oricum doriți sau chiar să creați o variabilă pentru ea (cum ar fi var toggle = adevărat;) dacă vă face să vă simțiți mai confortabil. Cu toate acestea, vă recomand să utilizați acest truc mic pentru că este foarte util atunci când aveți multe proprietăți personalizate în aplicația dvs..
Aici este fereastra noastră principală:
Bine, acum ne vom anima fereastra astfel încât să alunece de la stânga la dreapta când apăsăm butonul "Meniu".
Să vedem cum funcționează:
Accentsconagua
menuButton.addEventListener ('click', functie (e) // Daca meniul este deschis daca (e.source.toggle == true) navWindow.animate (left: 0, duration: 400, curve: Ti.UI . Dacă nu se deschide meniul navWindow.animate (left: 150, duration: 400, curve: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT); source.toggle = true;); Vedeți că atunci când faceți clic pe buton, sunăm Funcția (e), Unde e este obiectul nostru (butonul). Sunând e.source.toggle, verificăm proprietatea "toggle" personalizată discutată mai sus (puteți utiliza de asemenea menuButton.toggle, e același lucru). Dacă este fals, ne mutăm fereastra spre dreapta și schimbăm proprietatea Adevărat. Deci, bineînțeles, dacă e Adevărat, fereastra se întoarce la normal și proprietatea noastră este apoi setată la fals din nou.
Curba: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT este doar o modalitate de a netezi animația.
Da, asta arată destul de bine, nu? Dar asta a fost partea ușoară, pentru că acum suntem serioși! Vom urmări un eveniment tactil astfel încât să putem dezvălui meniul mutând fereastra principală orizontal. Dar înainte de aceasta, vom adăuga câteva proprietăți personalizate:
// fereastra principală var win = Ti.UI.createWindow (title: 'Fereastră principală', fundalColor: '# 28292c', barColor: '# 28292c', mișcare: falsă, // proprietate particulară pentru axa de mișcare: 0 // Proprietate personalizată pentru axa X);
Din nou, puteți numi aceste proprietăți oricum doriți sau puteți crea chiar și variabile dedicate pentru ele, dar eu vă recomandăm să folosiți această metodă pentru că aceasta economisește memorie și este mai ușor de citit decât o grămadă de variabile împrăștiate peste fișierul tău frumos.
Acum o vom folosi touchstart eveniment pentru a obține poziția degetului nostru când atinge ecranul:
win.addEventListener ('touchstart', funcția (e) // Pregătiți poziția orizontală e.source.axis = parseInt (e.x);); Aici luăm coordonatele orizontale (e.x) al evenimentului nostru, îl parcurgeți ca un număr întreg și apoi salvați-l în proprietatea noastră personalizată axă.
În continuare vom anima fereastra în funcție de poziția degetului nostru:
win.addEventListener ('touchmove', funcția (e) // scăderea poziției curente în poziția orizontală inițială var coordonates = parseInt (eglobalPoint.x) - e.source.axis; // Detectarea mișcării după o schimbare de 20px dacă ( coordonate> 20 || coordonate < -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) // Aceasta va bloca animația și va face mai puțin nervos navWindow.animate (left: coordinates, duration: 20); // Definirea coordonatelor ca poziție finală stânga navWindow.left = coordonate; ); Pentru a preveni mișcarea ferestrei de fiecare dată când o atingem, așteptăm o mișcare de peste 20 de pixeli înainte de animație. Urmărim coordonatele noastre de atingere e.globalPoint.x și să-l scăpăm la punctul de plecare (axă) pentru a putea muta fereastra. De asemenea, nu poate să alunece dincolo de lățimea meniului (150 pixeli) sau dincolo de partea stângă a ecranului.
Dacă încercați să rulați aplicația dvs., veți vedea că fereastra dvs. va rămâne exact în locul în care părăsiți aplicația. Nu asta vrem. Trebuie să îl repoziționăm atunci când evenimentul tactil se termină, așa că se va deschide / închide în funcție de locul în care se află:
win.addEventListener ('atinge', funcția (e) // Nu mai mișcă fereastra e.source.moving = false; dacă (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; ); Când degetul nu mai atinge ecranul touchend evenimentul este declanșat, astfel încât să putem regla poziția ferestrei noastre.
Au fost efectuate! După cum vedeți, am folosit o animație și o matematică foarte elementară pentru a obține un efect profesional și profesional. Sper că te-ai bucurat de acest tutorial și ai învățat câteva trucuri noi!
