Skip to content
This repository has been archived by the owner on Dec 4, 2019. It is now read-only.

Commit

Permalink
1.4.0 release
Browse files Browse the repository at this point in the history
updated docs, Closes #60
  • Loading branch information
manumaticx committed Apr 1, 2016
1 parent ba60f7b commit dadd169
Show file tree
Hide file tree
Showing 6 changed files with 36 additions and 16 deletions.
38 changes: 25 additions & 13 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,46 +1,50 @@
# Ti.DrawerLayout [![gittio](http://img.shields.io/badge/gittio-1.3.6-00B4CC.svg)](http://gitt.io/component/com.tripvi.drawerlayout)
# Ti.DrawerLayout [![gittio](http://img.shields.io/badge/gittio-1.4.0-00B4CC.svg)](http://gitt.io/component/com.tripvi.drawerlayout)
Native Android [Navigation Drawer](http://developer.android.com/design/patterns/navigation-drawer.html) for [Titanium](http://www.appcelerator.com/titanium/)

- [Overview](#overview)
- [Installation](#installation)
- [Usage](#usage)
- [Docs](documentation/index.md)
- [Demo](https://github.com/manumaticx/NavigationDrawer-Demo)
- [License](#license)


_This is a fork of [Tripvi/Ti.DrawerLayout](https://github.com/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="480"></a>
<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](http://developer.android.com/reference/android/support/v4/widget/DrawerLayout.html) 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.

#### [API Documentation](documentation/index.md)
#### [Demo App](https://github.com/manumaticx/NavigationDrawer-Demo)

## Installation

* Grab the latest package from the [dist](dist) folder
* Install it following [this guide](http://docs.appcelerator.com/titanium/latest/#!/guide/Using_a_Module)
* with [gittio](http://gitt.io/): `$ gittio install -g https://github.com/manumaticx/Ti.DrawerLayout/blob/master/dist/com.tripvi.drawerlayout-android-1.3.4.zip?raw=true`
* with [gittio](http://gitt.io/): `$ gittio install -g https://github.com/manumaticx/Ti.DrawerLayout/blob/master/dist/com.tripvi.drawerlayout-android-1.3.6.zip?raw=true`

## Usage

Here's an example of how to use the module. Please note the links for Demo App and API Docs below.
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 the `hideToolbar` property at creation-time.
```javascript
// Load module
var TiDrawerLayout = require('com.tripvi.drawerlayout');

// define left and center view
var leftView = Ti.UI.createView({backgroundColor:'red'});
var centerView = Ti.UI.createView({backgroundColor:'green'});
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,
leftDrawerWidth: "240dp",
width: Ti.UI.FILL,
height: Ti.UI.FILL
centerView: centerView
});

// create a window
Expand Down Expand Up @@ -72,4 +76,12 @@ win.addEventListener('open', function(){
win.open();
```

#### [API Documentation](documentation/index.md)
#### [Demo App](https://github.com/manumaticx/NavigationDrawer-Demo)

## License

MIT license, see [LICENSE](LICENSE)

Copyright (c) 2013 - 2014 by Tripvi Inc., 2015 - 2016 by Manuel Lehner

Binary file not shown.
Binary file modified android/dist/drawerlayout.jar
Binary file not shown.
2 changes: 1 addition & 1 deletion android/manifest
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
version: 1.3.6
version: 1.4.0
apiversion: 2
description: Native Android DrawerLayout for Titanium
author: metacortex, manumaticx
Expand Down
10 changes: 9 additions & 1 deletion documentation/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ $.drawer.setContentView( main.getView() );
* ~~`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

Expand All @@ -75,6 +76,7 @@ $.drawer.setContentView( main.getView() );
* `setDrawerLockMode()` - sets the value for the `drawerLockMode` property
* ~~`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

Expand All @@ -96,8 +98,14 @@ $.drawer.setContentView( main.getView() );

## Tricks & Pitfalls

* Theming
* The DrawerLayout requires a NoActionBar Theme since it adds a Toolbar within its layout. Please provide a Theme like `Theme.AppCompat.Light.NoActionBar` for the window that contains the drawer. It has not to be the default Theme of your App, so I suggest you use the `theme` property of Ti.UI.Window for the drawer window.
* To define the color of the Toolbar you have to define it as `@color/primary` in your _app/platform/android/res/values/colors.xml_
* For an example, please have a look at [Demo App](https://github.com/manumaticx/NavigationDrawer-Demo)

* Using Drawer for Navigation
* Please check out the [Demo App](https://github.com/manumaticx/Ti.DrawerLayout-Demo-Alloy-App)
* 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](https://github.com/manumaticx/NavigationDrawer-Demo)


* Customizing the drawerArrowToggle
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "drawerlayout",
"id": "com.tripvi.drawerlayout",
"version": "1.3.6",
"version": "1.4.0",
"description": "Android Drawer for Titanium ",
"license": "MIT",
"devDependencies": {
Expand Down

0 comments on commit dadd169

Please sign in to comment.