Last active
December 15, 2015 23:19
-
-
Save ricardoalcocer/5339699 to your computer and use it in GitHub Desktop.
Android Holo Actionbar Alloy Sample Based on ideas by https://github.com/hoyo/ActionBarSample/tree/master/app
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function doClickMenu(evt){ | |
alert(evt.source.title); | |
} | |
// we need to do some things to the Window once it is properly instanciated, so we add an event listener to its OPEN event | |
$.win.addEventListener('open',function(){ | |
var actionBar = $.win.activity.actionBar; // get a handle to the action bar | |
actionBar.title='My App'; // change the App Title | |
actionBar.displayHomeAsUp=true; // Show the "angle" pointing back | |
actionBar.onHomeIconItemSelected = function() { // what to do when the "home" icon is pressed | |
Ti.API.info("Home icon clicked!"); | |
}; | |
}) | |
// now open the window. The event listener will fire right after this | |
$.win.open(); | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
"Window": { | |
backgroundColor: "#fff" | |
}, | |
"Label": { | |
width: Ti.UI.SIZE, | |
height: Ti.UI.SIZE, | |
color: "#000", | |
font: { | |
fontSize: 20, | |
fontFamily: 'Helvetica Neue' | |
}, | |
textAlign: 'center' | |
}, | |
"MenuItem": { // this tells the menu to be part of the actionbar if there's room. Otherwise the options will be available by pressing the hardware menu button | |
showAsAction: Ti.Android.SHOW_AS_ACTION_IF_ROOM, | |
}, | |
'#menu1': { | |
icon: 'images/action_about.png', | |
title: 'About' | |
}, | |
'#menu2': { | |
icon: 'images/action_settings.png', | |
title: 'Settings' | |
}, | |
'#menu3': { | |
icon: 'images/action_about.png', | |
title: 'About' | |
}, | |
'#menu4': { | |
icon: 'images/action_settings.png', | |
title: 'Settings' | |
}, | |
'#menu5': { | |
icon: 'images/action_about.png', | |
title: 'About' | |
}, | |
'#menu6': { | |
icon: 'images/action_settings.png', | |
title: 'Settings' | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<Alloy> | |
<TabGroup id="win"> | |
<Tab title="Tab 1" icon="KS_nav_ui.png"> | |
<Window title="Tab 1"> | |
<Label>I am Window 1</Label> | |
<!-- this menu is styled in such a way that it becomes part of the ActionBar. See the TSS file --> | |
<Menu id="menu" platform="android"> | |
<MenuItem id="menu1" onClick="doClickMenu" /> | |
<MenuItem id="menu2" onClick="doClickMenu" /> | |
<MenuItem id="menu3" onClick="doClickMenu" /> | |
<MenuItem id="menu4" onClick="doClickMenu" /> | |
<MenuItem id="menu5" onClick="doClickMenu" /> | |
<MenuItem id="menu6" onClick="doClickMenu" /> | |
</Menu> | |
</Window> | |
</Tab> | |
<Tab title="Tab 2" icon="KS_nav_views.png"> | |
<Window title="Tab 2"> | |
<Label>I am Window 2</Label> | |
</Window> | |
</Tab> | |
</TabGroup> | |
</Alloy> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- you need to add this to your tiapp.xml --> | |
<android xmlns:android="http://schemas.android.com/apk/res/android"> | |
<tool-api-level>14</tool-api-level> | |
<manifest> | |
<application android:theme="@android:style/Theme.Holo.Light"></application> | |
<!-- You could also use @android:style/Theme.Holo --> | |
</manifest> | |
</android> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// this version demonstrates how to specify which menu options you want to always appear on the menu bar | |
// and which you want to display as additional menu items | |
"Window": { | |
backgroundColor: "#fff" | |
}, | |
"Label": { | |
width: Ti.UI.SIZE, | |
height: Ti.UI.SIZE, | |
color: "#000", | |
font: { | |
fontSize: 20, | |
fontFamily: 'Helvetica Neue' | |
}, | |
textAlign: 'center' | |
}, | |
'#menu1': { | |
icon: 'images/action_about.png', | |
title: 'About', | |
showAsAction: Ti.Android.SHOW_AS_ACTION_ALWAYS | |
}, | |
'#menu2': { | |
icon: 'images/action_settings.png', | |
title: 'Menu', | |
showAsAction: Ti.Android.SHOW_AS_ACTION_ALWAYS | |
}, | |
'#menu3': { | |
icon: 'images/action_about.png', | |
title: 'About', | |
showAsAction: Ti.Android.SHOW_AS_ACTION_NEVER | |
}, | |
'#menu4': { | |
icon: 'images/action_settings.png', | |
title: 'Settings', | |
showAsAction: Ti.Android.SHOW_AS_ACTION_NEVER | |
}, | |
'#menu5': { | |
icon: 'images/action_about.png', | |
title: 'About', | |
showAsAction: Ti.Android.SHOW_AS_ACTION_NEVER | |
}, | |
'#menu6': { | |
icon: 'images/action_settings.png', | |
title: 'Settings', | |
showAsAction: Ti.Android.SHOW_AS_ACTION_NEVER | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// this version demonstrates how to provide a "software" way of invoking the menu button. This is until | |
// Ti supports the MenuInflater | |
function doClickMenu(evt) { | |
switch(evt.source.title){ | |
case "Menu": // in real life you probably wouldn't want to use the text of the menu option as your condition | |
var actionBar = $.win.activity; | |
actionBar.openOptionsMenu(); | |
break; | |
default: | |
alert(evt.source.title); | |
} | |
} | |
// we need to do some things to the Window once it is properly instanciated, so we add an event listener to its OPEN event | |
$.win.addEventListener('open', function() { | |
var actionBar = $.win.activity.actionBar; | |
// get a handle to the action bar | |
actionBar.title = 'My App'; | |
// change the App Title | |
actionBar.displayHomeAsUp = true; | |
// Show the "angle" pointing back | |
actionBar.onHomeIconItemSelected = function() {// what to do when the "home" icon is pressed | |
Ti.API.info("Home icon clicked!"); | |
}; | |
}) | |
// now open the window. The event listener will fire right after this | |
$.win.open(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@stevoPerisic
MenuItem
onClick = "clickedSettings"
MenuItem
then u add event listener for this function clickedSettings then we will use this to fire it
Ti.App.addEventListener("ourfiredevent",clickedSettings);
we’ll fire the ourfiredevent event from the settings screen view when the user exits the window
in controller
function clickedSettings(){
Ti.App.fireEvent("ourfiredevent");
var settingsWindow=$.getView(); so we can reference to the view we are in wich is settings view
settingsWindow.close();
}
to this step u get what you want
another case if your settings view screen contains something like let say tableView with rows in it and u want the user to check some switches to delete or edit them or whatever you want
then u can call this function in the function that give you a response that the user complete what he did
you can simply fire this function in the other function ...forgive me for a fast and not organized comment
Special thanks for @ricardoalcocer for inspiring us with this solution