[TIMOB-15942] TableView jerks with Window Swipe gesture

GitHub Issue	n/a
Type	Bug
Priority	Critical
Status	Closed
Resolution	Duplicate
Resolution Date	2017-07-11T20:56:39.000+0000
Affected Version/s	n/a
Fix Version/s	n/a
Components	Android
Labels	android, slow, swipe, tableView
Reporter	Gowtham
Assignee	Eric Merriman
Created	2013-11-28T10:33:33.000+0000
Updated	2017-07-11T20:56:39.000+0000

Description

I created a Window with two Views, One will always be visible and the other will be visible when swiped in right-side direction(Sliding Menu) by moving the main visible view right side 70% of the total width. My visible view consists a TableView with some data requires scrolling. After I add swipe event, TableView moving very slowly and stops. If I remove swipe, its working smooth.

Expected Result:

- TableView scrolls smoothly

Actual Result:

- TableView jerks, stops and moving and stops - When I remove swipe event, its working smoothly and got expected result. Note: My rows are custom and for sample I include the following code.

Sample Code:

*index.xml*

<Alloy>
	<Window class="container">
		<Require src="tableView" id="tbl"></Require>
		<Require src="slidingMenu" id="sld"></Require>
	</Window>
</Alloy>

*index.tss*

".container": {
	backgroundColor:"white",
	width: Ti.UI.FILL,
	height: Ti.UI.FILL
}

*index.js*

$.index.addEventListener('swipe', function(e){
	if(e.direction == 'right'){
		var anim = Ti.UI.createAnimation({
			left: '70%',
			duration: 100
		});
		$.tbl.tableView.animate(anim);
	}else if(e.direction == 'left'){
		var anim = Ti.UI.createAnimation({
			left: 0,
			duration: 100
		});
		$.tbl.tableView.animate(anim);
	}
});
$.index.open();

*tableView.xml*

<Alloy>
	<TableView id="tableView">
		<TableViewRow title="swipe window"></TableViewRow>
		<TableViewRow title="swipe window"></TableViewRow>
		<TableViewRow title="swipe window"></TableViewRow>
		<TableViewRow title="swipe window"></TableViewRow>
		<TableViewRow title="swipe window"></TableViewRow>
		<TableViewRow title="swipe window"></TableViewRow>
		<TableViewRow title="swipe window"></TableViewRow>
		<TableViewRow title="swipe window"></TableViewRow>
		<TableViewRow title="swipe window"></TableViewRow>
		<TableViewRow title="swipe window"></TableViewRow>
		<TableViewRow title="swipe window"></TableViewRow>
		<TableViewRow title="swipe window"></TableViewRow>
		<TableViewRow title="swipe window"></TableViewRow>
		<TableViewRow title="swipe window"></TableViewRow>
		<TableViewRow title="swipe window"></TableViewRow>
		<TableViewRow title="swipe window"></TableViewRow>
		<TableViewRow title="swipe window"></TableViewRow>
		<TableViewRow title="swipe window"></TableViewRow>
		<TableViewRow title="swipe window"></TableViewRow>
		<TableViewRow title="swipe window"></TableViewRow>
		<TableViewRow title="swipe window"></TableViewRow>
		<TableViewRow title="swipe window"></TableViewRow>
		<TableViewRow title="swipe window"></TableViewRow>
		<TableViewRow title="swipe window"></TableViewRow>
		<TableViewRow title="swipe window"></TableViewRow>
		<TableViewRow title="swipe window"></TableViewRow>
		<TableViewRow title="swipe window"></TableViewRow>
		<TableViewRow title="swipe window"></TableViewRow>
		<TableViewRow title="swipe window"></TableViewRow>
		<TableViewRow title="swipe window"></TableViewRow>
		<TableViewRow title="swipe window"></TableViewRow>
		<TableViewRow title="swipe window"></TableViewRow>
		<TableViewRow title="swipe window"></TableViewRow>
		<TableViewRow title="swipe window"></TableViewRow>
		<TableViewRow title="swipe window"></TableViewRow>
		<TableViewRow title="swipe window"></TableViewRow>
		<TableViewRow title="swipe window"></TableViewRow>
		<TableViewRow title="swipe window"></TableViewRow>
		<TableViewRow title="swipe window"></TableViewRow>
		<TableViewRow title="swipe window"></TableViewRow>
		<TableViewRow title="swipe window"></TableViewRow>
		<TableViewRow title="swipe window"></TableViewRow>
		<TableViewRow title="swipe window"></TableViewRow>
		<TableViewRow title="swipe window"></TableViewRow>
	</TableView>
</Alloy>

*tableView.tss*

'#tableView': {
	backgroundColor: '#000',
	width: '100%',
	height: '100%',
	zIndex: 2
},
'TableViewRow': {
	className: 'rows'
}

*tableView.js* //empty file *slidingMenu.xml*

<Alloy>
	<View id="slidingMenu">
		<Label>Testing</Label>
	</View>
</Alloy>

*slidingMenu.tss*

'#slidingMenu': {
	backgroundColor: 'red',
	width: '100%',
	height: '100%',
	zIndex: 0
}

*slidingMenu.js* //empty file I included the state of the sample app image after swiped right and normal view. I think I provided all required. Please help me with this problem, thanks appcel.

Attachments

File	Date	Size
afterSwipe.png	2013-11-28T10:33:33.000+0000	246489
normal.png	2013-11-28T10:33:33.000+0000	211605

Comments

John Liddell 2013-12-05

This issue is a result of the tableviewrowproxy stopping the event from moving forward as it detects the swipe event. This issue will still exist in 3.2.0 as well. I also tried to report this issue in the past and was told it was a non issue, so i fixed it myself.
Gowtham 2013-12-06

Hi John. How you solved it? I just kept button to open the sliding and removed swipe event. Is there any way to achieve it with swipe event. Thanks in advance.
John Liddell 2013-12-06

Unfortunately i had to make my own modifications to the titanium source to solve it correctly.
Gowtham 2013-12-06

Oh Great John. May I know how and is it possible to get some ideas or snippets to make it work for me?
Eric Wieber 2013-12-10

Hi Gowtham, I was able to reproduce your issue, but found that the table does not jerk if the swipe event is not on the window. Could you consider creating a view and moving everything inside of it? Then the swipe event will be on the view and not the window. Please let me know if you have any questions.

Gowtham 2013-12-10

Thank you Weiber, This is my new code, *index.xml*

   <Alloy>
   	<Window class="container">
   		<View id="test">
   			<Require src="tableView" id="tbl"></Require>
   			<Require src="slidingMenu" id="sld"></Require>
   		</View>		
   	</Window>
   </Alloy>

*index.js*

   $.test.addEventListener('swipe', function(e){
   	if(e.direction == 'up' || e.direction == 'down')return true;
   	if(e.direction == 'right'){
   		var anim = Ti.UI.createAnimation({
   			left: '70%',
   			duration: 100
   		});
   		$.tbl.tableView.animate(anim);
   	}else if(e.direction == 'left'){
   		var anim = Ti.UI.createAnimation({
   			left: 0,
   			duration: 100
   		});
   		$.tbl.tableView.animate(anim);
   	}
   });
   
   $.index.open();

Even now TableView moving very slow and not smoother. Thank you.

Eric Wieber 2013-12-10

Gowtham, Since we were able to reproduce the issue and do not have an immediate solution for you, I am escalating this ticket to a bug, to be reviewed further. We will let you know when we have any updates on this issue. Thanks!
Lee Morris 2017-07-11

Please refer to TIMOB-17539.

JSON Source