[TIMOB-9386] Android: Implement conditional horizontal layout wrapping

GitHub Issue	n/a
Type	Sub-task
Priority	High
Status	Closed
Resolution	Fixed
Resolution Date	2012-06-18T14:04:12.000+0000
Affected Version/s	Release 2.1.0
Fix Version/s	Release 2.1.0, Sprint 2012-12 Core
Components	Android
Labels	core, layout, parity
Reporter	Max Stepanov
Assignee	Allen Yeung
Created	2012-06-05T13:22:56.000+0000
Updated	2017-03-22T00:14:51.000+0000

Description

*horizontalWrap:boolean* property will control warp/no-wrap (default is true) // all color boxes should be contained within one row (no wrapping)

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

var parent = Ti.UI.createView({backgroundColor:'red',layout:'horizontal', horizontalWrap: false, width:Ti.UI.SIZE, height:300})

var child1 =Ti.UI.createView({backgroundColor:'green',height:60,width:130});
var child2 =Ti.UI.createView({backgroundColor:'blue',height:120,width:170});
var child3 =Ti.UI.createView({backgroundColor:'#eee',height:120,width:50});
var child4 =Ti.UI.createView({backgroundColor:'#666',height:60,width:50});
 
parent.add(child1);
parent.add(child2);
parent.add(child3);
parent.add(child4);
 
win.add(parent);
win.open();

Attachments

File	Date	Size
horizontalTextCases.txt	2012-06-15T19:02:43.000+0000	2463

Comments

Allen Yeung 2012-06-07

Another test case with wrap enabled:

   var win = Ti.UI.createWindow({ fullscreen: true, backgroundColor: 'white'});
   var parent = Ti.UI.createView({backgroundColor:'red',layout:'horizontal',width:300, height:500})
   var child1 =Ti.UI.createView({backgroundColor:'green',height:60,width:150, bottom: 0});
   var child2 =Ti.UI.createView({backgroundColor:'blue',height:120,width:120});
   var child3 =Ti.UI.createView({backgroundColor:'#eee',height:120,width:150});
   var child4 =Ti.UI.createView({backgroundColor:'#666',height:60,width:150, top: 0});
   var child5 =Ti.UI.createView({backgroundColor:'yellow',height:20,width:150});
   var child6 =Ti.UI.createView({backgroundColor:'purple',height:120,width:150});
    
   parent.add(child1);
   parent.add(child2);
   parent.add(child3);
   parent.add(child4);
   parent.add(child5);
   parent.add(child6);
    
   win.add(parent);
   win.open();

Vishal Duggal 2012-06-15

The above test case is misleading. Green child has bottom pin.
Allen Yeung 2012-06-15

Removed the incorrect comments in the test case above. The bottom pin should force the green view to anchor to the bottom of that row.
Vishal Duggal 2012-06-15

I have problems with the test cases attached. Test Case 1 Why would everything come in one row in landscape mode? With only left and right pins defined the green view is essentially following a fill behavior. Wouldn't it always occupy the first row irrespective of the orientation? Test Case 3 // Top + Bottom with undefined height. The height of the green view should be constrained by the maximum height in that row, which is 120. i.e. the green view should not have fill behavior Why is the maximum height of the row 120. The green view is again following FILL behavior. Its height should be parent height - (top+bottom). From the docs in the PR "if both top and bottom are defined they are treated as padding." I am assuming that they are padding from the parent bounds.
Allen Yeung 2012-06-15

Test Case 1: My mistake, that comment was meant for test case 2. I have moved it accordingly. You are right, the green view should fill the first row regardless of orientation. Test Case 2: The parent view should be wide enough to fit child1- child3 in it. Since child3 has a height of 120, that is the maximum height for that row.
Lee Morris 2017-03-22

Closing ticket as fixed.

JSON Source