Forum Archive

Hey guys,

So I'm now converting my projects to the 1.6 beta, which works great for my needs (thanks again @omz for the SceneView fix).

My plan is, at some point, to build my app for the App Store, so I need my UI to take into account the various screen sizes from an iPhone 4 up to an iPhone 6 plus (not even talking about the iPad). I don't want to center a smallest UI on the screen, I need it to switch fullscreen for all the devices.

As a matter of design, using the UI system, what would be the smartest way to perform this ?

I'm currently considering manually resizing and repositionning all my UI items at the application start, but perhaps there's a better way to do it ?

Any advice welcomed !

Do ui.get_screen_size() at the top of your program to know the screen resolution. Resize and reposition your ui elements in the layout() method of your custom view. That method will get called just after .present() and anytime a resize occurs (e.g. screen rotation, etc.).

• do you want the same basic layout on all screens, just scaled to size, and possibly shifted around due to aspect ratio?
• or, does each device need a completely different ui?

if you feel your ui needs crafting for each screen size, just use the ui editor to create multiple copies of the pyui... then load based on screen size.

if you feel autoflex can work, then design for one size, say, your smallest device, and set the flex settings on different aspects of the ui. you might find some groups or elements need to be groups together in a container which does not flex, but the relative positioning of items flexes. other itrms would scale height/widths. once you have a design, try displaying it in your largest device, and see what went wrong.

Hmm thanks guys, I'll give this a try. Flex might be the solution in my case, but I need to deep a bit more about it.

if you have multiple devices, you can test the flex behavior on your largest, by presenting as a sheet of specified size. it would also be possibly to try different sizes by presenting inside a scrollview, with the content size attribute set to the device size, then manually resizing the view's frame to match the target screen size.

I would really love to get @omz's perspective on this. I have not seen anything written on what he "designed" Pythonista to do in order to support a flexible UI. The use of PUI files suggests that he intends you to create a pui for each display size and orientation as @JonB suggests, but the ability to do everything in code like what @ccc describes suggests otherwise. There is no example project included to show the "best" method.

One option that neither @ccc or @JonB mention is to do your UI in a webview and leverage webbrowser methodology for this. This may actually be the "best" way but it is not a pleasant experience doing the development using Pythonista. The problem is that Pythonista is not "designed" to be a web UI (Javascript, CSS, HTML5) developement tool. It "supports" it but it was not designed for that purpose. Sorry to put words in @omz's mouth on that.

Maybe the real answer to this question is - "it depends" ... I really hate that answer.

I would generally recommend to try the flex attribute first. You can get quite far with that, and for handling rotation and minor screen size differences (different iPhone models...), it's often enough. You may need a nested view hierarchy to get some layouts to work. The 1.6 UI editor has much better support for this.

If you need special adjustments for different screen sizes that go beyond the "springs & struts" model, I would recommend implementing a ui.View subclass that overrides the layout method – you could use this custom layout container as the root view of your pyui file. Typically, your layout method just sets the frames of the subviews, but it can do more, e.g. show/hide different views, depending on the screen size/orientation.

Using different pyui files for different screen sizes is also possible of course, but it's more error-prone and requires some maintenance work, so I would really recommend that you try the other options first.

does anyone have a good reference on the interaction between bounds, frame, and transform.scale()? i thought i'd whip up a real quick "simulator" to show how a view would look on another device... i thought i would simply be able to adjust the bounds, then adjust the transform.scale, but the behavior is not exactly as i expect.

Well, I ended up using a lot of Flex, and making a custom view just to set the main UI frame & bound according to the device screen size (ui.get_screen_size()) as you suggested.

This works great, and even updating the UI pixel size in the UI editor reflects in realtime the full flex updates.

Perhaps an option to set the global UI size into something proportional to the device screen size (instead of defining an actual pixel size) would feel more natural, but honestly I'm fine with this solution so far.

Thanks for your help !

if you just want to set the main ui bounds, use fullscreen to present, you dont need to ever get screen size. fullscreen will resize your view, and it eill also get resized on device rotation.

the reason you might want to use a custom view is if there are aspects of the ui that you want to dissappear, and have buttons or navigation views to show, etc. though you can also just use the self.width/self.height inside layout to make those decisions.

@JonB, no I don't have a reference to bounds, frame etc. but I have been reading the docs and experimenting like you. There are inconsistencies . But I think the main inconsistencies are in the jargon. Does your head in :)especially when you start hiding the title_bar
No disrespect to @omz, whilst the ui package is fantastic, you can see it was a little rushed or not as well thought out as other parts of Pythonista. I want to be clear, I still think it's amazing, but there are short comings. Just being honest. But there only so many hours in a day, and I appreciate that