index.md

Ti.DrawerLayout Documentation

You can create a Drawer by calling createDrawer on the module. It must be added as a top-level view to a Ti.UI.Window. You may want to pass a contentView property at creation-time. In addition, you can also pass either a leftView or rightView property to add an actual drawer view to your layout. All of them (contentView, leftView and rightView) must be instances of Ti.UI.View.

Here's an example:

var TiDrawerLayout = require('com.tripvi.drawerlayout');
var contentView = Ti.UI.createView();
var leftView = Ti.UI.createTableView({ backgroundColor: '#ccc' });

var drawer = TiDrawerLayout.createDrawer({
	centerView: contentView,
	leftView: leftView
});

And this is how you'd do it in Alloy:

<Alloy>
  <Window>
		<Drawer id="drawer" module="com.tripvi.drawerlayout" />
  </Window>
</Alloy>

var menu = Alloy.createController('menu');
var main = Alloy.createController('main');

$.drawer.setLeftView( menu.getView() );
$.drawer.setCenterView( main.getView() );

Properties

• leftView (Ti.UI.View) - sets the left drawer
• rightView (Ti.UI.View) - sets the right drawer
• centerView (Ti.UI.View) - sets the center View
• isLeftDrawerOpen (Boolean) - wether the left drawer is currently in an open state or not
• isLeftDrawerVisible (Boolean) - wether the left drawer is currently visible on-screen or not
• isRightDrawerOpen (Boolean) - wether the right drawer is currently in an open state or not
• isRightDrawerVisible (Boolean) - wether the right drawer is currently visible on-screen or not
• leftDrawerWidth (Number/String) - sets the width of the left drawer
• rightDrawerWidth (Number/String) - sets the width of the right drawer
• drawerIndicatorEnabled (Boolean) - wether it should use the ActionBarDrawerToggle or not
• drawerIndicatorImage (String) - (DEPRECATED) path to a custom drawer indicator image
• drawerLockMode (Number) - sets the lock mode constant. TiDrawerLayout.LOCK_MODE_UNLOCKED (default), TiDrawerLayout.LOCK_MODE_LOCKED_CLOSED, TiDrawerLayout.LOCK_MODE_LOCKED_OPEN
• dragMargin (Number) - defines the width of the area the user can swipe the drawer in
• hideToolbar (Boolean) - hides the toolbar

Methods

• setLeftView() - sets the value for the leftView property
• setRightView() - sets the value for the rightView property
• setCenterView() - sets the value for the centerView property
• replaceCenterView(view, backstack) - (DEPRECATED) same as setCenterView but with second parameter
  • view (Ti.UI.View) - the new centerView
  • backstack (Boolean) - set this to true if you want to add this to the backstack
• toggleLeftWindow() - opens or closes the left drawer
• openLeftWindow() - opens the left drawer
• closeLeftWindow() - closes the left drawer
• toggleRightWindow() - opens or closes the right drawer
• openRightWindow() - opens the right drawer
• closeRightWindow() - closes the right drawer
• getIsLeftDrawerOpen() - returns the value of the isLeftDrawerOpen property
• getIsLeftDrawerVisible() - returns the value of the isLeftDrawerVisible property
• getIsRightDrawerOpen() - returns the value of the isRightDrawerOpen property
• getIsRightDrawerVisible() - returns the value of the isRightDrawerVisible property
• setLeftDrawerWidth() - sets the value for the leftDrawerWidth property
• setRightDrawerWidth() - sets the value for the rightDrawerWidth property
• setDrawerIndicatorEnabled() - sets the value for the drawerIndicatorEnabled property
• setDrawerIndicatorImage() - (DEPRECATED) sets the value for the drawerIndicatorImage property
• setDrawerLockMode() - sets the value for the drawerLockMode property
• setLeftDrawerLockMode() - sets the value for the drawerLockMode property for the left drawer
• setRightDrawerLockMode() - sets the value for the drawerLockMode property for the right drawer
• setArrowState(value) - (DEPRECATED) sets the state of the drawerArrowIcon
  • value (Number) - state (1 is arrow, 0 is hamburger, but you can set everything between)
• setToolbarHidden - sets the value for hideToolbar property

Events

• change - fires when the drawer motion state changes

  • state (Number) - the new drawer motion state
  • idle (Boolean) - indicates that any drawers are in an idle, settled state. No animation is in progress
  • dragging (Boolean) - indicates that a drawer is currently being dragged by the user
  • settling (Boolean) - indicates that a drawer is in the process of settling to a final position

• drawerslide - fires when a drawer's position changes

  • offset (Number) - the new offset of this drawer within its range, from 0-1
  • drawer (String) - left or right

• draweropen - fires when the drawer motion state changes

  • drawer (String) - left or right

• drawerclose - fires when the drawer motion state changes

  • drawer (String) - left or right

Tricks & Pitfalls

• Themes: Actionbar vs. Toolbar

  • There are two ways to setup the drawer module according to the App bar:
    1. Traditional: Drawer below App bar (using the Actionbar)
       • use default Theme.AppCompat or Theme.AppCompat.Light
    2. Material: Drawer covers App bar (using the Toolbar)
       • use Theme.AppCompat.NoActionBar or Theme.AppCompat.Light.NoActionBar
       • add toolbar padding

• Using Drawer for Navigation

  • This module only provides the layout itself. The Navigation logic must be done in your own code.
  • I've put together an example app to demonstrate this here: NavigationDrawer Demo App

• Customizing the drawerArrowToggle

  • This is done in your ActionBar theme like this:

   <style name="AppTheme" parent="Theme.AppCompat.Light">
   	<item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
   </style>
  
   <style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
   	<item name="spinBars">true</item>
   	<item name="color">@android:color/white</item>
   </style>

  Android Docs: http://developer.android.com/reference/android/support/v7/appcompat/R.styleable.html#DrawerArrowToggle

• TabGroup & Drawer

  • Please refer to my answer here