[AC-1664] Child view with Ti.UI.FILL for a dimension inside of a parent with Ti.UI.SIZE for the same dimension does not work properly

GitHub Issue	n/a
Type	Bug
Priority	n/a
Status	Resolved
Resolution	Cannot Reproduce
Resolution Date	2015-09-30T01:02:48.000+0000
Affected Version/s	n/a
Fix Version/s	n/a
Components	Titanium SDK & CLI
Labels	n/a
Reporter	Justin Waugh
Assignee	Shak Hossain
Created	2015-04-14T16:00:18.000+0000
Updated	2017-10-09T08:35:57.000+0000

Description

Back in the 1.7 days, I could have a view which sized itself automatically to its children's sizes, but I could also add a view as a child which would fill to the calculated parent size. It is very useful for adding a translucent background view to an auto sized view. Post 2.0, the logical way to do this would be to specify { width : Ti.UI.SIZE, height: Ti.UI.SIZE } on the parent and then add a child with { width: Ti.UI.FILL, height: Ti.UI.FILL, backgroundColor: 'black', opacity: 0.75 }, followed by whatever views you want the parent to size to. Unfortunately the parent tries to take the size of the auto fill child into account when sizing, which ends up making it the largest possible size it could be. Using the 'postlayout' event is possible to resize it appropriately but it provides an awful user experience as it pops in, rather than just being rendered correctly. I poked through the layout code in TiViewProxy.m and made a small change which effectively fixed it for me, though I suspect the child view is probably still sized incorrectly (but it doesn't grow the parent so it looks correct). I changed lines in autoWidthForSize and autoHeightForSize to be like (replace height with width for the other case): if (!isAbsolute) { sandBox = [self computeChildSandbox:thisChildProxy withBounds:bounds]; thisHeight = sandBox.origin.y + sandBox.size.height; } else if (![thisChildProxy heightIsAutoFill]) { rather than if (!isAbsolute) { sandBox = [self computeChildSandbox:thisChildProxy withBounds:bounds]; thisHeight = sandBox.origin.y + sandBox.size.height; } else { It is very easy to reproduce: var autoSizeView = Ti.UI.createView({ height: Ti.UI.SIZE, width: 200 }); var labelView = Ti.UI.createLabel({ color : 'white', text : 'This is a test\n of text', textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER }); var bgView = Ti.UI.createView({ backgroundColor : 'blue', opacity: 0.75, height : Ti.UI.FILL, width : Ti.UI.FILL }); autoSizeView.add(bgView); autoSizeView.add(labelView); window.add(autoSizeView);

Comments

Harish Mridha 2015-04-17

Hi, We have tested this with Titanium SDK version 4.0.0.Beta2 and 3.5.1 GA with CLI 3.4.2 on iOS . Parent view with Ti.UI.SIZE specifies that the view should adjust this size to fit its Child view with Ti.UI.FILL. *The height and width properties accept several special values*

   1. Titanium.UI.FILL specifies that the view should fill the parent in this dimension.
   2. Titanium.UI.SIZE specifies that the view should adjust this size to fit its contents, such as a label's text or a view's children.
   3 .'auto' specifies that the view should choose either FILL or SIZE behavior. In 2.0, the behavior of the 'auto' value is specified by the UI Composite Layout Spec. This value is not recommended for new development and will be deprecated in the future.

Its working properly . *Test Code*

   var win = Titanium.UI.createWindow({
   	title : 'Test',
   });
   
   var autoSizeView = Ti.UI.createView({
   	height : Ti.UI.SIZE,
   	width : 200,
   });
   var labelView = Ti.UI.createLabel({
   	color : 'white',
   	text : 'This is a test\n of text',
   	textAlign : Ti.UI.TEXT_ALIGNMENT_CENTER
   });
   
   var bgView = Ti.UI.createView({
   	backgroundColor : 'blue',
   	opacity : 0.75,
   	height : Ti.UI.FILL,
   	width : Ti.UI.FILL
   });
   autoSizeView.add(bgView);
   autoSizeView.add(labelView);
   win.add(autoSizeView); 
   
   win.open();

Thanks

Alberto Marcone 2017-10-09

I can still reproduce this in 6.2.1, and I stumbled upon this for the past few years as a long time titanium developer (thank goodness I found this ticket!!!). Saying that it's unreproducible is nonsense. This is a sample layout: -TableViewRow (height: Ti.UI.SIZE) --View (height: Ti.UI.SIZE) --- View (height : Ti.UI.FILL) --- Label (height : Ti.UI.SIZE) The workaround provided by the OP fixed it though. Thank you!

JSON Source