Quantcast
Channel: Appcelerator Developer Center Q&A Unanswered Questions 20
Viewing all articles
Browse latest Browse all 8068

Swipe event handler prevents native table view scroll behavior on Android

$
0
0

The main UI of my app is a tab group with a table view in each tab.

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.

Is there something I'm missing in the test case to allow the 'swipe' event to bubble up to the native control when the direction of the swipe is not left or right? Any other suggestion for only capturing the left or right swipe event?

  • Application type: mobile
  • Titanium Command-Line Interface, CLI version 3.3.0
  • Titanium SDK version 3.2.0.GA
  • Platform & version: Tested on Android 2.3 and 4.3
  • Device: Android emulator, Android HTC Incredible 2, Android Samsung Galaxy S4
  • Host Operating System: Ubuntu 13.10
  • Titanium Studio, build: 3.2.0.201312191547

Steps to reproduce:

  • Create a tab group with a table view in tab 1 and a table view in tab 2
  • Attach an event listener to the tab group to catch left/right swipe events on the tabgroup and change tabs appropriately

Expected behavior:

  • Swiping up/down on the table view should have the same scrolling behavior as when there is no swipe event listener (keep scrolling with inertia)

Actual behavior:

  • On Android, scrolling stops as soon as the finger is lifted
  • On iOS, the behavior is 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();

Viewing all articles
Browse latest Browse all 8068

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>