Share
In deze zelfstudie leer je hoe je een glijdend menu kunt maken dat lijkt op dat van de Facebook-applicatie met Titanium Mobile.
Het schuifmenu bestaat uit een volledig venster (het hoofdvenster) bovenop een kleiner venster met een tabelweergave (het menu). Om het glijdende effect te creëren, moeten we een animatie activeren die een aanraakgebeurtenis horizontaal volgt en volgt. Laten we dat echter bewaren voor later. Voor nu beginnen we met het instellen van de vensters.
Eerst maken we het menu:
//// ---- Menuvenster, gepositioneerd aan de linker var-menuWindow = Ti.UI.createWindow (top: 0, left: 0, width: 150); menuWindow.open (); //// ---- Menutabel // Menutitels var menuTitles = [title: 'Menu 1', title: 'Menu 2', title: 'Menu 3', title: 'Menu 4 ', title:' Menu 5 ', title:' Menu 6 ']; // Tableview var tableView = Ti.UI.createTableView (data: menuTitles); menuWindow.add (TableView);
Dit is een heel eenvoudige opstelling van de tabelweergave, maar het zal het doen. Dus je zou nu iets als het volgende moeten hebben:
Nu hebben we een venster met een navigatiebalk en een knop daarin nodig waarmee we het menu kunnen openen met een animatie. Dus om dit te bereiken hebben we eigenlijk twee vensters nodig: een met een navigationGroup (onmisbaar om een navigatiebalk te hebben) en een andere die is in de navigationGroup:
//// ---- Venster met navigatieGroep var navWindow = Ti.UI.createWindow (width: 320 // Stel de breedte van het schuifvenster in om te voorkomen dat de animatie wordt verwijderd; navWindow.open (); // Hoofdvenster var win = Ti.UI.createWindow (title: 'Main Window', backgroundColor: '# 28292c', barColor: '# 28292c'); // NavigationGroup var navGroup = Ti.UI.iPhone.createNavigationGroup (window: win); navWindow.add (navGroup); // Linkerbovenknop var menuButton = Ti.UI.createButton (title: 'Menu', toggle: false // Aangepaste eigenschap voor menuknop); win.setLeftNavButton (MENUknop);
Hé, dat heb je waarschijnlijk al gemerkt toggle: true eigendom in onze knop, toch? Het bestaat niet echt; het is een aangepaste eigenschap die ik heb toegevoegd. Je kunt het vrij vaak noemen zoals je wilt of er zelfs een variabele voor maken (zoals var toggle = true;) als u zich er comfortabeler door voelt. Ik raad u echter aan deze kleine truc te gebruiken, omdat het erg handig is als u veel aangepaste eigenschappen in uw app heeft.
Dit is ons hoofdvenster:
Oké, nu gaan we ons venster animeren zodat het van links naar rechts glijdt wanneer we op de knop "Menu" drukken.
Laten we kijken hoe het werkt:
Accentsconagua
menuButton.addEventListener ('klik', functie (e) // Als het menu wordt geopend als (e.source.toggle == true) navWindow.animate (left: 0, duration: 400, curve: Ti.UI .ANIMATION_CURVE_EASE_IN_OUT); e.source.toggle = false; // Als het menu niet anders wordt geopend navWindow.animate (left: 150, duration: 400, curve: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT); e. source.toggle = true;); Dat zie je als we op de knop klikken functie (e), waar e is ons object (de knop). Door te bellen e.source.toggle, we controleren de hierboven besproken aangepaste "schakel" -eigenschap (u kunt ook gebruiken menuButton.toggle, Het is hetzelfde). Als het is vals, we verplaatsen ons venster naar rechts en schakelen het eigendom over naar waar. Dus, natuurlijk, als dat zo is waar, het venster gaat terug naar normaal en onze eigenschap is dan ingesteld op vals nog een keer.
De curve: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT is slechts een manier om de animatie glad te strijken.
Ja, dit ziet er goed uit, toch? Maar dat was het gemakkelijke deel, want nu worden we serieus! We volgen een aanraakgebeurtenis zodat we het menu kunnen onthullen door het hoofdvenster horizontaal te verplaatsen. Maar daarvoor voegen we enkele aangepaste eigenschappen toe:
// Hoofdvenster var win = Ti.UI.createWindow (title: 'Main Window', backgroundColor: '# 28292c', barColor: '# 28292c', moving: false, // Aangepaste eigenschap voor bewegingsas: 0 // Aangepaste eigenschap voor X-as);
Nogmaals, je kunt deze eigenschappen naar eigen inzicht benoemen, of je kunt zelfs speciale variabelen voor ze maken, maar ik raad je aan om deze methode te gebruiken omdat het geheugen wordt opgeslagen en het gemakkelijker te lezen is dan een aantal variabelen verspreid over je mooie bestand..
Nu gaan we de gebruiken touchstart evenement om de positie van onze vinger te bepalen wanneer deze het scherm raakt:
win.addEventListener ('touchstart', functie (e) // Start horizontale positie e.source.axis = parseInt (e.x);); Hier nemen we de horizontale coördinaat (ex) van onze gebeurtenis, ontleed het als een geheel getal en sla het vervolgens op in ons aangepaste eigendom as.
Vervolgens gaan we het venster animeren, afhankelijk van de positie van onze vinger:
win.addEventListener ('touchmove', functie (e) // Huidige positie aftrekken naar horizontale startpositie var-coördinaten = parseInt (e.g.lobalPoint.x) - e.source.axis; // Beweging detecteren na een shift van 20 px als ( coördinaten> 20 || coördinaten < -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) // Dit maakt de animatie vloeiend en maakt het minder springerig navWindow.animate (left: coordinates, duration: 20); // Definiëren van coördinaten als de laatste linker positie navWindow.left = coördinaten; ); Om te voorkomen dat het venster telkens wanneer we het aanraken verplaatst, wachten we op een beweging van meer dan 20 pixels voordat we animeren. We volgen onze contactcoördinaten met e.globalPoint.x en trek het af naar ons startpunt (as) zodat we het venster kunnen verplaatsen. Het kan ook niet voorbij de menubreedte (150 pixels) of voorbij de linkerkant van het scherm schuiven.
Als u uw app probeert uit te voeren, ziet u dat uw venster precies op de plaats blijft waar u het verlaat. Dat is niet wat we willen. We moeten het opnieuw positioneren wanneer de aanraakgebeurtenis voorbij is, dus het zal zichzelf openen / sluiten afhankelijk van waar het is:
win.addEventListener ('touchend', functie (e) // Het venster wordt niet langer verplaatst 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; ); Wanneer onze vinger niet langer het scherm aanraakt, de touchend evenement wordt afgevuurd, zodat we de positie van ons venster kunnen aanpassen.
Werden gedaan! Zoals je ziet, hebben we een heel eenvoudige animatie en wiskunde gebruikt om een geweldig en professioneel effect te bereiken. Ik hoop echt dat je deze tutorial leuk vond en een paar nieuwe trucs hebt geleerd!
