Share
Denna handledning lär dig hur man bygger en glidande meny som liknar den som finns i Facebook-programmet med Titanium Mobile.
Glidmenyn består av ett stort fönster (huvudfönstret) ovanpå en mindre som innehåller en tabellvy (menyn). För att skapa glidande effekt måste vi utlösa en animering som spårar och följer en beröringshändelse horisontellt. Låt oss dock spara det för senare. För nu börjar vi med att ställa in fönstren.
Först ska vi skapa menyn:
//// ---- Menyfönster, placerat till vänster var menynWindow = Ti.UI.createWindow (topp: 0, vänster: 0, bredd: 150); menuWindow.open (); //// ---- Menybord // Menyn Titlar var menyTitlar = [titel: 'Meny 1', titel: 'Meny 2', titel: 'Meny 3', titel: 'Meny 4 ', title:' Menu 5 ', title:' Menu 6 ']; // Tableview var tableView = Ti.UI.createTableView (data: menuTitles); menuWindow.add (Tableview);
Det här är en väldigt grundläggande tabellvisning, men det kommer att göra. Så du borde nu ha något som följande:
Nu behöver vi ett fönster med en navigeringsfält och en knapp i den som tillåter oss att öppna menyn med en animering. För att uppnå detta behöver vi faktiskt två fönster: en som innehåller en navigeringsgrupp (oumbärlig för att ha en navigeringsfält) och en annan som är i navigationsgruppen:
//// ---- Fönster med navigeringsgrupp var navWindow = Ti.UI.createWindow (bredd: 320 // Ställ in bredden på glidfönstret för att undvika skärning från animering); navWindow.open (); // Huvudfönster var vinna = Ti.UI.createWindow (title: 'Main Window', backgroundColor: '# 28292c', barColor: '# 28292c'); // NavigationGroup var navGroup = Ti.UI.iPhone.createNavigationGroup (fönster: win); navWindow.add (navGroup); // Topp vänster knapp var menyButton = Ti.UI.createButton (title: 'Meny', växla: false // Anpassad egenskap för menyväxling); win.setLeftNavButton (MenuButton);
Hej, du märkte förmodligen det Växla: true egendom i vår knapp, eller hur? Det finns inte egentligen; Det är en egen egenskap som jag lagt till. Du kan ganska mycket namnge det men du vill eller ens skapa en variabel för den (som var toggle = true;) om det gör dig mer bekväm. Jag rekommenderar dock att du använder det här lilla tricket eftersom det är väldigt användbart när du har många anpassade egenskaper i din app.
Här är vårt huvudfönster:
Okej, nu ska vi animera vårt fönster så det glider från vänster till höger när vi trycker på "Meny" -knappen.
Låt oss se hur det fungerar:
Accentsconagua
menuButton.addEventListener ('klicka', funktion (e) // Om menyn öppnas om (e.source.toggle == true) navWindow.animate (vänster: 0, längd: 400, kurva: Ti.UI .ANIMATION_CURVE_EASE_IN_OUT); e.source.toggle = false; // Om menyn inte öppnas annars navWindow.animate (vänster: 150, längd: 400, kurva: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT); source.toggle = true;); Du ser att när vi klickar på knappen, vi ringer funktion (e), var e är vårt objekt (knappen). Genom att ringa e.source.toggle, vi kontrollerar den anpassade "byta" egendomen som diskuteras ovan (du kan också använda menuButton.toggle, det är samma sak). Om det är falsk, vi flyttar vårt fönster till höger och byter egenskapen till Sann. Så, naturligtvis, om det är Sann, Fönstret går tillbaka till normalt och vår egendom är då inställd på falsk igen.
De kurva: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT är bara ett sätt att släta animeringen.
Ja, det här ser ganska snyggt ut, eller hur? Men det var den enkla delen, för nu blir vi allvarliga! Vi spårar en touch-händelse så att vi kan avslöja menyn genom att flytta huvudfönstret horisontellt. Men innan det lägger vi till några anpassade egenskaper:
// Main window var win = Ti.UI.createWindow (title: 'Main Window', backgroundColor: '# 28292c', barColor: '# 28292c', flyttning: false, // Anpassad egendom för rörelseaxel: 0 // Anpassad egenskap för X-axeln);
Återigen kan du namnge dessa egenskaper men du vill, eller du kan till och med skapa dedikerade variabler för dem, men jag rekommenderar starkt att du använder den här metoden eftersom den sparar minne och det är lättare att läsa än en massa variabler spridda över din trevliga fil.
Nu ska vi använda touchstart händelse för att få platsen för vårt finger när det rör på skärmen:
win.addEventListener ('touchstart', funktion (e) // Starta horisontellt läge e.source.axis = parseInt (e.x);); Här tar vi den horisontella koordinaten (ex) av vår händelse, analysera det som ett heltal och spara sedan det i vår egen egendom axel.
Nästa kommer vi att animera fönstret beroende på fingerens position:
win.addEventListener ('touchmove', funktion (e) // Subtrahera nuvarande position till start horisontell position var koordinater = parseInt (examplelobalPoint.x) - e.source.axis; // Upptäcka rörelse efter en 20px skift om koordinater> 20 || koordinater < -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) // Det här släpper animeringen och gör det mindre hoppigt navWindow.animate (vänster: koordinater, längd: 20); // Definiera koordinater som sista vänsterposition navWindow.left = koordinater; ); För att förhindra att fönstret rör sig varje gång vi rör det, väntar vi på en rörelse över 20 pixlar innan den animeras. Vi spårar vår kontaktkoordinat med e.globalPoint.x och subtrahera den till vår utgångspunkt (axel) så vi kan flytta fönstret. Det går inte att glida bortom menybredden (150 pixlar) eller bortom vänster på skärmen.
Om du försöker köra din app ser du att ditt fönster kommer att förbli exakt var du lämnar det. Det är inte vad vi vill ha. Vi behöver förflytta den när beröringshändelsen är över, så den kommer att öppna / stänga sig beroende på var den är:
win.addEventListener ('touchend', funktion (e) // Flytta inte fönstret längre e.source.moving = false; om (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; ); När vårt finger inte längre berör skärmen, så touchend händelsen är avfyrade, så vi kan justera placeringen av vårt fönster.
Var gjort! Som du ser använde vi en mycket grundläggande animering och matte för att uppnå en bra och professionell effekt. Jag hoppas verkligen att du haft denna handledning och lärde dig några nya knep!
