Share
In diesem Lernprogramm erfahren Sie, wie Sie ein gleitendes Menü erstellen, das dem Menü der Facebook-Anwendung mit Titanium Mobile ähnelt.
Das verschiebbare Menü besteht aus einem Fenster in voller Größe (dem Hauptfenster) und einem kleineren, das eine Tabellenansicht (das Menü) enthält. Um den gleitenden Effekt zu erzeugen, müssen wir eine Animation auslösen, die ein Berührungsereignis horizontal verfolgt und verfolgt. Lassen Sie uns das jedoch für später aufheben. Fürs Erste beginnen wir mit dem Einrichten der Fenster.
Zuerst erstellen wir das Menü:
//// ---- Menüfenster, links positioniert var menuWindow = Ti.UI.createWindow (oben: 0, links: 0, Breite: 150); menuWindow.open (); //// ---- Menütabelle // Menütitel 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);
Dies ist eine sehr einfache Einrichtung der Tabellensicht, die aber ausreicht. Du solltest nun also etwa folgendes haben:
Nun benötigen wir ein Fenster mit einer Navigationsleiste und einer Schaltfläche, mit der wir das Menü mit einer Animation öffnen können. Um dies zu erreichen, benötigen wir tatsächlich zwei Fenster: eines mit einer Navigationsgruppe (unverzichtbar für eine Navigationsleiste) und ein anderes Fenster im die navigationGroup:
//// ---- Fenster mit navigationGroup var navWindow = Ti.UI.createWindow (width: 320 // Setzt die Breite des Schiebefensters, um das Ausschneiden der Animation zu vermeiden); navWindow.open (); // Hauptfenster var win = Ti.UI.createWindow (title: 'Hauptfenster', backgroundColor: '# 28292c', barColor: '# 28292c'); // NavigationGroup var navGroup = Ti.UI.iPhone.createNavigationGroup (window: win); navWindow.add (navGroup); // Taste oben links var menuButton = Ti.UI.createButton (title: 'Menu', toggle: false // Benutzerdefinierte Eigenschaft für die Menüumschaltung); win.setLeftNavButton (menuButton);
Hey, das hast du wahrscheinlich bemerkt Toggle: wahr Eigenschaft in unserem Button, richtig? Es existiert nicht wirklich; Es ist eine benutzerdefinierte Eigenschaft, die ich hinzugefügt habe. Sie können sie beliebig benennen oder sogar eine Variable dafür erstellen (wie var toggle = true;) wenn Sie sich wohler fühlen. Ich empfehle Ihnen jedoch, diesen kleinen Trick zu verwenden, da er sehr praktisch ist, wenn Sie viele benutzerdefinierte Eigenschaften in Ihrer App haben.
Hier ist unser Hauptfenster:
Okay, jetzt animieren wir unser Fenster so, dass es von links nach rechts gleitet, wenn wir die "Menü" -Taste drücken.
Mal sehen, wie es funktioniert:
Accentsconagua
menuButton.addEventListener ('click', Funktion (e) // Wenn das Menü geöffnet wird, wenn (e.source.toggle == true) navWindow.animate (left: 0, Dauer: 400, Kurve: Ti.UI .ANIMATION_CURVE_EASE_IN_OUT); e.source.toggle = false; // Wenn das Menü nicht geöffnet wird, navWindow.animate (left: 150, Dauer: 400, Kurve: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT); e. source.toggle = true;); Sie sehen, wenn wir auf die Schaltfläche klicken, rufen wir an Funktion (e), woher e ist unser Objekt (der Knopf). Durch anrufen e.source.toggle, Wir prüfen die oben beschriebene benutzerdefinierte "Toggle" -Eigenschaft (Sie können auch verwenden menuButton.toggle, das ist gleich). Wenn es so ist falsch, Wir bewegen unser Fenster nach rechts und wechseln die Eigenschaft auf wahr. Also natürlich, wenn es so ist wahr, Das Fenster wird wieder normal und unsere Eigenschaft wird auf gesetzt falsch nochmal.
Das Kurve: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT ist nur eine Möglichkeit, die Animation zu glätten.
Ja, das sieht hübsch aus, oder? Aber das war der einfache Teil, denn jetzt wird es ernst! Wir verfolgen ein Berührungsereignis, sodass wir das Menü durch horizontales Verschieben des Hauptfensters anzeigen können. Zuvor fügen wir jedoch einige benutzerdefinierte Eigenschaften hinzu:
// Hauptfenster var win = Ti.UI.createWindow (Titel: 'Hauptfenster', backgroundColor: '# 28292c', barColor: '# 28292c', Verschieben: false, // Benutzerdefinierte Eigenschaft für Bewegungsachse: 0 // Benutzerdefinierte Eigenschaft für die X-Achse);
Sie können diese Eigenschaften auch beliebig benennen, oder Sie können sogar dedizierte Variablen für sie erstellen. Ich empfehle jedoch strogly, dass Sie diese Methode verwenden, da sie Speicherplatz spart und einfacher zu lesen ist als eine Reihe von über Ihre nette Datei verteilten Variablen.
Jetzt benutzen wir die Touchstart Ereignis, um die Position unseres Fingers zu ermitteln, wenn er den Bildschirm berührt:
win.addEventListener ('touchstart', function (e) // Horizontale Startposition erhalten e.source.axis = parseInt (e.x);); Hier nehmen wir die horizontale Koordinate (Ex) unseres Ereignisses, analysieren Sie es als Ganzzahl und speichern Sie es dann in unserem benutzerdefinierten Eigentum Achse.
Als Nächstes animieren wir das Fenster abhängig von der Position unseres Fingers:
win.addEventListener ('touchmove', Funktion (e) // Subtrahieren der aktuellen Position zur horizontalen Startposition var-Koordinaten = parseInt (e.globalPoint.x) - e.source.axis; // Erkennen von Bewegungen nach einer 20px-Verschiebung if ( Koordinaten> 20 || Koordinaten < -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) // Dies glättet die Animation und macht sie weniger nervös. NavWindow.animate (links: Koordinaten, Dauer: 20); // Koordinaten als letzte Position links definieren navWindow.left = Koordinaten; ); Um zu verhindern, dass sich das Fenster bei jeder Berührung bewegt, warten wir auf eine Bewegung von mehr als 20 Pixeln, bevor wir die Animation starten. Wir verfolgen unsere Berührung mit e.globalPoint.x und subtrahieren Sie es zu unserem Ausgangspunkt (Achse) so können wir das Fenster verschieben. Es kann auch nicht über die Menübreite (150 Pixel) oder über die linke Seite des Bildschirms gleiten.
Wenn Sie versuchen, Ihre App auszuführen, werden Sie feststellen, dass Ihr Fenster genau dort bleibt, wo Sie es verlassen. Das wollen wir nicht. Wir müssen es neu positionieren, wenn das Berührungsereignis vorbei ist, sodass es sich je nach Ort öffnet / schließt:
win.addEventListener ('touchend', function (e) // Das Fenster wird nicht mehr bewegt. 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; ); Wenn unser Finger den Bildschirm nicht mehr berührt, wird der touchend Ereignis wird ausgelöst, damit wir die Position unseres Fensters anpassen können.
Wir sind fertig! Wie Sie sehen, haben wir eine sehr einfache Animation und Mathematik verwendet, um eine großartige und professionelle Wirkung zu erzielen. Ich hoffe wirklich, dass Ihnen dieses Tutorial gefallen hat und Sie ein paar neue Tricks gelernt haben!
