[AC-6434] Strange behaviour of iOS home indicator when changing orientations - 8.2.0.GA
| GitHub Issue | n/a |
|---|---|
| Type | Bug |
| Priority | n/a |
| Status | Closed |
| Resolution | Invalid |
| Resolution Date | 2019-12-30T16:27:50.000+0000 |
| Affected Version/s | n/a |
| Fix Version/s | n/a |
| Components | Titanium SDK & CLI |
| Labels | LANDSCAPE, PORTRAIT, extendSafeArea, ios, orientationChange |
| Reporter | cstefaniga |
| Assignee | Motiur Rahman |
| Created | 2019-11-15T10:18:22.000+0000 |
| Updated | 2019-12-30T16:27:50.000+0000 |
Description
When changing orientations from portrait to landscape or in fact any other cases the home indicator doesn't behave normally.
For example, if I am in Portrait and get to landscape the home indicator remains in portrait and also the app still remain in portrait even if the view change it's position.
Also I attached some screenshots in which I rotate the device only to the right to see the behaviour.
Code to reproduce the issue:
Ti.Gesture.addEventListener('orientationchange',function(e) {
if (e.orientation == Ti.UI.LANDSCAPE_LEFT || e.orientation == Ti.UI.LANDSCAPE_RIGHT) {
landscapeWindow.open();
} else {
landscapeWindow.close();
}
});
var portraitWindow = Window("green", [Ti.UI.PORTRAIT]);
var landscapeWindow = Window("red", [Ti.UI.LANDSCAPE_LEFT, Ti.UI.LANDSCAPE_RIGHT]);
portraitWindow.open();
function Window(backgroundColor, orientationModes) {
var view = Ti.UI.createView();
//view.backgroundColor = "orange";
var label = Ti.UI.createLabel({
color:'#000000',
text: "welcome",
height:'auto',
width:'auto'
});
view.add(label);
//create component instance
var window = Ti.UI.createWindow({
backgroundColor:backgroundColor,
orientationModes: orientationModes,
//extendSafeArea : false
});
window.add(view);
return window;
}
Attachments
| File | Date | Size |
|---|---|---|
| output.mov | 2019-11-16T08:19:17.000+0000 | 1822408 |
| Simulator Screen Shot - iPhone 11 - 2019-11-15 at 12.11.17.png | 2019-11-15T10:17:32.000+0000 | 38102 |
| Simulator Screen Shot - iPhone 11 - 2019-11-15 at 12.11.23.png | 2019-11-15T10:17:32.000+0000 | 32474 |
| Simulator Screen Shot - iPhone 11 - 2019-11-15 at 12.11.26.png | 2019-11-15T10:17:32.000+0000 | 35175 |
| Simulator Screen Shot - iPhone 11 - 2019-11-15 at 12.11.31.png | 2019-11-15T10:17:32.000+0000 | 31508 |
| Simulator Screen Shot - iPhone 11 - 2019-11-15 at 12.11.35.png | 2019-11-15T10:17:32.000+0000 | 35175 |
if you uncomment "extendSafeArea : false" and "view.backgroundColor = "orange"" lines you will see that will get even more problematic because also the dimensions of the view will get messed up with orientation changes.
[~Claudiu Stefaniga] This is an issue with the given app's orientation handling. The app's "app.js" is listening to the "orientationchange" event to re-layout content. The problem with this is that the "orientationchange" event provides the orientation of the "device", not the "app". The native device orientation change event will always occur before the app is rotated by the OS. And some devices will be faster or slower to respond to the device orientation change before rotating the app. Also note that the "device" orientation and "app" orientation can differ as well. Especially when using split-screen mode on a tablet, because when you hold the tablet "landscape", both of the displayed apps will be in "portrait" form. The attached app code mishandles this case. What you should be doing is listening to the window's "postlayout" event, fetch the window's width/height, and determine if it is portrait/landscape. This will also handle the split-screen case.
var window = Ti.UI.createWindow({ //backgroundColor : backgroundColor, //orientationModes : orientationModes, //extendSafeArea : false }); var view = Ti.UI.createView(); //view.backgroundColor = "orange"; var label = Ti.UI.createLabel({ color : '#000000', text : "welcome", height : 'auto', width : 'auto' }); view.add(label); window.add(view); window.addEventListener("postlayout", function() { var windowSize = window.size; var isPortrait = (windowSize.height >= windowSize.width); if (isPortrait) { Ti.API.info("### Window is in portrait form."); window.backgroundColor = "green"; } else { Ti.API.info("### Window is in landscape form."); window.backgroundColor = "red"; } }); window.open();