iPhoneX - full screen


#1

The ProJucer generated iOS project doesn’t go full screen on iPhone X and newer iPhones. There are black bars at the top and bottom.

How can I make a component that covers the whole screen?


#2

FYI: https://medium.com/rosberryapps/ios-safe-area-ca10e919526f


#3

Thanks but the ProJucer makes the safe area much smaller:


Any reason for this?


#4

Can you post your code for the main component, how you set its bounds and such?

We had the opposite problem with the iPhone X* devices, where our app stretched all the way side-to-side (landscape mode), so we had to reduce our viewable area so the notch didn’t cover up our app.


#5

This is with the unmodified code that comes out of the the ProJucer (tip on master branch). It setFullScreen(true), but apparently that doesn’t make the component full screen on newer iOS devices. Is there any reason for this?

{
            setUsingNativeTitleBar (true);
            setContentOwned (new MainComponent(), true);

           #if JUCE_IOS || JUCE_ANDROID
            setFullScreen (true);
           #else
            setResizable (true, true);
            centreWithSize (getWidth(), getHeight());
           #endif

            setVisible (true);
        }

#6

We set the window bounds explicitly with

setBounds(Desktop::getInstance().getDisplays().getMainDisplay().totalArea);

And we also set it as the kiosk mode component:

Desktop::getInstance().setKioskModeComponent(this, false);


#7

Carls, I tried those, but Kiosk, Fullscreen, and no matter what I do it looks like the image posted by jam-o above on iPhone XR.

I think it may have to do with the Launch Images set by the ProJucer?


#8

Yes you need to give Xcode the correct launch image for iPhone X.


#9

Ah, yeah, you need to have all your launch images set up correctly, too.


#10

Ok, thanks for the pointers.
Using Launch Images I can make JUCE components use the whole screen, but then every time the ProJucer re-generate the project, they become invalid.
So you set Launch Images manually every time?


#11
<plist>
<dict>

<key>UILaunchStoryboardName</key>
<string>Launch Screen</string>

</dict>
</plist>

make your launchScreen in xcode then add it as an xcode Resource in Projucer along with this custom plist


iOS: storyboard for the launch screen
#12

Thanks! This works great.
Now there is a full screen component.

The next question is now: how do we know that we should be careful with the corners? We could hardcode tests for known iPhones X models, but what about future models? Is there some kind of way to get the Safe Area?


#13

combine the info here:

and here: