Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-16344] Android: When adding swipe event to a tabGroup, the inside tableview's inside won't scroll nice.

GitHub Issuen/a
TypeBug
PriorityLow
StatusClosed
ResolutionWon't Fix
Resolution Date2014-01-31T19:21:22.000+0000
Affected Version/sRelease 3.2.0
Fix Version/sn/a
ComponentsAndroid
LabelssupportTeam
ReporterMauro Parra-Miranda
AssigneeIngo Muschenetz
Created2014-01-30T01:39:13.000+0000
Updated2017-03-23T22:42:18.000+0000

Description

Problem Description

I found that attaching a 'swipe' event handler to a tab group with the goal of allowing swiping left and right to change tabs is having the unintended side effect of preventing the native scroll behavior on a table view contained in the tab group on Android. Normally when you swipe down (fling) on a table view, there's some inertia and the table view keeps scrolling for a little bit. When there is a 'swipe' event handler on a tab group and you swipe down on a table view, as soon as you lift your finger off the screen the table view motion stops. There is no inertia. The scrolling stops as soon as the finger is lifted, making it hard to scroll through a long list. iOS doesn't seem affected. The swipe handler works and native scroll works as expected.

Test Case

// create table view 1
var win1 = Ti.UI.createWindow({  
    title:'Tab 1',
    backgroundColor:'#fff'
});
var tab1 = Titanium.UI.createTab({  
    icon:'KS_nav_views.png',
    title:'Tab 1',
    window:win1
});
 
var rows1 = [];
for(var i = 0; i < 50; i++) {
    rows1.push({ title: 'Row 1:' + i});
}
 
var table1 = Titanium.UI.createTableView({
    data: rows1,
    width: 'auto',
    height: 'auto'
});
 
win1.add(table1);
 
// create table view 2
var win2 = Titanium.UI.createWindow({  
    title:'Tab 2',
    backgroundColor:'#fff'
});
var tab2 = Titanium.UI.createTab({  
    icon:'KS_nav_ui.png',
    title:'Tab 2',
    window:win2
});
 
var rows2 = [];
for(var i = 0; i < 50; i++) {
    rows2.push({ title: 'Row 2:' + i});
}
 
var table2 = Titanium.UI.createTableView({
    data: rows2,
    width: 'auto',
    height: 'auto'
});
 
win2.add(table2);
 
//  create tabgroup and tabs
var tabGroup = Ti.UI.createTabGroup();
tabGroup.addTab(tab1);  
tabGroup.addTab(tab2);  
 
// Event handler to change tab on left/right swipe
// This is where the problem comes in.
// Comment out the 'swipe' listener and normal table view scroll behavior will be back
tabGroup.addEventListener('swipe', function(e) {
    var activeTabIndex = tabGroup.tabs.indexOf(tabGroup.activeTab);
 
    if(e.direction === 'right' && activeTabIndex > 0) {
        tabGroup.setActiveTab(activeTabIndex - 1);
    } else if(e.direction === 'left' && activeTabIndex < tabGroup.tabs.length - 1) {
        tabGroup.setActiveTab(activeTabIndex + 1);
    }
    // Is there something missing in this event handler to have native behavior when the swipe
    // direction is not left or right?
});
 
// open tab group
tabGroup.open();

Steps to reproduce

1. Create a new mobile project (Classic Titanium) 2. Paste the test case to app.js 3. Run the sample into a device (Nexus 4) 4. Scroll down and let the tableview roll (it usually continue to scroll until momentum is lost) 5. The scroll will stop right away you stop.

Extra info

Q&A: http://developer.appcelerator.com/question/161747/swipe-event-handler-prevents-native-table-view-scroll-behavior-on-android

Comments

  1. Hieu Pham 2014-01-30

    The swipe event is eating the scroll event. This is expected behavior with the current Android architecture. Swipe event is not recommended to use along with a scrollable widget.
  2. Hieu Pham 2014-01-31

    Closing as won't fix. Please create a new feature request.
  3. Lee Morris 2017-03-23

    Closing ticket as Won't Fix with reference to the above comments.

JSON Source