Problem
Adding a touch listener to a scroll view on Android prevents the scroll view from being scrollable. Although the events do then fire, they fire with the scroll view always as the source. This is inconsistent with iOS.
Expected Behavior
It should behave as iOS does. The events should fire, and the scroll view should scroll. Further, the source should be the most deeply child touchable view, like on iOS.
Reproduction
Drop the following in an app.js. It adds a vertically scrollable list of draggable rectangles. On iOS, you can drag them horizontally. On Android, you can't drag them anywhere, or even scroll the scroll view.
var win = Ti.UI.createWindow({
backgroundColor: '#fff'
});
var scroll = Ti.UI.createScrollView({
scrollType: 'vertical',
contentHeight: 3010,
text: 'Scroll View'
});
var width = 150, height = 90;
for (var i = 0; i < 30; i++) {
scroll.add(Ti.UI.createLabel({
draggable: true,
text: 'Drag Me Horizontally ' + (i + 1), textAlign: 'center',
color: '#000',
top: i * 100 + 10,
width: width, height: height,
backgroundColor: '#eee'
}));
}
scroll.addEventListener('touchstart', doDrag);
scroll.addEventListener('touchmove', doDrag);
scroll.addEventListener('touchcancel', doDrag);
scroll.addEventListener('touchend', doDrag);
function doDrag(evt) {
Ti.API.info('Event Fired On: ' + evt.source.text);
if (evt.source.draggable) {
var global = evt.source.convertPointToView({ x: evt.x, y: evt.y }, scroll);
evt.source.updateLayout({
left: global.x - width / 2
});
}
}
win.add(scroll);
win.open();
PR ready: https://github.com/appcelerator/titanium_mobile/pull/2300
Closing bug. Verified fix on: SDK build: 2.1.0.v20120604151821 Titanium Studio, build: 2.1.0.201206041625 Runtime: v8 Device: Droid 1 (2.2.3)
ScrollViews will intercept touch events. The labels should be placed inside wrapperViews(SIZE width and height) with enabled:false and the touch event handlers must be added to the labels directly. The wrapperViews must be moved around.