[TIMOB-15345] Android: ScrollableView does not show after using a 2D matrix transform

GitHub Issue	n/a
Type	Bug
Priority	Critical
Status	Closed
Resolution	Fixed
Resolution Date	2013-11-05T00:46:12.000+0000
Affected Version/s	Release 3.2.0
Fix Version/s	2013 Sprint 23, 2013 Sprint 23 API, Release 3.2.0
Components	Android
Labels	module_scrollableview, qe-manualtest, regression
Reporter	Ping Wang
Assignee	Ping Wang
Created	2013-09-25T22:16:02.000+0000
Updated	2014-08-12T01:32:00.000+0000

Description

Test case:

function generateColumn() {
	var numbers = [9, 8, 7, 6, 5, 4, 3, 2, 1, 0];
	var labels = [];
 
	numbers.forEach(function(_number) {
		labels.push(
		Ti.UI.createLabel({
			text: _number,
			transform: Ti.UI.create2DMatrix({
				rotate: 90
			})
		}));
	});
 
	return labels;
}


var win = Ti.UI.createWindow({
	fullscreen: false,
	backgroundColor: 'black'
});

var wrapper = Ti.UI.createView({
	layout: "horizontal",
	backgroundColor: 'white',
	height: 100
});

var col1 = Ti.UI.createScrollableView({
	left: 50,
	width: 100,
  	views: generateColumn(),
  	transform: Ti.UI.create2DMatrix({
			rotate: -90
		})
});

var col2 = Ti.UI.createScrollableView({
	width: 100,
  	views: generateColumn(),
  	transform: Ti.UI.create2DMatrix({
			rotate: -90
		})
});

var col3 = Ti.UI.createScrollableView({
	width: 100,
  	views: generateColumn(),
  	transform: Ti.UI.create2DMatrix({
			rotate: -90
		})
});

wrapper.add(col1);
wrapper.add(col2);
wrapper.add(col3);

win.add(wrapper);
win.open();

Run the above code. Expected behavior: Should see 3 scrollable views in the white view. Actual behavior: nothing shows in the white view. This issue is in the master (3.2.0) only. 3.1.3.GA works fine.

Comments

Ping Wang 2013-09-25

This regression is caused by https://github.com/appcelerator/titanium_mobile/pull/4398

Ping Wang 2013-10-08

Here is another test case:

   var label = Ti.UI.createLabel({
   	top: 200,
   	left: 200,
   	backgroundColor: "blue",
   	text : "This is text",
   	font : {
   		fontSize : 40
   	},
   	transform : Ti.UI.create2DMatrix({
   		rotate : 90
   	})
   });
   
   var view = Ti.UI.createView({
   	top: 0,
   	left: 0,
   	height: 200,
   	width: 200,
   	backgroundColor: "yellow"
   });
   
   var win = Ti.UI.createWindow({
       fullscreen: false,
       backgroundColor: 'black'
   });
    
   var wrapper = Ti.UI.createView({
       backgroundColor: 'white',
   });
   
   wrapper.add(view);
   wrapper.add(label);
   win.add(wrapper);
   win.open();

Ran the above code with 3.1.3.GA and the master. Found out that the anchor point to rotate around is the view center in 3.1.3.GA and is the top left corner of the view in the master.

Ping Wang 2013-10-10

In [PR#4398](https://github.com/appcelerator/titanium_mobile/pull/4398), we started to use a new animation system called [Property Animation](http://android-developers.blogspot.com/2011/02/animation-in-honeycomb.html). Although the property animation is introduced in Honeycomb, we can still apply it to pre-Honeycomb because we use the NineOldAndroids compatibility library. One difference between the old and new animation system is how to specify the location of the anchor point, around which the rotation transform occurs. In the old system, we can use either a relative value, eg. "%50" means the center of the view, or an absolute value, eg. "50px" means 50 pixels away from the top left corner of the view. In the new system, we can only use an absolute value. The regression in this ticket happens because when the "transform" property is defined during the creation of the view, the anchor point is calculated before the layout pass. And before the layout pass, we don't know the view size yet. Therefore, it uses (0, 0) which is the top left corner of the view. I tried to set anchor point after the layout pass. But on Jelly Bean devices, it has a visual effect that we can see the view rotates on the screen after the window opens. That may be because the difference in the timing for the drawing cycle.
Ping Wang 2013-11-01

PR: https://github.com/appcelerator/titanium_mobile/pull/4899 For FR, please run the above two test cases on different devices with different API levels.
Paras Mishra 2013-11-13

Scrollable View is displayed, hence closing the issue. Verified fixed on: Device : Google Nexus 3, Android Version: 4.0.4, Device : Google Nexus 7, Android Version: 4.1, Google Nexus 7, Android Version: 4.3 SDK: 3.2.0.v20131112180422 CLI version : 3.2.0 OS : MAC OSX 10.9 Alloy : 1.2.2 Appcelerator Studio, build: 3.2.0.201311122338 XCode : 5.0.2

JSON Source