[TIMOB-25556] Android: Extend drawerLockMode to set Gravity

GitHub Issue	n/a
Type	New Feature
Priority	Critical
Status	Closed
Resolution	Fixed
Resolution Date	2020-11-23T21:25:23.000+0000
Affected Version/s	n/a
Fix Version/s	Release 9.3.0
Components	Android
Labels	drawerlayout
Reporter	Michael Gangolf
Assignee	Gary Mathews
Created	2017-11-17T15:15:56.000+0000
Updated	2020-11-23T21:25:23.000+0000

Description

*Description* The current DrawerLayout.drawerLockMode supports only: * LOCK_MODE_LOCKED_CLOSED * LOCK_MODE_LOCKED_OPEN * LOCK_MODE_UNDEFINED * LOCK_MODE_UNLOCKED for both views (left/right) at the same time. Extending it so it will you the second parameter "Gravity": https://developer.android.com/reference/android/support/v4/widget/DrawerLayout.html#setDrawerLockMode(int,%20int) would allow users to set the lock mode individually for each view. *Proposal:* Changing the int parameter to a dictionary of: * drawerLockMode : Number (see above) * drawerGravity: Number (LEFT, RIGHT) *Source code* [Property at Github](https://github.com/appcelerator/titanium_mobile/blob/111153d8600857e6d2e752cdef60dc217dbc15a9/android/modules/ui/src/java/ti/modules/titanium/ui/widget/TiUIDrawerLayout.java#L411) would be a place to start

Comments

Michael Gangolf 2017-11-17

I will try to make a PR with the parameters as described in the propsal

Michael Gangolf 2017-11-25

PR: https://github.com/appcelerator/titanium_mobile/pull/9627 *Example*

   var win = Ti.UI.createWindow(),
   	leftView = Ti.UI.createView({
   		backgroundColor: "#333",
   		layout: "vertical"
   	}),
   	centerView = Ti.UI.createView({
   		backgroundColor: "#fff"
   	}),
   	rightView = Ti.UI.createView({
   		backgroundColor: "#333"
   	}),
   	drawer = Ti.UI.Android.createDrawerLayout({
   		leftView: leftView,
   		centerView: centerView,
   		rightView: rightView
   	}),
   	menu = Ti.UI.createView({
   		layout: "vertical"
   	}),
   	btn1 = Ti.UI.createButton({
   		title: 'Open Left'
   	}),
   	btn2 = Ti.UI.createButton({
   		title: 'Open Right'
   	}),
   	btn3 = Ti.UI.createButton({
   		title: 'Lock all'
   	}),
   	btn4 = Ti.UI.createButton({
   		title: 'Lock left'
   	}),
   	btn5 = Ti.UI.createButton({
   		title: 'Lock right'
   	}),
   	btn6 = Ti.UI.createButton({
   		title: 'unLock all'
   	});
   
   for (var i = 0; i < 10; ++i) {
   	var lbl1 = Ti.UI.createLabel({
   		color: "#fff",
   		text: "Item",
   		top: 10,
   		bottom: 10,
   		height: Ti.UI.SIZE
   	});
   	leftView.add(lbl1);
   }
   
   btn2.addEventListener('click', function() {
   	if (drawer.getDrawerLockMode().lockMode != Titanium.UI.Android.DrawerLayout.LOCK_MODE_LOCKED_CLOSED) {
   		drawer.toggleRight();
   	} else {
   		// drawer is locked - check gravity
   		if (drawer.getDrawerLockMode().gravity != Titanium.UI.Android.DrawerLayout.GRAVITY_RIGHT &&
   			drawer.getDrawerLockMode().gravity != Titanium.UI.Android.DrawerLayout.GRAVITY_BOTH) {
   			// right is not locked
   			drawer.toggleRight();
   		}
   	}
   });
   btn1.addEventListener('click', function() {
   	if (drawer.getDrawerLockMode().lockMode != Titanium.UI.Android.DrawerLayout.LOCK_MODE_LOCKED_CLOSED) {
   		drawer.toggleLeft();
   	} else {
   		// drawer is locked - check gravity
   		if (drawer.getDrawerLockMode().gravity != Titanium.UI.Android.DrawerLayout.GRAVITY_LEFT &&
   			drawer.getDrawerLockMode().gravity != Titanium.UI.Android.DrawerLayout.GRAVITY_BOTH) {
   			// left is not locked
   			drawer.toggleLeft();
   		}
   	}
   });
   btn3.addEventListener('click', function() {
   	drawer.setDrawerLockMode(Titanium.UI.Android.DrawerLayout.LOCK_MODE_LOCKED_CLOSED);
   	console.log(drawer.getDrawerLockMode());
   });
   btn4.addEventListener('click', function() {
   	drawer.setDrawerLockMode({
   		lockMode: Titanium.UI.Android.DrawerLayout.LOCK_MODE_LOCKED_CLOSED,
   		gravity: Titanium.UI.Android.DrawerLayout.GRAVITY_LEFT
   	});
   	console.log(drawer.getDrawerLockMode());
   });
   btn5.addEventListener('click', function() {
   	drawer.setDrawerLockMode({
   		lockMode: Titanium.UI.Android.DrawerLayout.LOCK_MODE_LOCKED_CLOSED,
   		gravity: Titanium.UI.Android.DrawerLayout.GRAVITY_RIGHT
   	});
   	console.log(drawer.getDrawerLockMode());
   });
   btn6.addEventListener('click', function() {
   	drawer.setDrawerLockMode(Titanium.UI.Android.DrawerLayout.LOCK_MODE_UNLOCKED);
   	console.log(drawer.getDrawerLockMode());
   });
   
   centerView.add(menu);
   menu.add(btn1);
   menu.add(btn2);
   menu.add(btn3);
   menu.add(btn4);
   menu.add(btn5);
   menu.add(btn6);
   
   win.addEventListener('open', function() {
   	var activity = win.getActivity(),
   		actionbar = activity.getActionBar();
   
   	if (actionbar) {
   		actionbar.displayHomeAsUp = true;
   		actionbar.onHomeIconItemSelected = function() {
   			drawer.toggleLeft();
   		};
   	}
   });
   
   win.add(drawer);
   win.open();

Michael Gangolf 2017-11-25

A question about the documentation parameters. It is still possible to use the set() method the old way with an integer instead of a hashmap like this * Both views / current way: drawer.setDrawerLockMode(Titanium.UI.Android.DrawerLayout.LOCK_MODE_LOCKED_CLOSED); * Custom side: drawer.setDrawerLockMode({ lockMode: Titanium.UI.Android.DrawerLayout.LOCK_MODE_LOCKED_CLOSED, gravity: Titanium.UI.Android.DrawerLayout.GRAVITY_LEFT }); How to write this in the documentation?
Sharif AbuDarda 2017-11-25

Hello, Thanks for the ticket and the PR. I will forward this to our engineering team to move forward. Thanks.
Christopher Williams 2019-07-31

[~amukherjee] This missed the 8.1.0 timeframe and is an enhancement, not a bug fix. Given that 8.2.0 is iOS 13, this probably should be changed to fix version 8.3.0.
Gary Mathews 2019-09-10

master: https://github.com/appcelerator/titanium_mobile/pull/10970
Sergey Volkov 2019-09-24

Hi. bq. master: https://github.com/appcelerator/titanium_mobile/pull/10970 I think this a bad API, it is neither like other Titanium nor like Android: - Ti-developers know nothing about "gravity", drawers are set with "leftView" and "rightView" properties. - Using a "gravity" property on DrawerLayout itself to setup lock mode can be confusing to Android developers. In the original [Ti.Drawer](https://github.com/manumaticx/Ti.DrawerLayout) module I made similar [API change](https://github.com/manumaticx/Ti.DrawerLayout/commit/deed60f8bedd1628e6bd779db2ded5bf52c5e2e9) over two years ago. Only a couple of new properties.
Sergey Volkov 2019-10-09

https://github.com/appcelerator/titanium_mobile/pull/11271
Satyam Sekhri 2020-11-06

FR Passed. The individual drawer lock mode defined using leftDrawerLockMode and rightDrawerLockMode working fine. _Note: The lock mode defined on an individual view (using leftDrawerLockMode or rightDrawerLockMode property) would prevail over the defined general lock mode (using drawerLockMode)._
Satyam Sekhri 2020-11-06

Waiting on Jenkins build
Christopher Williams 2020-11-09

merged to master for 9.3.0 target
Satyam Sekhri 2020-11-23

Verified on: Mac OS: 10.15.4 SDK: 9.3.0.v20201123121926 Appc CLI: 8.1.1 JDK: 11.0.6 Node: 12.16.1 Studio: 6.0.0.202005141803 Device: Pixel 3 XL(v11.0) emulator

JSON Source