[TIMOB-13301] iOS: Add animation to scrollToView, moveNext, movePrevious on ScrollableView

GitHub Issue	n/a
Type	New Feature
Priority	Medium
Status	Closed
Resolution	Fixed
Resolution Date	2014-04-08T20:30:30.000+0000
Affected Version/s	Release 3.0.0
Fix Version/s	2014 Sprint 07, 2014 Sprint 07 SDK, Release 3.3.0
Components	iOS
Labels	android, ios, module_scrollableview, qe-closed-3.3.0, qe-testadded, scrollableview
Reporter	Martin Guillon
Assignee	Vishal Duggal
Created	2012-10-08T13:10:44.000+0000
Updated	2014-04-25T06:48:46.000+0000

Description

* on android setCurrentPage sets the page with animation. On ios it doesnt. * movePrevious and moveNext should be implemented on iOS * it would be nice to be able to choose if scrollToView, moveNext, movePrevious happen with animation

Attachments

File	Date	Size
app.js	2014-03-27T21:23:04.000+0000	3176

Comments

Martin Guillon 2012-10-10

pull request https://github.com/appcelerator/titanium_mobile/pull/3146

   var win = Titanium.UI.createWindow();
   win.backgroundColor = '#ccc';
   
   // initialize to all modes
   win.orientationModes = [Titanium.UI.PORTRAIT, Titanium.UI.LANDSCAPE_LEFT, Titanium.UI.LANDSCAPE_RIGHT];
   
   var view1 = Ti.UI.createView({
   	backgroundColor : 'red'
   });
   var l1 = Ti.UI.createLabel({
   	text : 'View 1',
   	color : '#fff',
   	width : 'auto',
   	height : 'auto'
   });
   view1.add(l1);
   
   var view2 = Ti.UI.createView({
   	backgroundColor : 'blue'
   });
   var l2 = Ti.UI.createLabel({
   	text : 'Click Me (View 2 - see log)',
   	color : '#fff',
   	width : 'auto',
   	height : 'auto'
   });
   view2.add(l2);
   
   var view3 = Ti.UI.createView({
   	backgroundColor : 'green'
   });
   var l3 = Ti.UI.createLabel({
   	text : 'View 3',
   	color : '#fff',
   	width : 'auto',
   	height : 'auto'
   });
   view3.add(l3);
   
   var view4 = Ti.UI.createView({
   	backgroundColor : 'black'
   });
   var l4 = Ti.UI.createLabel({
   	text : 'View 4',
   	color : '#fff',
   	width : 'auto',
   	height : 'auto'
   });
   view4.add(l4);
   
   var scrollView = Titanium.UI.createScrollableView({
   	views : [view1, view2, view3, view4],
   	showPagingControl : true,
   	pagingControlHeight : 30,
   	maxZoomScale : 2.0,
   	currentPage : 1
   });
   
   win.add(scrollView);
   
   var i = 1;
   var activeView = view1;
   
   scrollView.addEventListener('scroll', function(e) {
   	activeView = e.view;
   	// the object handle to the view that is about to become visible
   	i = e.currentPage;
   	Titanium.API.info("scroll called - current index " + i + ' active view ' + activeView);
   });
   scrollView.addEventListener('click', function(e) {
   	Ti.API.info('ScrollView received click event, source = ' + e.source);
   });
   scrollView.addEventListener('touchend', function(e) {
   	Ti.API.info('ScrollView received touchend event, source = ' + e.source);
   });
   
   // add button to dynamically add a view
   var add = Titanium.UI.createButton({
   	title : 'Add',
   	style : Titanium.UI.iPhone.SystemButtonStyle.BORDERED
   });
   add.addEventListener('click', function() {
   	var newView = Ti.UI.createView({
   		backgroundColor : 'purple'
   	});
   	var l = Ti.UI.createLabel({
   		text : 'View ' + (scrollView.views.length + 1),
   		color : '#fff',
   		width : 'auto',
   		height : 'auto'
   	});
   	newView.add(l);
   	scrollView.addView(newView);
   });
   
   // jump button to dynamically change go directly to a page (non-animated)
   var jump = Titanium.UI.createButton({
   	title : 'Jump',
   	style : Titanium.UI.iPhone.SystemButtonStyle.BORDERED
   });
   jump.addEventListener('click', function() {
   	i = (scrollView.currentPage + 1) % scrollView.views.length;
   	scrollView.currentPage = i;
   });
   
   // move scroll view left
   var left = Titanium.UI.createButton({
   	backgroundColor : 'transparent',
   	title : '<'
   });
   left.addEventListener('click', function(e) {
   	if (i === 0) {
   		return;
   	}
   	i--;
   	// scrollView.scrollToView(i, true);///CHANGE THIS TO ANIMATE/NOT
   	// scrollView.scrollToView(i, false);///CHANGE THIS TO ANIMATE/NOT
   	scrollView.scrollToView(i);///CHANGE THIS TO ANIMATE/NOT
   });
   
   // move scroll view right
   var right = Titanium.UI.createButton({
   	backgroundColor : 'transparent',
   	title : '>'
   });
   right.addEventListener('click', function(e) {
   	if (i === (scrollView.views.length - 1)) {
   		return;
   	}
   	i++;
   	// scrollView.scrollToView(scrollView.views[i], true); ///CHANGE THIS TO ANIMATE/NOT
   	// scrollView.scrollToView(scrollView.views[i], false); ///CHANGE THIS TO ANIMATE/NOT
   	scrollView.scrollToView(scrollView.views[i]); ///CHANGE THIS TO ANIMATE/NOT
   });
   var flexSpace = Titanium.UI.createButton({
   	systemButton : Titanium.UI.iPhone.SystemButton.FLEXIBLE_SPACE
   });
   
   var toolbar = Titanium.UI.createView({
   	width : Ti.UI.FILL,
   	layout : 'horizontal',
   	height : 40,
   	bottom : 20,
   	backgroundColor : '#333333'
   });
   
   left.left = add.left = jump.left = right.left = 10;
   left.width = add.width = jump.width = right.width = 60;
   
   toolbar.add(left);
   toolbar.add(add);
   toolbar.add(jump);
   toolbar.add(right);
   
   win.add(toolbar);
   
   win.open();

Martin Guillon 2012-11-22

updated test case

   var win = Titanium.UI.createWindow();
   win.backgroundColor = '#ccc';
    
   // initialize to all modes
   win.orientationModes = [Titanium.UI.PORTRAIT, Titanium.UI.LANDSCAPE_LEFT, Titanium.UI.LANDSCAPE_RIGHT];
    
   var view1 = Ti.UI.createView({
       backgroundColor : 'red'
   });
   var l1 = Ti.UI.createLabel({
       text : 'View 1',
       color : '#fff',
       width : 'auto',
       height : 'auto'
   });
   view1.add(l1);
    
   var view2 = Ti.UI.createView({
       backgroundColor : 'blue'
   });
   var l2 = Ti.UI.createLabel({
       text : 'Click Me (View 2 - see log)',
       color : '#fff',
       width : 'auto',
       height : 'auto'
   });
   view2.add(l2);
    
   var view3 = Ti.UI.createView({
       backgroundColor : 'green'
   });
   var l3 = Ti.UI.createLabel({
       text : 'View 3',
       color : '#fff',
       width : 'auto',
       height : 'auto'
   });
   view3.add(l3);
    
   var view4 = Ti.UI.createView({
       backgroundColor : 'black'
   });
   var l4 = Ti.UI.createLabel({
       text : 'View 4',
       color : '#fff',
       width : 'auto',
       height : 'auto'
   });
   view4.add(l4);
    
   var scrollView = Titanium.UI.createScrollableView({
       views : [view1, view2, view3, view4],
       showPagingControl : false,
       scrollingEnabled:false,
       pagingControlHeight : 30,
       maxZoomScale : 2.0,
       currentPage : 1
   });
    
   win.add(scrollView);
    
   var i = 1;
   var activeView = view1;
    
   // add button to dynamically add a view
   var add = Titanium.UI.createButton({
       title : 'Add',
       height:40,
       width:100,
       style : Titanium.UI.iPhone.SystemButtonStyle.BORDERED
   });
   add.addEventListener('click', function() {
       var newView = Ti.UI.createView({
           backgroundColor : 'purple'
       });
       var l = Ti.UI.createLabel({
           text : 'View ' + (scrollView.views.length + 1),
           color : '#fff',
           width : 'auto',
           height : 'auto'
       });
       newView.add(l);
       scrollView.addView(newView);
   });
    
   // jump button to dynamically change go directly to a page (non-animated)
   var jump = Titanium.UI.createButton({
       title : 'Jump',
       height:40,
       width:100,
       style : Titanium.UI.iPhone.SystemButtonStyle.BORDERED
   });
   jump.addEventListener('click', function() {
       i = (scrollView.currentPage + 1) % scrollView.views.length;
       scrollView.currentPage = i;
   });
    
   // move scroll view left
   var left = Titanium.UI.createButton({
       backgroundColor : 'transparent',
       height:40,
       width:100,
       title : '<'
   });
   left.addEventListener('click', function(e) {
       if (i === 0) {
           return;
       }
       i--;
       // scrollView.scrollToView(i, false);///CHANGE THIS TO ANIMATE/NOT
       scrollView.scrollToView(i, false);///CHANGE THIS TO ANIMATE/NOT
   });
    
   // move scroll view right
   var right = Titanium.UI.createButton({
       backgroundColor : 'transparent',
       height:40,
       width:100,
       title : '>'
   });
   right.addEventListener('click', function(e) {
       if (i === (scrollView.views.length - 1)) {
           return;
       }
       i++;
       // scrollView.scrollToView(scrollView.views[i], false); ///CHANGE THIS TO ANIMATE/NOT
       scrollView.scrollToView(scrollView.views[i]); ///CHANGE THIS TO ANIMATE/NOT
   });
   var flexSpace = Titanium.UI.createButton({
       systemButton : Titanium.UI.iPhone.SystemButton.FLEXIBLE_SPACE
   });
    
   var toolbar = Titanium.UI.createView({
       width : Ti.UI.FILL,
       layout : 'horizontal',
       height : 100,
       bottom : 20,
       backgroundColor : '#333333'
   });
   
   scrollView.addEventListener('swipe', function(e) {
   	if (e.direction === 'left')
   	{
   		scrollView.moveNext();
   	}
   	else if (e.direction === 'right')
   	{
   		scrollView.movePrevious(false);
   	}
   })
   
   
   var deleteButton = Titanium.UI.createButton({
       backgroundColor : 'transparent',
       height:40,
       width:100,
       title : 'delete'
   });
   deleteButton.addEventListener('click', function(e) {
       if (i === (scrollView.views.length - 1)) {
           return;
       }
       i++;
       // scrollView.removeView(scrollView.views[0]); ///CHANGE THIS TO ANIMATE/NOT
       scrollView.removeView(0); ///CHANGE THIS TO ANIMATE/NOT
   });
   
    
   left.left = add.left = jump.left = right.left = 10;
   left.width = add.width = jump.width = right.width = 60;
    
   toolbar.add(left);
   toolbar.add(add);
   toolbar.add(jump);
   toolbar.add(deleteButton);
   toolbar.add(right);
    
   win.add(toolbar);
    
   win.open();

Martin Guillon 2012-11-22

pull request https://github.com/appcelerator/titanium_mobile/pull/3146
Lee Driscoll 2013-11-06

Hi, I am coding an Android InfiniteScrollableView widget for a project. The widget works functionally in both directions, is optimised, is built using nothing but Ti framework code (unlike the other attempts I've found). The only thing stopping this from being finished is the bug referred to by this ticket. Setting the current page using setCurrentPage should definitely NOT use animation. scrollToView, moveNext & movePrevious SHOULD use animation. This is the most semantic solution. ----------------- There is a lot of community demand for a working InfiniteScrollableView widget so as an ultimatum I am offering to release the widget to the community along with an integration guide way ahead of schedule if this issue gets a 2013 fix date. Yes, this is cheeky on my part. I'm well aware ;)
Lee Driscoll 2013-11-06
Lee Driscoll 2013-11-07

Hi Ingo, I see that the description for this issue has changed to just point to iOS. Should the fact that Android animates on setCurrentPage have it's own ticket? Lee
Ingo Muschenetz 2013-11-07

[~lsdriscoll] So, to confirm for Android, it's the fact you can't choose to set the animation on or off that's the issue?
Lee Driscoll 2013-11-07

Hi Ingo. For my own project, yes that is the issue I have. Personally I don't think that there should be a parameter passed to enable animation, just the following api: |setCurrentPage|no animation| |scrollToView|with animation| |moveNext|with animation| |movePrevious|with animation| My reasoning for this is because I believe this to be the most semantic behaviour based on method names & it covers all developer requirements. moveNext & movePrevious would simply be shorthand for view.scrollToView(view.currentPage++) and view.scrollToView(view.currentPage--) respectively. IMHO As a complete fix for this ticket, I would implement consistent behaviour across iOs and android.
Vishal Duggal 2014-03-27

Test case for ticket in file. Expected behavior is as follows currentPage property - Non Animated Scroll moveNext,movePrevious,scrollToView methods - Animated Scroll
Vishal Duggal 2014-03-27

Pull pending against master https://github.com/appcelerator/titanium_mobile/pull/5543
Neha Mittal 2014-04-23

Verified fix with below environment: Appc Studio: 3.3.0.201404211130 SDK build: 3.3.0.v20140422163054 acs: 1.0.14 npm: 1.3.2 alloy: 1.4.0-dev CLI: titanium-3.3.0-dev titanium-code-processor:1.1.1-beta1 Xcode: 5.1.1 Osx: Mavericks(10.9.2) Device: iPhone 5C( iOS 7.1) currentPage property - Non Animated Scroll moveNext,movePrevious,scrollToView methods - Animated Scroll as expected. Hence Closing the issue.

JSON Source