Skip to content

DrawerLayout, Titanium Alloy widget. (Android: com.tripvi.drawerlayout, iOS: using ScrollableView)

License

Unknown, Unknown licenses found

Licenses found

Unknown
LICENSE
Unknown
LICENSE.txt
Notifications You must be signed in to change notification settings

yomybaby/kr.yostudio.drawer

Repository files navigation

DrawerLayout

This is a Alloy drawer widget for Android drawerLayout style.
I got a lot of ideas and hints from @FokkeZB's drawer. Thanks @FokkeZB. :)
On Android, this works as a wrapper of Ti.DrawerLayout Android module. Thanks @Tripvi and @manumaticx.
On iOS, this works using pure Titanium API.

ios androd
ios ScreenShoot android ScreenShoot

Why use this?

I want to make it simple and use leftNavButton, rightNavButton, Menu, ActionBar on xml directly even using drawer.

Usage

  1. Install the Ti.DrawerLayout Unfortunately, latest version of Ti.DrawerLayout not avaliable on gitt.io. Because original version of this module was stopped to maintain. You can download @manumaticx version.
  2. Install this widget via gitTio:
gittio install kr.yostudio.drawer
  1. In your xml, use like below code. You have to set one leftView and one centerWindow

xml

<Alloy>
	<Widget src="kr.yostudio.drawer"
    	onDraweropen="onDrawerOpen"
		onDrawerclose="onDrawerClose">
		<View class="menuWrap" role="leftView">
			<Require id="menuC" src="menu">
			</Require>
		</View>
		<Window platform="ios" role="centerWindow" title="yo.drawer widget">
			<LeftNavButton>
				<View>
					<Button  class="ion-android-menu menuBtn" onClick="onMenuButtonClick"/>
				</View>
			</LeftNavButton>
			<Require src="main" id="mainC">
			</Require>
		</Window>
		<Window platform="android" role="centerWindow">
		    <ActionBar onHomeIconItemSelected="onMenuButtonClick" title="yo.drawer widget" ></ActionBar>
			<Menu>
				<MenuItem id="item1" title="Settings"/>
				<MenuItem id="item2" title="Search"/>
			</Menu>
			<Require src="main" id="mainC">
			</Require>
		</Window>
	</Widget>
</Alloy>

js

function onMenuButtonClick(e){
    $.index.toggleLeftView();
}

function onDrawerOpen(e) {
    Ti.API.info($.index.isLeftDrawerOpen);
}

function onDrawerClose(e) {
    Ti.API.info($.index.isLeftDrawerOpen);
}

$.menuC.on('menuclick',function(e){
    $.index.toggleLeftView({animated:false}); //animated option only work on ios
    
    switch(e.itemId){
      case 'smile':
      case 'cry':
        $.index.openWindow(Alloy.createController(e.itemId).getView());
      break;
      
      default:
        $.index.setCenterView(Alloy.createController(e.itemId).getView()); //Arg shold be View(not window)
      break;
    }
});

$.index.open();

Method

Name Description
toggleLeftView Toggle left drawer open status
openWindow openWindow on Navigation window (On Android, just open new window)
setCenterView change centerView

Event

Name Description
draweropen Fired after drawer opened
drawerclose Fired after drawer closed
drawerslide Fired while drawer is sliding

To do

This is a very first version. Welcome to any suggest and any PR.

  • Add changeCenterView method as a widget method. resolve #2
  • Add drawerslide event

License

MIT

About

DrawerLayout, Titanium Alloy widget. (Android: com.tripvi.drawerlayout, iOS: using ScrollableView)

Resources

License

Unknown, Unknown licenses found

Licenses found

Unknown
LICENSE
Unknown
LICENSE.txt

Stars

Watchers

Forks

Packages

No packages published