Share
Drilldown menysystemer tillater brukeren å velge et menyelement, se elementets side og deretter enten "grave" dypere eller gå opp på ett nivå. Et perfekt eksempel er appen Innstillinger på iOS.
Hvis du prøver å bygge dette for Android, vil du legge merke til at det ikke fungerer. Det er fordi Android ikke bruker TableViews ganske på samme måte som iOS gjør. Her er hva Appcelerator-medarbeider Dan Thorpe måtte si på denne tråden:
Vi skal se på å skape et kjernelag som fungerer på tvers av plattformen på alle støttede enheter. For å gjøre det, må det i utgangspunktet være det meste ikke-brukergrensesnitt, og brukerfunksjonen vil bli drevet av hva som er en evne på alle plattformer. For eksempel gir ikke BlackBerry ingen tabber i det hele tatt. Når det er sagt. Hvis du vil at ingen brukergrensesnitt endrer App, kan du opprette en.
Vi skal også jobbe med å utnytte plattformspesifikke funksjoner på en ikke-kryssplattform måte. For eksempel Android Aktiviteter, Intent, Varsler, Tjenester, osv., Vil de være i Ti.Android namespace, og hvis du bruker disse funksjonene til å bygge en best av Android-appen din, vil brukerne sette pris på det.
For den ideelle brukeropplevelsen (UX) bør du skrive til UI-metaforene på plattformen brukeren bruker og følge UX på den plattformen. Det fungerer på alle måter. En iPhone-bruker ville bli forvirret av en sann port av en Android-app. En BlackBerry-bruker ville ikke engang kunne bruke en sann port av en iPhone-app hvis de bare har en tastatur-enhet.
Titans styrke, IMO, er et vanlig sett med verktøy, et enkelt språk, og kryssplattformsbibliotekstøtte overalt hvor vi kan gi det.
Lag et nytt prosjekt i Titanium. Navnet spiller ingen rolle. Men hvis du laster ned min prøvekode, kan du bruke "Importer prosjekt" -knappen i verktøylinjen for å velge mappen som inneholder tiapp.xml-filen, som, som navnet tilsier, importerer prosjektet.
Hvis vi åpner filen Resources / app.js, vil vi se standard Titanium-koden. Men vi vil ikke ha det meste av den koden. Whittle det ned til dette:
Accentsconagua
// dette setter bakgrunnsfargen til master UIView (når det ikke er noen vinduer / fanegrupper på den) Titanium.UI.setBackgroundColor ('# 000'); // lage kategorien gruppe var tabGroup = Titanium.UI.createTabGroup (); // lage base UI-fanen og rotvinduet var win1 = Titanium.UI.createWindow (title: 'Tab 1', backgroundColor: '# fff'); var tab1 = Titanium.UI.createTab (tittel: 'Tab 1', vindu: win1); // vår drilldown-menyen går her // legge til faner tabGroup.addTab (tab1); // Åpne kategorien kategorien tabGroup.open (); Nå har vi et godt utgangspunkt. Du lurer nok på fanegruppen med 1 fane. Av en eller annen grunn med Titanium må du bruke faner for å lage en drilldown-meny. La oss gå videre og slå "Launch" i Titanium og se hva vi får.
Uh, det er ikke bra. Vi ønsker ikke å ha en stor fan der nede!
Heldigvis er dette en ganske enkel løsning. Bare sett egenskapen 'tabBarHidden' til true for win1. Mens vi er på det, la oss omdøpe vinduet. Koden din skal nå se slik ut:
// lage base UI-fanen og rotvinduet var win1 = Titanium.UI.createWindow (tittel: 'My Drilldown', backgroundColor: '# fff', tabBarHidden: true);
Ah, det er bedre.
Den viktigste delen av denne appen er TableView, som vil vise radene av alternativer til brukeren. La oss lage den nå og legge den inn der kommentaren som sier "vår nedtrekksmeny går her":
// opprett hovedmenybeholderen var main_menu = Ti.UI.createTableView (stil: Titanium.UI.iPhone.TableViewStyle.GROUPED, rullbar: false); win1.add (main_menu);
Legg merke til hvordan vi har forhindret tabellen fra å bli rullet. Dette er noen ganger ønskelig hvis du bare har noen menyelementer.
Nå som vi har opprettet hovedbordet, la vi legge til radene som vil "lenke" til undertabellVisningene:
// første alternativrad var firstItemRow = Ti.UI.createTableViewRow (hasChild: true); var firstItemLabel = Ti.UI.createLabel (left: 9, text: "Dette er det første alternativet"); firstItemRow.add (firstItemLabel); main_menu.appendRow (firstItemRow); // slutt første alternativrad
Ok, så gjorde vi noen ting i den blokken. Først opprettet vi en tom tabellrad og satt 'hasChild' -egenskapen til ekte. Dette gjør at den lille grå pilen vises på høyre side av raden. Deretter opprettet vi en etikett og lagde den til en gang tom tabellrad. Vi deretter legge rad til menyen. La oss gjenta denne prosessen tre ganger, slik at vi nå har 4 hovedmenyalternativer, og kode som ser slik ut:
// dette setter bakgrunnsfargen til master UIView (når det ikke er noen vinduer / fanegrupper på den) Titanium.UI.setBackgroundColor ('# 000'); // lage kategorien gruppe var tabGroup = Titanium.UI.createTabGroup (); // lage base UI-fanen og rotvinduet var win1 = Titanium.UI.createWindow (tittel: 'Tab 1', backgroundColor: '# fff', tabBarHidden: true); var tab1 = Titanium.UI.createTab (tittel: 'Tab 1', vindu: win1); // opprett hovedmenybeholderen var main_menu = Ti.UI.createTableView (stil: Titanium.UI.iPhone.TableViewStyle.GROUPED, rullbar: false); // første alternativrad var firstItemRow = Ti.UI.createTableViewRow (hasChild: true); var firstItemLabel = Ti.UI.createLabel (left: 9, text: "Dette er det første alternativet"); firstItemRow.add (firstItemLabel); main_menu.appendRow (firstItemRow); // slutt første alternativ rad // andre alternativ rad var secondItemRow = Ti.UI.createTableViewRow (hasChild: true); var secondItemLabel = Ti.UI.createLabel (left: 9, text: "Dette er det andre alternativet"); secondItemRow.add (secondItemLabel); main_menu.appendRow (secondItemRow); // End Second Options Row // tredje alternativ rad var thirdItemRow = Ti.UI.createTableViewRow (hasChild: true); var thirdItemLabel = Ti.UI.createLabel (left: 9, text: "Dette er det tredje alternativet"); thirdItemRow.add (thirdItemLabel); main_menu.appendRow (thirdItemRow); // tredje tredje alternativraden // fjerde alternativraden var fourthItemRow = Ti.UI.createTableViewRow (hasChild: true); var fourthItemLabel = Ti.UI.createLabel (left: 9, text: "Dette er det fjerde alternativet"); fourthItemRow.add (fourthItemLabel); main_menu.appendRow (fourthItemRow); // slutten fjerde alternativ rad win1.add (main_menu); // legge til faner tabGroup.addTab (tab1); // Åpne kategorien kategorien tabGroup.open (); Appen din skal nå se slik ut:
Å lage undermenyene er en enkel prosess. Du lager et nytt vindu og legger til ting i den. Imidlertid er kunsten å vise dette nye vinduet som en del av en drilldown. Jeg antar nå at du er kjent med å lage vinduer i titan, så jeg gir bare litt fyllerkoden nedenfor som integrerer godt med koden ovenfor:
// undervindu 1 var sub_win1 = Ti.UI.createWindow (tittel: 'Sub-Window 1'); var sub_table1 = Ti.UI.createTableView (stil: Titanium.UI.iPhone.TableViewStyle.GROUPED); var sub_row1 = Ti.UI.createTableViewRow (); var sub_label1 = Ti.UI.createLabel (venstre: 9, tekst: "Dette er et underalternativ!"); sub_row1.add (sub_label1); sub_table1.appendRow (sub_row1); sub_win1.add (sub_table1); // undervindu 2 var sub_win2 = Ti.UI.createWindow (title: 'Sub-Window 2'); var sub_table2 = Ti.UI.createTableView (stil: Titanium.UI.iPhone.TableViewStyle.GROUPED); var sub_row2 = Ti.UI.createTableViewRow (); var sub_label2 = Ti.UI.createLabel (left: 9, text: "Dette er et underalternativ!"); sub_row2.add (sub_label2); sub_table2.appendRow (sub_row2); sub_win2.add (sub_table2); // undervindu 3 var sub_win3 = Ti.UI.createWindow (tittel: 'Sub-Window 3'); var sub_table3 = Ti.UI.createTableView (stil: Titanium.UI.iPhone.TableViewStyle.GROUPED); var sub_row3 = Ti.UI.createTableViewRow (); var sub_label3 = Ti.UI.createLabel (left: 9, text: "Dette er et sub-alternativ!"); sub_row3.add (sub_label3); sub_table3.appendRow (sub_row3); sub_win3.add (sub_table3); // undervindu 4 var sub_win4 = Ti.UI.createWindow (title: 'Sub-Window 4'); var sub_table4 = Ti.UI.createTableView (stil: Titanium.UI.iPhone.TableViewStyle.GROUPED); var sub_row4 = Ti.UI.createTableViewRow (); var sub_label4 = Ti.UI.createLabel (venstre: 9, tekst: "Dette er et underalternativ!"); sub_row4.add (sub_label4); sub_table4.appendRow (sub_row4); sub_win4.add (sub_table4);
Her er hvor magien skjer: hendelser. Ved å binde en funksjon til "klikk" hendelseslytteren, kan vi takle det som skjer når en rad er valgt i en tabellvisning. La oss gå!
// legge hendelsen til det første elementet firstItemRow.addEventListener ('klikk', funksjon (e) tab1.open (sub_win1);); // legge hendelsen til det andre elementet secondItemRow.addEventListener ('klikk', funksjon (e) tab1.open (sub_win2);); // legg til hendelsen til det tredje elementet tredjeItemRow.addEventListener ('klikk', funksjon (e) tab1.open (sub_win3);); // legge hendelsen til fjerde element fourthItemRow.addEventListener ('klikk', funksjon (e) tab1.open (sub_win4);); Overraskende enkelt, er det ikke! Vi går bare tilbake til den "usynlige" kategorien vi har og åpner et nytt vindu. Hvis du klikker "Start" for dette programmet i Titanium, kan du se at bakknappene er automatisk generert for deg!
"Navigasjon på to nivåer er flott," kan du si, "men jeg vil ha 3 eller 4 eller 5 nivå navigasjon!" Heldigvis kan du bare følge samme fremgangsmåte som bare vist ovenfor! Husk, uansett hvor langt du er i navigasjonen, kan du alltid ringe tab1.open () og flytte enda dypere. Titanium er absolutt et fantastisk, fleksibelt verktøy.
