AlloyでFacebookアプリっぽいスライドメニューを実装してみる

  • Pocket
  • このエントリーをはてなブックマークに追加
  • 170 follow us in feedly

まえがき

AlloyでFacebookとかでよく使われている左からビュッと出てくるメニューを作ってみようという回です。

ボタンを押して開閉するだけですが、ライブラリを用いてないので比較的簡単で導入しやすいかと思います。

仕様

・Titaniumである

・Alloyフレームワークで作る

・CoffeeScriptを使う

・ライブラリなし

・iOSで確認(androidも動くんじゃないかな?)

参考にさせていただいたサイト

Slide-Out-Navigation for Titanium Mobile

Slide-Out-Navigation for Titanium Mobile

titanium + alloy + android で facebook like menu / slider menu

titanium + alloy + android で facebook like menu / slider menu

完成画像

Screeny Shot 2013 08 11 21 40 56

こんな感じです

ソースコード

index.xml

<Alloy>
	<Window class="container">
		<View id="menu">
			<TableView id="menuTable"/>
		</View>
		<View id="main">
			<NavigationGroup id="nav">
				<Window title="Top" id="mainWindow">
					<Label>Hello</Label>
				</Window>
			</NavigationGroup>
		</View>
	</Window>
</Alloy>

index.tss

".container": {
	backgroundColor:"white",
},

"#menu":{
	backgroundColor:"gray",
	height: Ti.UI.FILL,
	width: 150,
	left: 0
},

"#menuTable":{
	backgroundImage:'/images/table_bg.png',
	allowsSelection:false,
	separatorStyle:Ti.UI.iPhone.TableViewSeparatorStyle.NONE
},

"#main":{
	backgroundColor:"white",
	height: Ti.UI.FILL,
	width: 320,
	left: 0
},

index.coffee

###
ボタンの追加
###
menuBtn = Titanium.UI.createButton
	image:'/images/menu.png'
	width:32
	height:32
$.mainWindow.leftNavButton = menuBtn


###
ビューの開閉
###
menuOpen = false
menuBtn.addEventListener 'click', (e)->
	if menuOpen
		moveTo = "0"
		menuOpen = false
	else
		moveTo = $.menu.width
		menuOpen = true

	$.main.animate
		left:moveTo
		curve : Ti.UI.ANIMATION_CURVE_EASE_OUT
		duration:400


###
ひだりのビューのテーブルに行追加
###
for i in[1..5]
	row = Ti.UI.createTableViewRow
		height:44
		backgroundColor:'transparent'
		backgroundImage:'/images/row_bg.png'

	title = Ti.UI.createLabel
		color:'white'
		left:8
		width:Ti.UI.FILL
		height:Ti.UI.FILL
		text:"Menu#{i}"
		font:{
			fontFamily:'Arial-BoldMT'
			fontWeight:'bold'
			fontSize:17
		}
	row.add title
	$.menuTable.appendRow row


$.index.open()

Github

とりあえずGithubも作っておきました

https://github.com/keitarou/AlloySlideMenu

https://github.com/keitarou/AlloySlideMenu

あとがき

けっこう力ずくでできてしまうものですねー

にしてもcoffeescript気持ちいいぃぃ

関連記事

no image

AlloyのModelにはじめの一歩を踏み込んだのでメモ。generateから基本まで

まえがき AlloyのフレームワークでTitaniumアプリを作り始め...

記事を読む

jenkins-android-deploygate-2jenkins-android-deploygate-2.png

JenkinsでAndroidアプリを自動でビルドしDeployGateに公開してみる

まえがき 今回はちょっと実践的な?Jenkinsの使い方をしてみる。 ...

記事を読む

images

『ant android adb』を使ってコマンドラインでAndroidアプリを開発するためのメモ

まえがき 最近Androidのアプリをちょろちょろ作ったりするように...

記事を読む

parse-mymemo-1parse-mymemo-1.png

ParseでiOSアプリのプッシュ通知機能を実装するための自分用メモ

まえがき 手軽にiOSアプリやAndroidアプリのプッシュ通知昨日だ...

記事を読む

2013-11-27 00.41.20

cocos2dx製androidアプリ『ゆらゆらまりも』をリリースしました

まえがき この度は、『ゆらゆらまりも』というCocos2dx製のAnd...

記事を読む

新着記事

no image

PHPでRubyのirbっぽいインタラクティブなスクリプトが実行できる「boris」

まえがき PHPでもRubyのirbみたいなことがしたくて探してみたと...

記事を読む

2015年の抱負と去年の振り返り〜よちよちWEB業界1年経験して〜

まえがき あけましておめでとうございます。今年もどうぞよろしくお願いし...

記事を読む

Java SE 7 Bronze試験(1Z0-802)を受けてきました

まえがき 以前から少し受けてみたかった試験『Java SE 7 Bro...

記事を読む

HubotでJenkinsのジョブを実行する

まえがき HubotをつかってJenkinsのジョブをじっこうしてみた...

記事を読む

no image

Hubotをforeverでデーモン化する

まえがき 今回はHubotをforeverを使ってデーモン化してみた時...

記事を読む

スポンサーリンク

PAGE TOP ↑