[AC-2754] Android: Scroll View's layout mechanism doesn't function well

GitHub Issue	n/a
Type	Bug
Priority	n/a
Status	Closed
Resolution	Invalid
Resolution Date	2011-12-22T13:46:01.000+0000
Affected Version/s	n/a
Fix Version/s	n/a
Components	Titanium SDK & CLI
Labels	n/a
Reporter	Ivan Skugor
Assignee	Paul Dowsett
Created	2011-11-24T02:56:09.000+0000
Updated	2016-03-08T07:47:39.000+0000

Description

Comments

Ivan Skugor 2011-12-22

This can also be closed. The issue is not in layout mechanism now, the only thing that could be issue is dimension calculation. Here is test case:

   var win = Ti.UI.createWindow({
   	backgroundColor: '#000',
   	modal: true,
   	navBarHidden: true,
   	layout: 'vertical'
   });
   
   var scrollView = Ti.UI.createScrollView({
   	layout: 'vertical',
   	backgroundColor: '#f00',
   	showVerticalScrollIndicator: true,
   	height: '100%',
   	width: '100%',
   	contentHeight: 'auto',
   	contentWidth: 'auto',
   	top: 0
   });
   
   var button = Ti.UI.createButton({ title: 'Test' });
   
   scrollView.add(button);
   
   var view = Ti.UI.createView({
   	width: '100%',
   	height: '10%',
   	backgroundColor: '#ff0'
   });
   
   scrollView.add(view);
   
   win.add(scrollView);
   
   win.addEventListener('open', function() {
   	Ti.API.debug(view.size.width);
   	Ti.API.debug(view.size.height);
   });
   
   win.open();

After running the code, you'll see that view's height is zero and therefore is not visible on the screen. If we move view's creation code to window's "open" listener, then this works fine:

   var win = Ti.UI.createWindow({
   	backgroundColor: '#000',
   	modal: true,
   	navBarHidden: true,
   	layout: 'vertical'
   });
   
   var scrollView = Ti.UI.createScrollView({
   	layout: 'vertical',
   	backgroundColor: '#f00',
   	showVerticalScrollIndicator: true,
   	height: '100%',
   	width: '100%',
   	contentHeight: 'auto',
   	contentWidth: 'auto',
   	top: 0
   });
   
   var button = Ti.UI.createButton({ title: 'Test' });
   
   scrollView.add(button);
   
   win.add(scrollView);
   
   win.addEventListener('open', function() {
   	var view = Ti.UI.createView({
   		width: '100%',
   		height: '10%',
   		backgroundColor: '#ff0'
   	});
   	
   	scrollView.add(view);
   	
   	Ti.API.debug(view.size.width);
   	Ti.API.debug(view.size.height);
   });
   
   win.open();

If you think this is a bug, please let me know and I'll open new ticket. Also, I'm not sure how scroll view's "contentWidth" and "contentHeight" functions. If I set them to percentages, they produce strange results:

   var win = Ti.UI.createWindow({
   	backgroundColor: '#000',
   	modal: true,
   	navBarHidden: true,
   	layout: 'vertical'
   });
   
   var scrollView = Ti.UI.createScrollView({
   	layout: 'vertical',
   	backgroundColor: '#f00',
   	showVerticalScrollIndicator: true,
   	height: '100%',
   	width: '100%',
   	contentHeight: '100%',
   	contentWidth: '100%',
   	top: 0
   });
   
   var button = Ti.UI.createButton({ title: 'Test' });
   
   scrollView.add(button);
   
   win.add(scrollView);
   
   win.addEventListener('open', function() {
   	var view = Ti.UI.createView({
   		width: '100%',
   		height: '10%',
   		backgroundColor: '#ff0'
   	});
   	
   	scrollView.add(view);
   	
   	Ti.API.debug(view.size.width);
   	Ti.API.debug(view.size.height);
   });
   
   win.open();

If you run this example, you should see that scroll view's content width and height is about 10% of scroll view's width and height. Shouldn't they be the same?

Paul Dowsett 2011-12-22

Ivan - your code is wrong, but this isn't your fault at all, as we need to explain the behavior in the apidocs. I have opened ticket TIMOB-6850 to address it. I will mark this ticket resolved now. Reopen if you disagree. Cheers
Ivan Skugor 2011-12-23

Thanks Paul, I won't reopen it, I commented this issue on new ticket. Cheers.

JSON Source