Awesome
⚠️
THIS REPO IS DEPRECATED SINCE THE DRAWER LAYOUT WAS INTEGRATED INTO THE TITANIUM CORE. CONSIDER USING: https://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.Android.DrawerLayout
DEPRECATED (Ti.DrawerLayout)
Native Android Navigation Drawer for Titanium
This is a fork of Tripvi/Ti.DrawerLayout
Overview
<a href="https://www.google.com/design/spec/patterns/navigation-drawer.html"><img src="https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0Bzhp5Z4wHba3WUpVTktSZWk1YjQ/patterns_navdrawer_behavior_temporary2.png" width="280"></a>
This module adds support for using the DrawerLayout in Titanium Apps.
The Drawer Layout is a view that can be pulled from the edge of a window. This can answer various purposes. The most common use case is the Navigation Drawer as seen in the above screenshot. The Navigation Drawer displays navigation options in a drawer which slides in from the left edge.
To expand the drawer the user can either touch the app icon or swipe from the left edge. The navigation drawer overlays the content but not the action bar.
Installation
- Grab the latest package from the dist folder
- Install it following this guide
- with gittio:
$ gittio install com.tripvi.drawerlayout
Usage
Here's an example of how to use the module.
Please note: This module requires a Theme without ActionBar such as
Theme.AppCompat.Light.NoActionBar
since it adds a Toolbar to its own layout. If you do not want the Toolbar, just pass thehideToolbar
property at creation-time.
// Load module
var TiDrawerLayout = require('com.tripvi.drawerlayout');
// define left and center view
var leftView = Ti.UI.createView({backgroundColor:'gray'});
var centerView = Ti.UI.createView({backgroundColor:'white'});
// create the Drawer
var drawer = TiDrawerLayout.createDrawer({
leftView: leftView,
centerView: centerView
});
// create a window
var win = Ti.UI.createWindow();
// add the drawer to the window
win.add(drawer);
// listen for the open event...
win.addEventListener('open', function(){
// ...to access activity and action bar
var activity = win.getActivity();
var actionbar = activity.getActionBar();
if (actionbar){
// this makes the drawer indicator visible in the action bar
actionbar.displayHomeAsUp = true;
// open and close with the app icon
actionbar.onHomeIconItemSelected = function() {
drawer.toggleLeftWindow();
};
}
});
// open the window
win.open();
API Documentation
Demo App
Development
Contributions are very welcome. If you are able to fix bugs or want to add features to the module, please refer to the official module development guide. You can build the module with appc
as described there. You can also use grunt build
here. For distribution a new version, please update the version number in package.json
and run grunt
. It will update the version number in manifest and readme. Then it builds the new version and installs it globally with gittio
.
License
MIT license, see LICENSE
Copyright (c) 2013 - 2014 by Tripvi Inc., 2015 - 2016 by Manuel Lehner