Problem
On iOS, when you have a view with a layout: 'horizontal' and the content exceeds the width of the view, new content is wrapped onto the next line (attached image demonstrates). This should be the behavior for a layout: 'flow', not 'horizontal'.
Sample Code
var win = Ti.UI.createWindow({ backgroundColor: '#fff' });
var scroll = Ti.UI.createScrollView({
contentHeight: 'auto',
layout: 'horizontal',
left: 20, right: 20
});
for (var i = 0; i < 81; i++) {
scroll.add(Ti.UI.createImageView({
image: 'http://www.appcelerator.com/wp-content/themes/appcelerator/img/ti-logo.png',
height: 30, width: 72,
top: 20, left: 20
}));
}
win.add(scroll);
win.open();
Workaround
Don't use layout at all. Instead, calculate the left of each item as it is added to the view.
Tested On
Titanium SDK version: 1.6.0 (02/23/11 12:34 9882e81)
BROKEN on iOS Simulator 4.2
BROKEN on iPod Touch 4.2
WORKS on Android Simulator 2.2 APIs
WORKS on Android Device EPIC 4G 2.2
Associated Helpdesk Ticket
There is no associated helpdesk ticket for this, but I did uncover this in a company sanctioned sample app.
Reassigning to Stephen to merge with other layout work tentatively scheduled for Sprint 13.
adding release-1.7.0 tag so it doesn't get lost for release notes.
This is a bug in iOS, horizontal layout is not a flow layout.
Updated so it is clear this is an iOS bug, and not a feature request for Android to misbehave the same way.
It's likely this has been dealt with by the layout updates.
Fixed by composite layout updates. Same behavior on iOS and Android.
Verified on: SDK:2.2.0.v20120827143312 Studio:2.1.2.201208201549 Devices: iOS simulator, iPhone 3GS Horizontal layout wraps correctly