[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
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).
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