Optimizing GUI for iOS 10

[nikola....@leadit.rs]

Hi guys,

Are there some stuff/flags/options that we can use or turn on to optimize our GUI for iPhone 10? One of the problems is that middle button on the iPhone 10, since they dont have the hardware one, so it overlaps over our GUI.

Next problem is one with the notch. We checked the device name, and based on that, we made a margin that moved the whole GUI a bit down, but it still overlaps with background from the status bar. Are there any other solutions for that also?

You'll see both things in the attached screenshot.

Thank you!

[Shai Almog]

Hi,

do you derive from the native theme?

The includeNativeBool constant in the theme should be true, if so you would have the StatusBar UIID on iOS which will push your UI down correctly on all iOS devices.

The bottom indicator is a bit problematic as I mentioned here: https://stackoverflow.com/questions/53871747/cn1-how-to-deal-with-the-home-indicator-iphone-x-and-such

I've seen solutions that include extra padding there but they look pretty bad. Assuming these are tabs I'd personally just force them to always shown at the top even for iOS.

[nikola....@leadit.rs]

Hello,

I think we derived the whole theme from Flat Red. Is there any way or need to change this? If not, is there a way to somehow import the current theme values into the new one, if we need to derive from native theme for this solution to work?

includeNativeBool is true in our constants, though.

Those buttons on the bottom are not for tabs, but they act like them, in a certain way. You can switch from one to the other on swipe. How can i force a component to be on top all the time (or is it something specific for tabs only)?

[Shai Almog]

Hi,

did you style StatusBar in some way?

If so try to remove that styling. Make sure that Title/TItleCommand have enough padding for the UI.

I'm not sure how you added these button. With Tabs there is an method call to place the tabs at the top but since I'm not familiar with your layout code I can't tell you how it would work for your specific layout.

[nikola....@leadit.rs]

Hi,

Those two buttons on the bottom are just regular buttons inside a container. Is there any way for them to be always forced on top? As for the status bar, it seems that during development, someone changed the color of it, so it was showing wrong color. I'll test that on the device, and report here what are the results. Thanks for pointing me in the right direction.

[Shai Almog]

Hi,

this depends on the layout. If the component above it is in border layout and this is the south. Maybe changing it to north will solve this but I'm guessing as I don't know the hierarchy of your layout.