ScrollableView events not firing on Android?

Question

ScrollableView events not firing on Android?

You must Login before you can answer or comment on any questions.

I admit defeat and turn to you experts for help! The following sample code fires touchstart, click, touchend and singletap when I click on the view in the iPhone emulator. But, in the Android emulator (and on an Android device), click doesn't fire any events. The only event I can get to fire on Android is scroll. (I'm using Mobile SDK 1.6.1) Any suggestions? Thanks.

var win = Ti.UI.createWindow({  
});
 
var view1 = Ti.UI.createView({backgroundColor:'red'});
var view2 = Ti.UI.createView({backgroundColor:'blue'});
var view3 = Ti.UI.createView({backgroundColor:'green'});
var scrollView = Ti.UI.createScrollableView({
    views:[view1,view2,view3]
});
win.add(scrollView);
 
clickEvent = scrollView.addEventListener('click', function() {
    Ti.API.info('Click event heard'); });
scrollEvent = scrollView.addEventListener('scroll', function() {
    Ti.API.info('Scroll heard heard'); });
singletapEvent = scrollView.addEventListener('singletap', function() {
    Ti.API.info('Single tap event heard'); });
swipeEvent = scrollView.addEventListener('swipe', function() {
    Ti.API.info('Swipe event heard'); });
touchcancelEvent = scrollView.addEventListener('touchcancel', function() {
    Ti.API.info('Touchcancel event heard'); });
touchendEvent = scrollView.addEventListener('touchend', function() {
    Ti.API.info('Touchend event heard'); });
touchmoveEvent = scrollView.addEventListener('touchmove', function() {
    Ti.API.info('Touchmove event heard'); });
touchstartEvent = scrollView.addEventListener('touchstart', function() {
    Ti.API.info('Touchstart event heard'); });
 
win.open();

2 Answers

Your Answer

Think you can help? Login to answer this question!

The scrollableView example in Kitchen Sink shows the same behaviour, I think.

— commented 2 years ago by Adrian Hampshire

Accepted Answer

Accepted Answer

Hi again, Adrian

OK, it's confirmed that at present a scrollableView will only respond to scroll events. You can work around this by adding a view to each scrollableView "screen" as follows:

var win = Ti.UI.createWindow();
 
var view1 = Ti.UI.createView({backgroundColor:'red'});
var view1Inner = Ti.UI.createView({backgroundColor:'white'});
view1.add(view1Inner);
 
var view2 = Ti.UI.createView({backgroundColor:'blue'});
 
var view3 = Ti.UI.createView({backgroundColor:'green'});
 
var scrollableView = Ti.UI.createScrollableView({
    views:[view1,view2,view3]
});
win.add(scrollableView);
 
view1Inner.addEventListener('click', function() {
    Ti.API.info('click event on view1Inner heard');
});
view1Inner.addEventListener('dblclick', function() {
    Ti.API.info('dblclick event on view1Inner heard');
});
view1Inner.addEventListener('singletap', function() {
    Ti.API.info('singletap event on view1Inner heard');
});
view1Inner.addEventListener('doubletap', function() {
    Ti.API.info('doubletap event on view1Inner heard');
});
view1Inner.addEventListener('swipe', function() {
    Ti.API.info('swipe event on view1Inner heard');
});
view1Inner.addEventListener('touchcancel', function() {
    Ti.API.info('touchcancel event on view1Inner heard');
});
view1Inner.addEventListener('touchend', function() {
    Ti.API.info('touchend event on view1Inner heard');
});
view1Inner.addEventListener('touchmove', function() {
    Ti.API.info('touchmove event on view1Inner heard');
});
view1Inner.addEventListener('touchstart', function() {
    Ti.API.info('touchstart event on view1Inner heard');
});
 
view1Inner.addEventListener('twofingertap', function() {
    Ti.API.info('twofingertap event on view1Inner heard');
});
 
scrollableView.addEventListener('scroll', function() {
    Ti.API.info('scroll event on scrollableView heard');
});
 
win.open();

I actually think this may be an ideal behavior, as some of the gestures are so similar to the scroll gesture, that they may be easily confused. Thus, possibly scrollableView should only have one or two events (scroll and click).

So the only caveat to the above workaround is that views have a maximum descendant limit of 12, so already (with the scrollableView, it's child view, and this extra view), 3 views have already been consumed out of this limit. I doubt that this would be a problem though, except in some very rare cases, but it's worthwhile keeping it in mind.

Cheers

Answer 2

Adrian

I have simplified your code a bit, as follows:

var win = Ti.UI.createWindow();
 
var view1 = Ti.UI.createView({backgroundColor:'red'});
var view2 = Ti.UI.createView({backgroundColor:'blue'});
var view3 = Ti.UI.createView({backgroundColor:'green'});
var scrollableView = Ti.UI.createScrollableView({
    views:[view1,view2,view3]
});
win.add(scrollableView);
 
scrollableView.addEventListener('click', function() {
    Ti.API.info('Click event heard');
});
scrollableView.addEventListener('scroll', function() {
    Ti.API.info('Scroll heard heard');
});
scrollableView.addEventListener('singletap', function() {
    Ti.API.info('Single tap event heard');
});
scrollableView.addEventListener('swipe', function() {
    Ti.API.info('Swipe event heard');
});
scrollableView.addEventListener('touchcancel', function() {
    Ti.API.info('Touchcancel event heard');
});
scrollableView.addEventListener('touchend', function() {
    Ti.API.info('Touchend event heard');
});
scrollableView.addEventListener('touchmove', function() {
    Ti.API.info('Touchmove event heard');
});
scrollableView.addEventListener('touchstart', function() {
    Ti.API.info('Touchstart event heard');
});
 
win.open();

I can confirm that using the Android emulator, Ti SDK 1.6.1, Android 2.2, only the scroll event is fired for the above code.

I think this requires a bit more investigation about what is available natively. I will find out and add to this thread shortly.

Cheers