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
PR: https://github.com/appcelerator/titanium_mobile/pull/6538 For test case, use the test case listed previously.
Resolving as
Done
since the Android TabGroup nowadays is capable to swipe out of the box.Closed as completed. If this is in error, please reopen.