titanium + alloy + android で facebook like menu / slider menu
titanium + alloy + android でフェイスブック風メニューができないか調べた
ここを参考にしたら
http://www.slideshare.net/ricardoalcocer/appcelerator-alloy-deep-dive-titokyo-2013
簡単にできた
ありがとうございます
これでやっとtabgroupとおさらばできそう
index.js
var menuOpen = false;
function showhidemenu(e){
alert("showhidemenu");
if (menuOpen){
moveTo="0";
menuOpen=false;
}else{
moveTo="250dp";
menuOpen=true;
}
$.mainview.width=Ti.Platform.displayCaps.platformWidth;
$.mainview.animate({
left:moveTo,
curve : Ti.UI.ANIMATION_CURVE_EASE_OUT,
duration:400
});
}
Ti.Gesture.addEventListener('orientationchange', function(e) {
$.mainview.width=Ti.Platform.displayCaps.platformWidth;
});
$.index.open();
index.tss
".container": {
backgroundColor:"white",
orientationModes:[Ti.UI.PORTRAIT,Ti.UI.LANDSCAPE_LEFT,Ti.UI.LANDSCAPE_RIGHT,Ti.UI.UPSIDE_PORTRAIT]
}
"#menuview":{
backgroundColor:"gray",
height: Ti.UI.FILL,
width: Ti.UI.FILL
},
"#mainview":{
backgroundColor:"white",
height: Ti.UI.FILL,
width: Ti.UI.FILL
},
"#mainviewheader":{
top: "0",
height: "50dp",
width: Ti.UI.FILL,
backgroundColor: "gray"
},
"#menubutton":{
left: "5",
borderWidth: 1,
borderColor: "#000",
width: "40dp",
height: "40dp",
visible:true
}
index.xml
<Alloy> <Window class="container"> <View id="menuview"> <View id="menuviewheader"> <Label id="menutitle">menu</Label> </View> <TableView id="menulist"> <TableViewRow id="menulistrow"> <Label id="menulistrowlabel">label1</Label> </TableViewRow> <TableViewRow id="menulistrow"> <Label id="menulistrowlabel">label2</Label> </TableViewRow> </TableView> </View> <View id="mainview"> <View id="mainviewheader"> <View id="menubutton" onClick="showhidemenu"></View> </View> </View> </Window> </Alloy>
