Titanium Mobile

# Titanium.UI.Android.DrawerLayout

A panel that displays the app's main navigation options on the left edge of the screen.

Availability
6.2.0
Extends
Titanium.UI.View

# Overview

DrawerLayout acts as a top-level container for window content that allows for interactive "drawer" views to be pulled out from one or both vertical edges of the window.

As per the Android Design guide, any drawers positioned to the left/start should always contain content for navigating around the application, whereas any drawers positioned to the right/end should always contain actions to take on the current content.

For design guidelines, see Google Design Guidelines: DrawerLayout (opens new window)

# Examples

# Simple DrawerLayout

The following code shows a simple drawer-layout usage.

var win = Ti.UI.createWindow();

var leftView = Ti.UI.createView({ backgroundColor:'red' });
var centerView = Ti.UI.createView({ backgroundColor:'yellow' });
var rightView = Ti.UI.createView({ backgroundColor:'orange' });

var drawer = Ti.UI.Android.createDrawerLayout({
    leftView: leftView,
    centerView: centerView,
    rightView: rightView
});
var btn = Ti.UI.createButton({ title: 'RIGHT' });

btn.addEventListener('click', function() {
    drawer.toggleRight();
});

centerView.add(btn);

win.addEventListener('open', function(){
    var activity = win.activity,
        actionBar = activity.actionBar;

    if (actionBar) {
        actionBar.displayHomeAsUp = true;
        actionBar.onHomeIconItemSelected = function() {
            drawer.toggleLeft();
        };
    }
});

win.add(drawer);
win.open();

# Alloy DrawerLayout example

The following code shows an Alloy version of the drawer-layout.

<Alloy>
    <Window class="container">
        <ActionBar platform="android" displayHomeAsUp="true" onHomeIconItemSelected="onClickDrawer" />
        <DrawerLayout id="drawer" platform="android">
            <LeftView>
                <View backgroundColor="#fff"></View>
            </LeftView>
            <CenterView>
                <View>
                    <Label text="Center view" />
                </View>
            </CenterView>
        </DrawerLayout>
    </Window>
</Alloy>

function onClickDrawer(e){
    $.drawer.toggleLeft();
}

$.index.open();

# Properties

# centerView

Availability
6.2.0
centerView :Titanium.UI.View

Get or set the center view

# drawerIndicatorEnabled

Availability
6.2.0
drawerIndicatorEnabled :Boolean

Determine the drawer indicator status

Default: true

# isLeftOpen

Availability
6.2.0
isLeftOpen :Boolean

Determine whether the left drawer is open

Default: false

# isLeftVisible

Availability
6.2.0
isLeftVisible :Boolean

Determine whether the left drawer is visible

Default: false

# isRightOpen

Availability
6.2.0
isRightOpen :Boolean

Determine whether the right drawer is open

Default: false

# isRightVisible

Availability
6.2.0
isRightVisible :Boolean

Determine whether the right drawer is visible

Default: false

# leftView

Availability
6.2.0
leftView :Titanium.UI.View

Get or set the view of the left drawer

# leftWidth

Availability
6.2.0
leftWidth :Number

Get or set the width of the left drawer

# rightView

Availability
6.2.0
rightView :Titanium.UI.View

Get or set the view of the right drawer

# rightWidth

Availability
6.2.0
rightWidth :Number

Get or set the width of the right drawer

# toolbar CREATION ONLY

Availability
7.1.0
toolbar :Titanium.UI.Toolbar

A Toolbar instance to use as a toolbar.

Allows using a [Toolbar]Titanium.UI.Toolbar as a toolbar in the DrawerLayout, exposing [Toolbar's]Titanium.UI.Toolbar properties and methods for a further customization.

This Toolbar instance is automatically set to be used as a default ActionBar.

# toolbarEnabled

Availability
6.2.0
toolbarEnabled :Boolean

Determine whether to enable the toolbar.

This property is ignored if the used theme provides a default ActionBar.

Default: true

# Methods

# closeLeft

Availability
6.2.0
closeLeft() → void

Close the left view.

Returns

Type
void

# closeRight

Availability
6.2.0
closeRight() → void

Close the right view.

Returns

Type
void

# interceptTouchEvent

Availability
6.2.0
interceptTouchEvent(view, disallowIntercept) → void

Disallow touch events on a specific view.

Parameters

Name Type Description
view Titanium.UI.View

View to intercept touch events.

disallowIntercept Boolean

Whether to disallow the interception of touch events.

Returns

Type
void

# openLeft

Availability
6.2.0
openLeft() → void

Open the left view.

Returns

Type
void

# openRight

Availability
6.2.0
openRight() → void

Open the right view.

Returns

Type
void

# toggleLeft

Availability
6.2.0
toggleLeft() → void

Toggle the visibility of the left view.

Returns

Type
void

# toggleRight

Availability
6.2.0
toggleRight() → void

Toggle the visibility of the right view.

Returns

Type
void

# Events

# open

Availability
6.2.0

Fired when the drawer view is opened.

Properties

Name Type Description
drawer String

Contains the drawer frame type. Either left or right.

source Object

Source object that fired the event.

type String

Name of the event fired.

bubbles Boolean

True if the event will try to bubble up if possible.

cancelBubble Boolean

Set to true to stop the event from bubbling.

# close

Availability
6.2.0

Fired when the drawer view is closed.

Properties

Name Type Description
drawer String

Contains the drawer frame type. Either left or right.

source Object

Source object that fired the event.

type String

Name of the event fired.

bubbles Boolean

True if the event will try to bubble up if possible.

cancelBubble Boolean

Set to true to stop the event from bubbling.

# change

Availability
6.2.0

Fired when the motion state of the drawer view changes.

Properties

Name Type Description
drawer String

Contains the drawer frame type. Either left or right.

state Number

The current drawer state.

idle Boolean

Whether or not the drawer is currently idle.

dragging Boolean

Whether or not the drawer is currently dragging.

settling Boolean

Whether or not the drawer is currently settling.

source Object

Source object that fired the event.

type String

Name of the event fired.

bubbles Boolean

True if the event will try to bubble up if possible.

cancelBubble Boolean

Set to true to stop the event from bubbling.

# slide

Availability
6.2.0

Fired when the drawer view changes it's position.

Properties

Name Type Description
drawer String

Contains the drawer frame type. Either left or right.

offset Number

The current drawer offset.

source Object

Source object that fired the event.

type String

Name of the event fired.

bubbles Boolean

True if the event will try to bubble up if possible.

cancelBubble Boolean

Set to true to stop the event from bubbling.

# Constants

# LOCK_MODE_LOCKED_CLOSED

Availability
6.2.0
LOCK_MODE_LOCKED_CLOSED :Number

Use with drawerLockMode to specify the drawer is locked closed.

# LOCK_MODE_LOCKED_OPEN

Availability
6.2.0
LOCK_MODE_LOCKED_OPEN :Number

Use with drawerLockMode to specify the drawer is locked opened.

# LOCK_MODE_UNDEFINED

Availability
6.2.0
LOCK_MODE_UNDEFINED :Number

Use with drawerLockMode to specify the drawer is reset to default lock state.

# LOCK_MODE_UNLOCKED

Availability
6.2.0
LOCK_MODE_UNLOCKED :Number

Use with drawerLockMode to specify the drawer is unlocked.

Contents