[AC-6220] iOS: 'masterIsOverlayed' covering up Detail View LeftNavButtons
| GitHub Issue | n/a |
|---|---|
| Type | Bug |
| Priority | n/a |
| Status | Closed |
| Resolution | Done |
| Resolution Date | 2019-06-26T08:38:50.000+0000 |
| Affected Version/s | n/a |
| Fix Version/s | n/a |
| Components | n/a |
| Labels | SplitWindow, iOS |
| Reporter | Adam Armstrong |
| Assignee | Shak Hossain |
| Created | 2019-04-19T18:31:39.000+0000 |
| Updated | 2019-06-26T08:38:50.000+0000 |
Description
Attachments
| File | Date | Size |
|---|---|---|
| step1.png | 2019-04-19T18:33:26.000+0000 | 58803 |
| step2.png | 2019-04-19T18:33:21.000+0000 | 56399 |
| step3.png | 2019-04-19T18:33:17.000+0000 | 52810 |
[~amwinsauto] As per doc [here](https://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.iOS.SplitWindow-property-masterViewVisible) " The property masterIsOverlayed controls how the master is displayed in portrait mode. When masterIsOverlayed is set to true, the detailView occupies the full screen and and masterView is displayed overlayed on top to the left of the screen. When masterIsOverlayed is set to false, the available screen width is split between the masterView and detailView. " is not it expected behavior? Or am I missing anything?
I haven't tested this, but let me ask the question. If you launch the app in portrait form, are all of the navigation buttons shown? Is this only an issue when launching landscape? (If so, then this suggests that the UI layout isn't being updated for the new orientation.)
OK, I dont think I explained my issue correctly. When rotating the device then I expected the Master Overlay to change behavior based on Landscape/Portrait. So that is probably more on me to handle by adding an "orientationchange" event listener. Specifically, when in "Split Window" with another app. Meaning...your physical device may be in landscape....but if you are split 50%/50% with another app, then really my app should be operating as though it was Portrait. But, when trying to app my event listener, I am getting height=undefined and width=undefined. I tried to get height & width from the SplitWindow, the NavigationWindow and from the Window and all 3 return undefined. CODE
Ti.Gesture.addEventListener('orientationchange',function(e) { Ti.API.info('orientation changed!'); Ti.API.info('Orientation: ' + e.orientation); Ti.API.info('Portrait: ' + e.source.portrait); Ti.API.info('Landscape: ' + e.source.landscape); Ti.API.info('Detail Win- Height: ' + $.detailWindow.height + ', Width: ' + $.detailWindow.width); Ti.API.info('Detail NAV Win- Height: ' + $.detailNavWindow.height + ', Width: ' + $.detailNavWindow.width); Ti.API.info('SplitWindow NAV Win- Height: ' + $.splitWindow.height + ', Width: ' + $.splitWindow.width); if (e.source.portrait) { $.masterCollapseButton.visible = true; $.masterOpenButton.visible = true; } else { if ($.detailWindow.height >= $.detailWindow.width) { //act as Portrait $.masterCollapseButton.visible = true; $.masterOpenButton.visible = true; } else { //landscape $.masterCollapseButton.visible = false; $.masterOpenButton.visible = false; if (!$.splitWindow.masterViewVisible) { toggleMaster(); } //when rotating to landscape, if master is hidden toggle it to be visible } } });Any idea how I can get the height and width of the Window within a SplitWindow?
[~amwinsauto], Thanks for your query. Check this [link](https://stackoverflow.com/questions/46395850/titanium-how-to-determine-the-screen-width-when-using-splitview). Hope this helps.
I first started with the 'orientationchange' eventListener but that only works if you change orientation. What about if you open the app and go into Split Over but never rotate? So then I proceeded to use the 'postlayout' eventListener which works on any layout change - including rotating your device. So I removed the 'orientationchange' - since there was overlap there. But then I was left with still the biggest issue: There is no way to know/identify when the iPad is in SplitOver with another app. Thats when I decided to take the device height/width into account to solve the problem. This works perfect - should anyone need it.
var showMaster = true; Alloy.Globals.deviceSmallestMeasurement = (parseInt(Ti.Platform.displayCaps.platformWidth) < parseInt(Ti.Platform.displayCaps.platformHeight)) ? parseInt(Ti.Platform.displayCaps.platformWidth) : parseInt(Ti.Platform.displayCaps.platformHeight); function toggleMaster(){ $.splitWindow.masterViewVisible = !showMaster; showMaster = !showMaster; } $.splitWindow.addEventListener('postlayout',function(e) { if ($.splitWindow.toImage().width <= Alloy.Globals.deviceSmallestMeasurement) { //act as Portrait $.masterCollapseButton.visible = true; $.masterOpenButton.visible = true; } else { //landscape $.masterCollapseButton.visible = false; $.masterOpenButton.visible = false; if (!$.splitWindow.masterViewVisible) { toggleMaster(); } //when rotating to landscape, if master is hidden toggle it to be visible } });