[TIMOB-5101] iOS: rotating scrollableView changes page aka index

GitHub Issue	n/a
Type	Bug
Priority	Medium
Status	Closed
Resolution	Fixed
Resolution Date	2012-07-12T13:34:54.000+0000
Affected Version/s	Release 1.7.2
Fix Version/s	Release 2.1.0
Components	iOS
Labels	api, qe-port
Reporter	Jon Alter
Assignee	Neeraj Gupta
Created	2011-08-24T14:57:20.000+0000
Updated	2012-08-16T14:52:53.000+0000

Description

ScrollableView changes pages when device is rotated. Step 1: run example 1 below Step 2: scroll to page 3 Step 3: rotate the device to horizontal (left or right) Step 4: notice the page changes to page 2 Step 5: run example 2 below Step 6: switch to tab 2 Step 7: scroll to page 3 Step 8: rotate the device to horizontal (left or right) Step 9: notice the page change to page 2 Step 10: rotate the device to portrait and then back to horizontal Step 11: notice the page change to page 3

var win = Titanium.UI.createWindow({backgroundColor:'white'});
win.orientationModes = [
    Titanium.UI.PORTRAIT,
    Titanium.UI.UPSIDE_PORTRAIT,
    Titanium.UI.LANDSCAPE_LEFT,
    Titanium.UI.LANDSCAPE_RIGHT,
]; 
var views = [];

for(var i = 0; i < 5; i++) {
    views.push(
        Ti.UI.createLabel({text:'Page: '+(i+1),left:0,right:0,height:50,backgroundColor:'#ccc'})
    );
}

var sv = Ti.UI.createScrollableView({
    left: 20,
    right: 20,
    top: 20,
    clipViews: false,
    views: views    
});
// work around
// Ti.Gesture.addEventListener('orientationchange',function(e){
    // sv.currentPage = sv.currentPage;
// });
win.add(sv);
win.open();

var tabGroup = Titanium.UI.createTabGroup();

var win1 = Titanium.UI.createWindow({  
    title:'Tab 1',
    backgroundColor:'#fff'
});
var tab1 = Titanium.UI.createTab({  
    icon:'KS_nav_views.png',
    title:'Tab 1',
    window:win1
});

var label1 = Titanium.UI.createLabel({
    color:'#999',
    text:'I am Window 1',
    font:{fontSize:20,fontFamily:'Helvetica Neue'},
    textAlign:'center',
    width:'auto'
});

win1.add(label1);

// Create 2nd window with scrollable view
var win2 = Titanium.UI.createWindow({
    backgroundColor:'#0000ff',
    orientationModes:[Ti.UI.LANDSCAPE_RIGHT, Ti.UI.LANDSCAPE_LEFT, Ti.UI.PORTRAIT] 
});
var tab2 = Titanium.UI.createTab({  
    icon:'KS_nav_views.png',
    title:'Tab 2',
    window:win2
});
var views = [];

for(var i = 0; i < 5; i++) {

    var view = Ti.UI.createView({
        top:0,
        bottom:0,
        left:0,
        right:0,
        backgroundColor: '#00ff00'
    });
    var viewLabel = Titanium.UI.createLabel({
        color:'#999',
        text:'Page '+(i+1),
        font:{fontSize:20,fontFamily:'Helvetica Neue'},
        textAlign:'center'
    });
    view.add( viewLabel );

    views.push( view );
}

var sv = Ti.UI.createScrollableView({
    id:'scroller',
    showPagingControl:false,
    top:0,
    bottom:0,
    left:0,
    right:0,
    cacheSize:4,
    backgroundColor:"#ff0000",
    views: views    
});

// work around
// Ti.Gesture.addEventListener('orientationchange',function(e){
    // sv.currentPage = sv.currentPage;
// });
win2.add(sv);

tabGroup.addTab(tab1);  
tabGroup.addTab(tab2);

tabGroup.open();

Workaround

Note: It has been reported that this does not always fix the problem, but no repro case for this yet.

// work around
 Ti.Gesture.addEventListener('orientationchange',function(e){
     sv.currentPage = sv.currentPage;
 });

Associated Helpdesk Ticket

http://appc.me/c/APP-769267

Comments

Junaid Younus 2012-07-12

Tested on the iOS simulator and on an iPhone 3GS with 2.1GA, unable to reproduce either of the issue. Ticket closed.
Rima Umbrasas 2012-08-16

Verified fixed with : Mobile sdk-2.2.0.v20120810080115 Titanium Studio, build: 2.1.1.201207271312 Device: iPhone simulator Ipad 2 version 5.1

JSON Source