iOS Question The B4X Drawer Menu and Apple's Notched Screen

[RichardN]

The B4X Drawer is a very attractive feature for deploying a menu. With iPhones which all now have tall & thin screen sizes in portrait you need to make the drawer not too wide otherwise there is the danger you will take up almost all of the screen width when the menu is in view. A bigger problem comes when you re-orientate to landscape. If the screen notch happens to be on the left side of the screen it blanks an area of your content and some menu options are partially obscured.

It would make sense to move the menu CLV contents further away from the notch when in landscape but as you can't tell which way is which it becomes empty space when the notch is on the right. I have tried a number of methods but it appears that there is no designer script or Page_Resize solution that will cater for all situations.

Is it possible to limit screen drawing area when in landscape so that you can use an uninterrupted rectangular screen width that stops short of the notch?

Otherwise, what is best practice for using a menu here? .....Or should I fall back on the unscientific route of omitting #iPhoneOrientations: LandscapeRight !

 

[Erel]

Or should I fall back on the unscientific route of omitting #iPhoneOrientations: LandscapeRight !

This is not such a bad idea. Many apps don't support landscape and for a good reason.

Can you upload a project which demonstrates the problem you are trying to solve.

 

[RichardN]

As a programmer you very quickly learn that in the development of applications - screen real-estate is precious. You would not arrange your living room with a vase of flowers stood in front of the TV so why on earth do you design a mobile phone with a portion of the hardware that blanks part of the screen?

Can you upload a project which demonstrates the problem you are trying to solve.

Sadly not even an iPhone 10 screen capture taken from a real device will illustrate the problem because the 'notch' is not shown..... as you will discover when you have that image rejected as 'unrepresentative of the device' in the iStore!

This is the issue:

The menu elements have already been moved ~5%x further to the right that I would like in an attempt to make them fully visible. Doing that starts to make them look out of place in other orientations. I believe the simple solution is best.

#iPhoneOrientations: Portrait, LandscapeLeft, LandscapeRight

 

[Erel]

You can find the safe area: https://www.b4x.com/android/forum/threads/iphone-x-safe-area.88095/#content

This will allow you to make the drawer wider.

 

[RichardN]

Thanks. I spent ages scouring the forum looking for something like that.

 

[RichardN]

I have been experimenting with the use of the safe area in the iPhone X (onwards) models and have had only limited success. The values returned function correctly but if you constrain the views to the safe area you produce further problems in presenting a pleasing interface.

The available screen real-estate within the safe area is extremely limiting in landscape and is exacerbated by having to remain clear of the 'Home' bar at centre-bottom of the screen. The visual attraction of the interface is also degraded in landscape by the rounded corners. In the image below the colours of the Navigation Bar, rear panel and the list view are different for clarity:

The programmer's views are constrained to within the panel that describes the safe area. Despite this, the Navigation Bar overhangs beyond this area to the screen edge which then presents rounded ends in a rather unpleasing view. The rear panel is currently grey. If you make this the same colour as the Navigation Bar you lose the impression created that the Navigation Bar shows 'this way up'. It is also very difficult to find a contrasting colour scheme for the content that does not look weird.

Before I give up completely and scrap all landscape use for iPhones..... Is there a way of limiting the width in the navigation bar so that it could be made the same width as the safe area to give a truly rectangular interface?

 

[Erel]

Why aren't you setting the Page.RootPanel color to be the same as the interface color?

Is there a way of limiting the width in the navigation bar so that it could be made the same width as the safe area to give a truly rectangular interface?

No.

 

[RichardN]

Why aren't you setting the Page.RootPanel color to be the same as the interface color?

As I already said in the post above. I have tried a number of combinations of colour for the various visible elements and they all look strange or out of place.