NavigationGroup equivalent on Android?
My UI is principally a series of table views, with a NavigationGroup at the top that lets me go back.
In Android it seems the NavigationGroup component does not exist. I have seen in Kitchen sink that I can open the next successive window with a tab component in a similiar way that the NavigationGroup works using the open() method, but I don't really want to lose the real estate at the top to tabs.
Suggestions?
2 Answers
-
I wrote a wrapper which implements some kind of navigation group for non-iPhone devices. Maybe useful for you:
var ui = {}; ui.createNavigatorGroup = function() { var me = {}; if ( Ti.Platform.osname === 'iphone' || Ti.Platform.osname === 'ipad' ) { // Create the navigator, create a window for the navigator, // and add the navigator to the window. var navGroup = Titanium.UI.iPhone.createNavigationGroup(); var winNav = Titanium.UI.createWindow(); winNav.add(navGroup); me.open = function(win) { if ( ! navGroup.window ) { // First time call, add the window to the navigator and open the navigator window navGroup.window = win; winNav.open(); } else { // All other calls, open the window through the navigator navGroup.open(win); } }; me.setRightButton = function(win, button) { win.setRightNavButton(button); }; me.setLeftButton = function(win, button) { win.setLeftNavButton(button); }; } else { var navViews = []; // A stack of navigation bars var navView; function pushNavBar() { navView = Ti.UI.createView({ top: 0, height: 60, backgroundColor: '#ccc' }); navViews.push(navView); } function popNavBar() { navViews.pop(); navView = navViews[navViews.length - 1]; } // Make sure we always have a navView available to prepare pushNavBar(); me.open = function(win) { navView.add(Ti.UI.createLabel({ text: win.title, color: '#333' })); if ( navViews.length >= 2 ) { var button = Ti.UI.createButton({ title: navViews[navViews.length - 2].win.title || '<-' }); me.addLeftButton(win, button); button.addEventListener('click', function() { popNavBar(); win.close(); }); } navView.win = win; win.add(navView); win.navBarHidden = true; win.open(); pushNavBar(); // Prepare for the next window }; me.addLeftButton = function(win, button) { button.top = 8; button.left = 5; button.width = 100; navView.add(button); }; me.setRightButton = function(win, button) { button.top = 8; button.right = 5; button.width = 100; navView.add(button); }; } return me; }
Use it like this:
function createWindowGreen(nav) { var win = Titanium.UI.createWindow({ backgroundColor: "green", title: "Green" }); win.add(Ti.UI.createLabel({ text: "I'm GREEN", textAlign: 'center' })); return win; } function createWindowBlue(nav) { var win = Titanium.UI.createWindow({ backgroundColor: "blue", title: "Blue" }); win.add(Ti.UI.createLabel({ text: "I'm BLUE", textAlign: 'center' })); var btn = Ti.UI.createButton({ title: "Green" }) nav.setRightButton(win, btn); btn.addEventListener('click', function(){ nav.open(createWindowGreen(nav)); }); return win; } function createWindowRed(nav) { var win = Titanium.UI.createWindow({ backgroundColor: "red", title: "Red", exitOnClose: true }); win.add(Ti.UI.createLabel({ text: "I'm RED", textAlign: 'center' })); var btn = Ti.UI.createButton({ title: "Blue" }) nav.setRightButton(win, btn); btn.addEventListener('click', function(){ nav.open(createWindowBlue(nav)); }); return win; } nav = ui.createNavigatorGroup(); nav.open(createWindowRed(nav));
-
one thing I did was create a tabGroup as in the examples with a single tab, but set the tabGroup to not be visible. Add a listener to the open event of the tabGroup and then call tab.open(newWin). once this new window is open on the stack you can set the tabGroup back to visible.
the user will not see the tabs and will not know that they are technically one window into the stack already. so basically at this point you can use that tab as your NavigationGroup.
it seems kind hacky, but it works. You get the iPhone navigation button in the titleBar, and on android you get the correctly functionality of the back button.
one thing to note - when you open new windows, you call open on the tab (not the tabGroup).