Share
Este tutorial le enseñará cómo crear un menú deslizante similar al que se muestra en la aplicación de Facebook usando Titanium Mobile.
El menú deslizante consiste en una ventana de tamaño completo (la ventana principal) sobre una más pequeña que contiene una vista de tabla (el menú). Para crear el efecto deslizante, tendremos que activar una animación que rastreará y seguirá un evento táctil horizontalmente. Sin embargo, vamos a guardar eso para más tarde. Por ahora, empezaremos por configurar las ventanas..
Primero, crearemos el menú:
//// ---- Ventana de menú, situada a la izquierda var menuWindow = Ti.UI.createWindow (arriba: 0, izquierda: 0, ancho: 150); menuWindow.open (); //// ---- Tabla de menús // Títulos de menú var menuTitles = [title: 'Menu 1', title: 'Menu 2', title: 'Menu 3', title: 'Menu 4 ', título:' Menú 5 ', título:' Menú 6 ']; // Tableview var tableView = Ti.UI.createTableView (data: menuTitles); menuWindow.add (tableView);
Esta es una configuración de vista de tabla muy básica, pero lo hará. Así que ahora deberías tener algo como lo siguiente:
Ahora necesitamos una ventana con una barra de navegación y un botón que nos permita abrir el menú con una animación. Entonces, para lograr esto, necesitamos dos ventanas: una que contenga un Grupo de navegación (indispensable para tener una barra de navegación) y otra que sea en el grupo de navegación:
//// ---- Ventana con navigationGroup var navWindow = Ti.UI.createWindow (width: 320 // Establezca el ancho de la ventana deslizante para evitar que se corte de la animación); navWindow.open (); // Ventana principal var win = Ti.UI.createWindow (title: 'Main Window', backgroundColor: '# 28292c', barColor: '# 28292c'); // NavigationGroup var navGroup = Ti.UI.iPhone.createNavigationGroup (window: win); navWindow.add (navGroup); // Botón superior izquierdo var menuButton = Ti.UI.createButton (title: 'Menu', toggle: false // Propiedad personalizada para el cambio de menú); win.setLeftNavButton (menuButton);
Hey, probablemente notaste que toggle: true Propiedad en nuestro botón, ¿verdad? Realmente no existe; Es una propiedad personalizada que agregué. Puedes nombrarlo como quieras o incluso crear una variable para él (como var toggle = true;) Si te hace sentir más cómodo. Sin embargo, te recomiendo que utilices este pequeño truco porque es realmente útil cuando tienes muchas propiedades personalizadas en tu aplicación..
Aquí está nuestra ventana principal:
Bien, ahora vamos a animar nuestra ventana para que se deslice de izquierda a derecha cuando presionamos el botón "Menú".
Vamos a ver cómo funciona:
Accentsconagua
menuButton.addEventListener ('click', function (e) // Si el menú se abre si (e.source.toggle == true) navWindow.animate (left: 0, duration: 400, curve: Ti.UI .ANIMATION_CURVE_EASE_IN_OUT); e.source.toggle = false; // Si el menú no está abierto en otro lugar navWindow.animate (left: 150, duration: 400, curve: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT); e. source.toggle = true;); Usted ve que cuando hacemos clic en el botón, llamamos función (e), dónde mi Es nuestro objeto (el botón). Llamando e.source.toggle, estamos verificando la propiedad de "alternar" personalizada discutida anteriormente (también puede usar menuButton.toggle, es lo mismo). Si esto es falso, Estamos moviendo nuestra ventana a la derecha y cambiando la propiedad a cierto. Así que, por supuesto, si es cierto, La ventana vuelve a la normalidad y nuestra propiedad se configura en falso otra vez.
los curva: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT Es solo una forma de suavizar la animación..
Sí, esto se ve bastante limpio, ¿verdad? Pero esa fue la parte fácil, porque ahora nos estamos poniendo serios! Realizaremos un seguimiento de un evento táctil para que podamos revelar el menú moviendo la ventana principal horizontalmente. Pero antes de eso, agregaremos algunas propiedades personalizadas:
// Ventana principal var win = Ti.UI.createWindow (title: 'Main Window', backgroundColor: '# 28292c', barColor: '# 28292c', moving: false, // Propiedad personalizada para el eje de movimiento: 0 // Propiedad personalizada para el eje X);
Nuevamente, puede asignar un nombre a estas propiedades como desee, o incluso puede crear variables dedicadas para ellas, pero le recomiendo que utilice este método porque ahorra memoria y es más fácil de leer que un montón de variables dispersas en su bonito archivo..
Ahora vamos a usar el touchstart Evento para obtener la posición de nuestro dedo cuando toca la pantalla:
win.addEventListener ('touchstart', function (e) // Obtener la posición horizontal inicial e.source.axis = parseInt (e.x);); Aquí tomamos la coordenada horizontal (ex) de nuestro evento, analícelo como un entero y luego guárdelo en nuestra propiedad personalizada eje.
A continuación vamos a animar la ventana dependiendo de la posición de nuestro dedo:
win.addEventListener ('touchmove', function (e) // Resta la posición actual a la posición horizontal inicial. coordenadas = parseInt (e.globalPoint.x) - e.source.axis; // Detecta el movimiento después de un cambio de 20px si ( coordenadas> 20 || coordenadas < -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) // Esto suavizará la animación y la hará menos nerviosa navWindow.animate (izquierda: coordenadas, duración: 20); // Definiendo coordenadas como la posición izquierda final navWindow.left = coordenadas; ); Para evitar que la ventana se mueva cada vez que la tocamos, estamos esperando un movimiento de más de 20 píxeles antes de animar. Hacemos un seguimiento de nuestras coordenadas táctiles con e.globalPoint.x y restarlo a nuestro punto de partida (eje) para que podamos mover la ventana. Además, no puede deslizarse más allá del ancho del menú (150 píxeles) o más allá del lado izquierdo de la pantalla.
Si intentas ejecutar tu aplicación, verás que tu ventana permanecerá exactamente donde la dejas. Eso no es lo que queremos. Necesitamos reposicionarlo cuando finalice el evento táctil, por lo que se abrirá / cerrará dependiendo de dónde se encuentre:
win.addEventListener ('touchend', function (e) // Ya no mueve la ventana 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; ); Cuando nuestro dedo ya no toca la pantalla, el toque evento se dispara, por lo que podemos ajustar la posición de nuestra ventana.
Hemos terminado Como ves, utilizamos una animación y matemáticas muy básicas para lograr un gran efecto profesional. Espero que hayas disfrutado este tutorial y hayas aprendido algunos trucos nuevos.!
