Problem
Using the 'horizontal' layout with the horizontalWrap to false.
Expected behavior
Allow to create auto resizing views. Important part of it is using Ti.UI.FILL layout.
_An use case_, for example if you have tableviewrow with an image on the left a label in the middle and an optional button on the right, you can easily layout the whole of it.
_Yet there's one catch_, when a view layouts its children, if a child has a Ti.UI.FILL width, it doesnt take in account the "next" siblings. It just takes the remaning width. Consequently and "next" child will be out of the view.
Views with Ti.UI.FILL should be seen as "spacer" and take as much width as possible but computed last! This is the behavior of spacers in toolbars.
Working sample
var win = Ti.UI.createWindow();
win.backgroundColor = 'white';
var view = Ti.UI.createView({
height : Ti.UI.SIZE,
width : Ti.UI.FILL,
layout : 'horizontal',
horizontalWrap : false
});
win.add(view);
view.add(Ti.UI.createView({
backgroundColor : 'black',
left : 2,
width : 30,
height : 20
}));
view.add(Ti.UI.createView({
backgroundColor : 'red',
left : 2,
width : Ti.UI.FILL,
height : 20
}));
view.add(Ti.UI.createView({
backgroundColor : 'blue',
left : 2,
width : 20,
height : 20
}));
view.add(Ti.UI.createView({
backgroundColor : 'green',
left : 2,
width : Ti.UI.FILL,
height : 40
}));
view.add(Ti.UI.createView({
backgroundColor : 'black',
left : 2,
width : 30,
height : 40
}));
var b1 = Titanium.UI.createButton({
title : 'I am a Button',
height : 40,
width : 200,
top : 10
});
b1.addEventListener('click', function() {
view.layout = (view.layout === 'horizontal') ? 'vertical' : 'horizontal';
if (view.layout === 'horizontal')
view.horizontalWrap = !(view.horizontalWrap);
});
win.add(b1)
win.open();
Updated labels and moved to main project to dig into it. Check out CLA here: http://docs.appcelerator.com/titanium/latest/#!/guide/Pull_Request_Guide
Can not accept this PR. 1. The overall desired outcome completely breaks the Composite Layout Spec as defined here - http://docs.appcelerator.com/platform/latest/#!/guide/UI_Composite_Layout_Behavior_Spec-section-4196675_UICompositeLayoutBehaviorSpec-FILLbehavior 2. It does not completely implement the spacer functionality (What if I had a bunch of Views with height specified as 'SPACER' in a vertical layout) 3. Does not define behavior of a 'SPACER' inside a View following SIZE. Marking this ticket invalid.
@Vishal: I totally understand. First that PR is far too old and i can't support anymore. 1. It does not really break it, it defines a case which is not really specified for FILL ('vertical', 'horizontal', 'horizontal' + "wrap"). 2. I don't really remember how it was at that point. I rewrote the whole layout pass and that with it. Right now it does work in any layout and follows the specified rules from 1 3. The idea is that it works exactly like specified in 1. You can see spacer as a view with weight 1 in a linearlayout on Android. Anyway thanks for taking the time to answer
Closing ticket as invalid.
this is still happening and there's no solution on the market yet. Two views inside an horizontal view are not wrapped correctly if one view has a FILL width.