Iphone X margins?


#1

Is there a “JUCE” way of computing the margins Apple describes on the iPhone X here:
https://developer.apple.com/design/human-interface-guidelines/ios/overview/iphone-x/

Are there any JUCE macros that determine which type of iOS device is being used? Or is that question something better answered by Apple’s documentation and is beyond the scope of JUCE?

regarding the margins, I did this manually, based on the images showing the “safe area” in this link: https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/
specifically: https://developer.apple.com/design/human-interface-guidelines/ios/images/LayoutGuides_Landscape.svg

It’s definitely just guessing, and gets me in the ballpark, but I wish there were a more official “JUCE” way of doing it. Any ideas?


#2

I am also interested in this topic. Currently my top-level component does not stretch the full height of the screen at the top in portrait mode on the iPhone X only… I can’t seem to find in the JUCE code where the safeareainsets are calculated and applied, or any other code that leaves a wide margin at the top of the screen on iPhone X. Any ideas how I can fix this?


#3

you just have to hard-code it:

#if JUCE_IOS
    DBG( "device description: " << SystemStats::getDeviceDescription() );
    auto platform = getPlatform();
    if( platform == "iPhone10,3" || platform == "iPhone10,6")
    {
        //it's an iPhone X
        setContentOwned(mcc = new iPhoneXContentComponent(), true);
        setUsingNativeTitleBar(true);
    }
    else
    {
        setContentOwned(mcc = new MainContentComponent(), true);
        setUsingNativeTitleBar(true);
    }
#else
    setContentOwned(mcc = new MainContentComponent(), true);
    setUsingNativeTitleBar(true);
#endif

and

struct iPhoneXContentComponent : public Component
{
    ScopedPointer<ChordieApp::MainContentComponent> mcc;
    iPhoneXContentComponent();
    void paint(Graphics& g) override;
    void resized() override;
};

iPhoneXContentComponent::iPhoneXContentComponent()
{
    addAndMakeVisible( mcc = new ChordieApp::MainContentComponent() );
    auto area = Desktop::getInstance().getDisplays().getMainDisplay().totalArea;
    setSize(area.getWidth(), area.getHeight());
    DBG( SystemStats::getDeviceDescription() );
}

void iPhoneXContentComponent::paint(Graphics& g)
{
    g.fillAll(Colours::white);
}

void iPhoneXContentComponent::resized()
{
    //I figured out these values visually by hand via the Simulator for Landscape mode
    mcc->setBounds(40, 0, getWidth() - 80, getHeight() - 20);
}

see Get iOS Device for the getPlatform() code


#4

This is solving a different problem than mine (in a convoluted manner).

On iPhone X, I want to EXTEND (not reduce) the size of the visible area up into the safeAreaInsets region at the top of the screen (in portrait view).


#5

for my app, if I didn’t do that, setting my app’s window size to full screen:

    auto area = Desktop::getInstance().getDisplays().getMainDisplay().totalArea;
    DBG( "ios area: " << area.toString() );
    setSize(area.getWidth(), area.getHeight());

caused anything I had drawn in the corners to be cut off by the rounded bezel.

struct Comp : public Component
{
    void paint(Graphics& g) override
    {
        g.fillAll(Colours::green);
    }
};

void MainContentComponent::resized()
{
    comp.setBounds(0,0,30,30);
}

Did you remember to take a screen shot from within simulator, and assign it in Images.xcassets? That’s how iOS knows what size screen res to use for your app.


#6

Ah ha! Thank you, setting the launch image or a launch storyboard fixed my issue!

I added a storyboard rather that a launch image for the iPhone X because I can prevent it from being wiped out by the Projucer by adding a Launch Screen.storyboard resource file to the project, and setting a custom Plist entry:

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

#7

@adamski weren’t you asking about how to use Storyboards with JUCE?


#8

Yes but I think launch Storyboards are different to main UI storyboards… I could be wrong though.


#9

There is specific configuration for the launch storyboard, yes.