Share
Los sistemas de menús detallados permiten al usuario seleccionar un elemento del menú, ver la página del elemento y luego "profundizar" o volver a subir un nivel. Un ejemplo perfecto es la aplicación de configuración en iOS.
Si intentas construir esto para Android, notarás que no funciona. Esto se debe a que Android no utiliza TableViews de la misma manera que lo hace iOS. Esto es lo que el empleado de Appcelerator, Dan Thorpe, tuvo que decir en este hilo:
Vamos a analizar la creación de una capa central que funcione en todas las plataformas compatibles con todos los dispositivos. Para hacer eso, básicamente tendrá que ser en su mayoría sin interfaz de usuario y la característica de la interfaz de usuario será impulsada por lo que es una capacidad en todas las plataformas. Por ejemplo, Blackberry no proporciona pestañas en absoluto. Habiendo dicho eso. Si quieres una aplicación sin cambios en la interfaz de usuario, podrás crear una.
También vamos a trabajar en explotar, de forma no multiplataforma, las características específicas de la plataforma. Por ejemplo, actividades de Android, intenciones, notificaciones, servicios, etc. estarán en el espacio de nombres de Ti.Android y, si utiliza esas funciones para crear una aplicación de Android de la mejor categoría, sus usuarios lo apreciarán..
Para la experiencia de usuario ideal (UX), debe escribir a las metáforas de la interfaz de usuario de la plataforma que utiliza el Usuario y seguir la UX de esa plataforma. Eso funciona en todos los sentidos. Un usuario de iPhone se confundiría con un verdadero puerto de una aplicación de Android. Un usuario de Blackberry ni siquiera podría usar un verdadero puerto de una aplicación de iPhone si tuviera un dispositivo solo para teclado.
La fortaleza de Titanium, IMO, es un conjunto común de herramientas, un solo idioma y soporte de biblioteca multiplataforma en todas partes donde podemos proporcionarlo.
Crea un nuevo proyecto en titanio. El nombre no importa. Sin embargo, si descarga mi código de muestra, puede usar el botón "Importar proyecto" en la barra de herramientas para seleccionar la carpeta que contiene el archivo tiapp.xml, que, como su nombre indica, importará el proyecto.
Si abrimos el archivo Resources / app.js, veremos el código Titanium predeterminado. Sin embargo, no queremos la mayor parte de ese código. Reducirlo a esto:
Accentsconagua
// esto establece el color de fondo del UIView maestro (cuando no hay ventanas / grupos de pestañas en él) Titanium.UI.setBackgroundColor ('# 000'); // crear grupo de pestañas var tabGroup = Titanium.UI.createTabGroup (); // crear la pestaña de UI base y la ventana raíz var win1 = Titanium.UI.createWindow (title: 'Tab 1', backgroundColor: '# fff'); var tab1 = Titanium.UI.createTab (title: 'Tab 1', ventana: win1); // nuestro menú desplegable va aquí // agregar pestañas tabGroup.addTab (tab1); // grupo de pestañas abiertas tabGroup.open (); Ahora tenemos un buen punto de partida. Probablemente te estés preguntando sobre el grupo de pestañas con 1 pestaña. Por alguna razón, con Titanium necesita usar pestañas para crear un menú detallado. Sigamos adelante y pulsemos "Launch" en Titanium y veamos lo que obtenemos..
Uh oh, eso no es bueno. No queremos tener una gran pestaña abajo!
Afortunadamente esta es una solución bastante fácil. Simplemente establece la propiedad 'tabBarHidden' en true para win1. Mientras estamos en ello, vamos a cambiar el nombre de la ventana. Tu código ahora debería verse así:
// crear la pestaña UI base y la ventana raíz var win1 = Titanium.UI.createWindow (title: 'My Drilldown', backgroundColor: '# fff', tabBarHidden: true);
Ah eso es mejor.
La parte más importante de esta aplicación es TableView, que mostrará las filas de opciones al usuario. Vamos a crearlo ahora y colocarlo donde el comentario que dice "nuestro menú de detalles va aquí":
// crear el contenedor del menú principal var main_menu = Ti.UI.createTableView (style: Titanium.UI.iPhone.TableViewStyle.GROUPED, desplazable: false); win1.add (main_menu);
Observe cómo hemos evitado que la tabla se desplace. Esto es a veces deseable si solo tiene algunos elementos de menú.
Ahora que hemos creado la tabla principal, agreguemos las filas que se "vincularán" a las subvistas de tabla:
// primera fila de opciones var firstItemRow = Ti.UI.createTableViewRow (hasChild: true); var firstItemLabel = Ti.UI.createLabel (izquierda: 9, texto: "Esta es la primera opción"); firstItemRow.add (firstItemLabel); main_menu.appendRow (firstItemRow); // finaliza la primera fila de opciones
Bien, entonces hicimos algunas cosas en ese bloque. Primero, creamos una fila de tabla en blanco y establecimos la propiedad 'hasChild' en verdadero. Esto hace que la pequeña flecha gris aparezca en el lado derecho de la fila. A continuación, creamos una etiqueta y la agregamos a la fila de la tabla que una vez estaba en blanco. Luego agregamos la fila al menú. Repitamos este proceso 3 veces más para que ahora tengamos 4 opciones del menú principal y un código que se parece a esto:
// esto establece el color de fondo del UIView maestro (cuando no hay ventanas / grupos de pestañas en él) Titanium.UI.setBackgroundColor ('# 000'); // crear grupo de pestañas var tabGroup = Titanium.UI.createTabGroup (); // crear la pestaña UI base y la ventana raíz var win1 = Titanium.UI.createWindow (title: 'Tab 1', backgroundColor: '# fff', tabBarHidden: true); var tab1 = Titanium.UI.createTab (title: 'Tab 1', ventana: win1); // crear el contenedor del menú principal var main_menu = Ti.UI.createTableView (style: Titanium.UI.iPhone.TableViewStyle.GROUPED, desplazable: false); // primera fila de opciones var firstItemRow = Ti.UI.createTableViewRow (hasChild: true); var firstItemLabel = Ti.UI.createLabel (izquierda: 9, texto: "Esta es la primera opción"); firstItemRow.add (firstItemLabel); main_menu.appendRow (firstItemRow); // terminar la primera fila de opciones // la segunda fila de opciones var secondItemRow = Ti.UI.createTableViewRow (hasChild: true); var secondItemLabel = Ti.UI.createLabel (izquierda: 9, texto: "Esta es la segunda opción"); secondItemRow.add (secondItemLabel); main_menu.appendRow (secondItemRow); // terminar la segunda fila de opciones // tercera fila de la opción var thirdItemRow = Ti.UI.createTableViewRow (hasChild: true); var thirdItemLabel = Ti.UI.createLabel (izquierda: 9, texto: "Esta es la tercera opción"); thirdItemRow.add (thirdItemLabel); main_menu.appendRow (thirdItemRow); // terminar la tercera fila de opciones // la cuarta fila de opciones var fourthItemRow = Ti.UI.createTableViewRow (hasChild: true); var fourthItemLabel = Ti.UI.createLabel (izquierda: 9, texto: "Esta es la cuarta opción"); fourthItemRow.add (fourthItemLabel); main_menu.appendRow (fourthItemRow); // finaliza la cuarta fila de opciones win1.add (main_menu); // agregar tabs tabGroup.addTab (tab1); // grupo de pestañas abiertas tabGroup.open (); Tu aplicación ahora debería verse así:
Crear los submenús es un proceso simple. Creas una nueva ventana y le agregas cosas. Sin embargo, el truco está en mostrar esta nueva ventana como parte de un desglose. Supongo que a estas alturas ya estás familiarizado con la creación de ventanas en Titanium, por lo que solo estoy proporcionando un código de relleno a continuación que se integra bien con el código anterior
// sub-ventana 1 var sub_win1 = Ti.UI.createWindow (title: 'Sub-Window 1'); var sub_table1 = Ti.UI.createTableView (style: Titanium.UI.iPhone.TableViewStyle.GROUPED); var sub_row1 = Ti.UI.createTableViewRow (); var sub_label1 = Ti.UI.createLabel (left: 9, text: "¡Esta es una subopción!"); sub_row1.add (sub_label1); sub_table1.appendRow (sub_row1); sub_win1.add (sub_table1); // subventana 2 var sub_win2 = Ti.UI.createWindow (title: 'Sub-Window 2'); var sub_table2 = Ti.UI.createTableView (style: Titanium.UI.iPhone.TableViewStyle.GROUPED); var sub_row2 = Ti.UI.createTableViewRow (); var sub_label2 = Ti.UI.createLabel (left: 9, text: "¡Esta es una subopción!"); sub_row2.add (sub_label2); sub_table2.appendRow (sub_row2); sub_win2.add (sub_table2); // sub window 3 var sub_win3 = Ti.UI.createWindow (title: 'Sub-Window 3'); var sub_table3 = Ti.UI.createTableView (style: Titanium.UI.iPhone.TableViewStyle.GROUPED); var sub_row3 = Ti.UI.createTableViewRow (); var sub_label3 = Ti.UI.createLabel (left: 9, text: "¡Esta es una subopción!"); sub_row3.add (sub_label3); sub_table3.appendRow (sub_row3); sub_win3.add (sub_table3); // subventana 4 var sub_win4 = Ti.UI.createWindow (title: 'Sub-Window 4'); var sub_table4 = Ti.UI.createTableView (style: Titanium.UI.iPhone.TableViewStyle.GROUPED); var sub_row4 = Ti.UI.createTableViewRow (); var sub_label4 = Ti.UI.createLabel (left: 9, text: "¡Esta es una subopción!"); sub_row4.add (sub_label4); sub_table4.appendRow (sub_row4); sub_win4.add (sub_table4);
Aquí es donde ocurre la magia: eventos. Al vincular una función a la escucha de eventos 'clic' podemos manejar lo que sucede cuando se selecciona una fila en un TableView. Vamonos!
// agregar el evento al primer elemento firstItemRow.addEventListener ('click', function (e) tab1.open (sub_win1);); // agregar el evento al segundo elemento secondItemRow.addEventListener ('click', function (e) tab1.open (sub_win2);); // agregar el evento al tercer elemento thirdItemRow.addEventListener ('click', function (e) tab1.open (sub_win3);); // agregar el evento al cuarto elemento fourthItemRow.addEventListener ('click', function (e) tab1.open (sub_win4);); Sorprendentemente simple, ¿no es así? Simplemente volvemos a la pestaña "invisible" que tenemos y abrimos una nueva ventana. Si pulsa "Iniciar" para esta aplicación en Titanium, puede ver que los botones de retroceso se generan automáticamente para usted.!
"La navegación de 2 niveles es excelente", se podría decir, "¡pero quiero una navegación de 3 o 4 o 5 niveles!" Afortunadamente, simplemente puede seguir el mismo procedimiento que se mostró anteriormente. Recuerde, no importa qué tan profundo esté en la navegación, siempre puede llamar a tab1.open () y moverse aún más profundo. El titanio es una herramienta fantástica y flexible..
