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>