Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-10476] iOS: Ti.UI.view - views with scrollableView parent are not resizing on orientation change when cached.

GitHub Issuen/a
TypeBug
PriorityLow
StatusOpen
ResolutionUnresolved
Affected Version/sRelease 3.0.0, Release 3.1.0
Fix Version/sn/a
ComponentsiOS
Labelsapi, reprod
ReporterRima Umbrasas
AssigneeUnknown
Created2012-08-16T14:55:17.000+0000
Updated2018-02-28T20:04:02.000+0000

Description

Description: After orientation change, a cached view that is a child of a scollableView parent is not resized. As a result, part of the page becomes red (scollableView background color) during device rotation in ScrollableView. Code sample
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();
Step 1: run code example above Step 2: switch to tab 2 Step 3: scroll to page 3 Step 4: rotate the device to horizontal orientation (left or right) Expected results: After rotation "page 3" view rescales to fill the screen. Actual results: 1/3 of the page shows the scrollable view background and the view seems to maintain the protrait dimensions.

Comments

  1. jithinpv 2013-03-27

    Issue reproduces Tested with Titanium Studio, build: 3.0.1.201212181159 Titanium SDK version: 3.1.0 Titanium SDK version: 3.0.2 iOS iPhone Simulator: iOS SDK version: 6.0
  2. Lee Morris 2017-05-24

    I have been able to reproduce this issue with the following environment; iPhone 7 (10.2) MacOS 10.11.6 (15G31) Studio 4.9.0.201705021158 Ti SDK 6.1.0.v20170519131839 Appc NPM 4.2.9 Appc CLI 6.2.1 Ti CLI 5.0.13 Alloy 1.9.11 Arrow 2.0.0 Xcode 8.2 (8C38) Node v4.8.2 Java 1.7.0_80

JSON Source