Sizing of GUI for different OS android, IOS, OSX etc


#1

Hi all,
I created a simple application with some Labels and Buttons using the MainContentCompnent class and the Label Tutorial.
It all works well on my Mac. I managed to get the application to run on my android phone and my Ipad and it looks OK to me in various simulators.
I managed to release it on the google play store. A few users have told me the product is “unavailable” on their device which I assume is due to the size or resolution of the gui. Apple rejected it with this message :
"To resolve this issue, please revise your app to ensure it runs as expected and displays properly at iPhone resolution on iPad. Even if your app was developed specifically for iPhone, users should still be able to use your app on iPad. "
I submitted a version with the same sizes as the android version to apple. The application doesn’t take up the entire screen on the IPAD. It doesn’t bother me but it seems to bother apple. Does anyone have any general tips how to set all of this up properly and simply in JUCE ?
Originally I used the “getwidth” method which was in the label tutorial but on the Mac when I resized the window the buttons would disappear slowly.
Perhaps my question would be better directed towards the XCODE or ANDROID studio forum but I thought it wouldn’t help to share it here … Thanks in advance for any suggestions!
Sean

```

MainContentComponent()
setSize (320, 480);

void resized() override
{

    // sizing of all buttons in application

    playButton.setBounds (10, 10, 150, 30);
    repeatButton.setBounds (160, 10, 150, 30);
    noteButton.setBounds (10, 40,  150, 30);

#2

Apple sent this “offending” image of the application running on the IPAD. I suspect it is the size that worries them …


#3

I think I managed to get it looking better by changing the code like this.
I added setFullScreen(true); to the main.cp
and then divided up the window with divisions of getheight() and getwidth()
to set out all the labels and buttons.
I was a bit worried about using divide with what looked like an integer variable but it seems to be working.
It looks much the same on all the different IOS device simulators in XCODE and on a macbook you can resize the window and everything changes size …

// In main.cpp

public:
MainWindow (String name)  : DocumentWindow (name,
Desktop::getInstance().getDefaultLookAndFeel()
.findColour (ResizableWindow::backgroundColourId),
DocumentWindow::allButtons)
{
setUsingNativeTitleBar (true);
setContentOwned (createMainContentComponent(), true);
setResizable (true, true);
setFullScreen(true);
setSize(getWidth(), getHeight());

centreWithSize (getWidth(), getHeight());
setVisible (true);
}





//in MainComponent.cpp
public:
MainContentComponent()
:   state (Stopped)

{
setSize(600,600);

void resized() override
{
playButton.setBounds (10, 10, getWidth()/2-10, getHeight()/10);
repeatButton.setBounds (getWidth()/2, 10, getWidth()/2-10, getHeight()/10);
noteButton.setBounds (10, getHeight()/10+10,  getWidth()/2-10, getHeight()/10);
eightNoteButton.setBounds (getWidth()/2, getHeight()/10+10,  getWidth()/2-10, getHeight()/10);
oneOctaveButton.setBounds (10, 2*(getHeight()/10)+10,  getWidth()/2-10, getHeight()/10);
resetButton.setBounds (getWidth()/2, 2*(getHeight()/10)+10,  getWidth()/2-10, getHeight()/10);
includeCButton.setBounds (10, 3*(getHeight()/10)+10,  getWidth()/2-10, getHeight()/20); ```

#4

From my experience so far with JUCE and cross-device (Responsiveness).

  • Check out FlexBox for future design. still not the best solution but it is better…

  • Make your main view itself a Component with your main view called by the app, his parent.
    Now you can scale your actual UI and if you have vectorized elements it’ll mostly scale nicely in terms of components. (see AffinityTransform::scale)

  • While scaling can make you use the real-estate properly you must think like RWD (responsive-web-design) in terms of:
  1. Viewport, viewport would allow you to have scrolling of UI when needed.
  2. Some common form factors for specific ranges - just as a modern website would fallback to another css rules when viewport size is smaller/greater. it might be better to design additional layouts behaviors for different sizes and ratios.

#5

As @ttg mentioned, the FlexBox and Grid classes would be well-suited for a responsive layout like the simple UI you are making.

When setting the window to fullscreen with setFullScreen(), you would not need to call setSize() afterwards.
Instead I suggest an approach like the following:

#if JUCE_ANDROID || JUCE_IOS
 setFullScreen (true);
#else
 setResizable (true, false);
 setResizeLimits (500, 400, 10000, 10000);
 centreWithSize (800, 600);
#endif

Also, if you still want to lay out your buttons in the traditional way, you may find it easier to use a Rectangle<int> bound and call the removeFrom function as you place each individual component on the screen.


#6

Jules describes it the rectangle cutting here in this very helpful talk from 2015: https://youtu.be/xsCZoE1s_uw?t=374


#7

Thanks so much people !!
I think what I have now might work.
I seem to be battling with the launchimages and icons again …
I wish there was an easy way just to add one large image and let the xcode sort out the rest … Sean


#8

Have you tried using the Icon fields in the Xcode (iOS) exporter settings?


#9

no I haven’t thanks so much I will check it out !