[TIMOB-5819] Android: Percentage-based views need to be re-drawn on device rotation
| GitHub Issue | n/a |
| Type | Bug |
| Priority | Critical |
| Status | Closed |
| Resolution | Fixed |
| Resolution Date | 2012-01-03T16:08:16.000+0000 |
| Affected Version/s | Release 1.7.3, Release 1.8.0 |
| Fix Version/s | Sprint 2011-42, Release 1.7.4, Release 1.8.0, Release 1.7.6 |
| Components | Android |
| Labels | module_views, percentage, qe-testadded, rotation |
| Reporter | Sandeep Bhimavarapu |
| Assignee | Allen Yeung |
| Created | 2011-10-20T14:08:12.000+0000 |
| Updated | 2012-03-05T11:23:57.000+0000 |
Description
Views that have widths or positioning points based on percentages do not properly get updated on device rotation.
Sample Code
{noformat}
var tabGroup = Titanium.UI.createTabGroup();
var win1 = Titanium.UI.createWindow({ title: 'Tab 1', backgroundColor: '#fff', fullscreen: 'false' });
var tab1 = Titanium.UI.createTab({ icon: 'KS_nav_views.png', title: 'Tab 1', window: win1 });
win1.orientationModes = [Ti.UI.PORTRAIT, Ti.UI.LANDSCAPE_LEFT, Ti.UI.LANDSCAPE_RIGHT, Ti.UI.UPSIDE_PORTRAIT];
var v1 = Ti.UI.createView({
backgroundColor: '#f00',
width: '30%',
left: '20%',
top: 0,
height: '100%'
});
var v3 = Ti.UI.createView({
backgroundColor: 'blue',
width: '80%',
left: '10%',
top: '10%',
height: '80%'
});
var v5 = Ti.UI.createView({
backgroundColor: 'gray',
width: '60%',
left: '20%',
top: '10%',
height: '80%'
});
v3.add(v5);
v1.add(v3);
win1.add(v1);
var v2 = Ti.UI.createView({
backgroundColor: '#0f0',
width: '30%',
right: '20%',
top: 0,
height: '100%'
});
var v4 = Ti.UI.createView({
backgroundColor: 'blue',
width: '80%',
left: '10%',
top: '10%',
height: '80%'
});
var v6 = Ti.UI.createView({
backgroundColor: 'gray',
width: '60%',
left: '20%',
top: '10%',
height: '80%'
});
v4.add(v6);
v2.add(v4);
win1.add(v2);
var win2 = Titanium.UI.createWindow({ title: 'Tab 2', backgroundColor: '#fff', fullscreen: 'false' });
win2.orientationModes = [Ti.UI.PORTRAIT, Ti.UI.LANDSCAPE_LEFT, Ti.UI.LANDSCAPE_RIGHT, Ti.UI.UPSIDE_PORTRAIT];
var tab2 = Titanium.UI.createTab({ icon: 'KS_nav_ui.png', title: 'Tab 2', window: win2 });
var label2 = Titanium.UI.createLabel({ color: '#999', text: 'I am Window 2', font: { fontSize: 20, fontFamily: 'Helvetica Neue' }, textAlign: 'center', width: 'auto' });
win2.add(label2);
tabGroup.addTab(tab1);
tabGroup.addTab(tab2);
tabGroup.open();
{noformat}
As shown in the images, when started in Portrait, the views are shown properly.
On turning the emulator/ device to landscape, the white space between the two views can be noticed. Also, the bottoms of views are not visible.
Attachments
Run this code also
var tabGroup = Titanium.UI.createTabGroup(); var win1 = Titanium.UI.createWindow({ title: 'Tab 1', backgroundColor: '#fff', fullscreen: 'false' }); var tab1 = Titanium.UI.createTab({ icon: 'KS_nav_views.png', title: 'Tab 1', window: win1 }); win1.orientationModes = [Ti.UI.PORTRAIT, Ti.UI.LANDSCAPE_LEFT, Ti.UI.LANDSCAPE_RIGHT, Ti.UI.UPSIDE_PORTRAIT]; var v1 = Ti.UI.createView({ backgroundColor: '#f00', //width: '30%', width: 'auto', left: '20%', top: 0, height: '100%' }); var v3 = Ti.UI.createView({ backgroundColor: 'blue', width: '80%', left: '10%', top: '10%', height: '80%' }); var v5 = Ti.UI.createView({ backgroundColor: 'gray', width: '60%', left: '20%', top: '10%', height: '80%' }); //v3.add(v5); //v1.add(v3); win1.add(v1); var v2 = Ti.UI.createView({ backgroundColor: '#0f0', // width: '30%', width: 'auto', right: '20%', top: 0, height: '100%' }); var v4 = Ti.UI.createView({ backgroundColor: 'blue', width: '80%', left: '10%', top: '10%', height: '80%' }); var v6 = Ti.UI.createView({ backgroundColor: 'gray', width: '60%', left: '20%', top: '10%', height: '80%' }); //v4.add(v6); //v2.add(v4); win1.add(v2); var win2 = Titanium.UI.createWindow({ title: 'Tab 2', backgroundColor: '#fff', fullscreen: 'false' }); win2.orientationModes = [Ti.UI.PORTRAIT, Ti.UI.LANDSCAPE_LEFT, Ti.UI.LANDSCAPE_RIGHT, Ti.UI.UPSIDE_PORTRAIT]; var tab2 = Titanium.UI.createTab({ icon: 'KS_nav_ui.png', title: 'Tab 2', window: win2 }); var label2 = Titanium.UI.createLabel({ color: '#999', text: 'I am Window 2', font: { fontSize: 20, fontFamily: 'Helvetica Neue' }, textAlign: 'center', width: 'auto' }); win2.add(label2); tabGroup.addTab(tab1); tabGroup.addTab(tab2); tabGroup.open();Also merged to 1_7_X. In addition to 1.8.0 testing mentioned in the pull request (https://github.com/appcelerator/titanium_mobile/pull/575#issuecomment-2519262) , also tested the two failcases in 1_7_X branch, as well as several screens of KitchenSink.
Tested with 1.8.0.1.v20111205164258 v8/rhino on Galaxy 10.1 (3.1) Droid 1 (2.2.2) Nexus S (2.3.6) Emulator (4.0)
Here is the test case I used (I tweaked the percentages so the bug is more obvious to see).
Titanium.UI.setBackgroundColor('#000'); var win1 = Titanium.UI.createWindow({ title:'Tab 1', backgroundColor:'#e7e7e7' }); var label1 = Titanium.UI.createLabel({ color:'black', top:20, //left:20, //right:20, right:'33%', left:'33%', height:'auto', backgroundColor:'orange', text:'Documentation is segmented by the Titanium platform youre using. While APIs are similar between both desktop and mobile, the documentation is specific to each platform to make it easier to understand whats supported and to concentrate on information specific to each platform.', font:{fontSize:20,fontFamily:'Helvetica Neue'}, }); var scrollView = Titanium.UI.createScrollView({ contentWidth:'auto', contentHeight:'auto', top:0, backgroundColor:'yellow', showVerticalScrollIndicator:true, showHorizontalScrollIndicator:true, layout:'vertical' }); var view = Ti.UI.createView({ height:100, //right:20, left:20, right:'33%', left:'33%', backgroundColor:'white', top:10, borderRadius:10, borderWidth:1, borderColor:'#808080', layout:'vertical' }); scrollView.add(label1); scrollView.add(view); win1.add(scrollView); win1.open();PR ready https://github.com/appcelerator/titanium_mobile/pull/885
Tested on Ti Studio 1.0.7.201112080131 Ti Mob SDK 1.8.0.1.v20111209102124 v8/rhino OSX Lion Droid 3 2.3.4 Expected behavior of percentage based views being displayed correctly (redrawn) is shown. Tested using all three test cases
Open to add label