Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Positioning elements with iPhone X
Started by davidgmonical Sep 24 2018 01:38 PM

- - - - -
8 replies to this topic
iphone x display position
[TOPIC CONTROLS]
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

davidgmonical

[GLOBAL: userInfoPane.html]
davidgmonical
  • Enthusiast

  • 77 posts
  • Corona SDK

Hi!

 

I've built out a fairly complex app with multiple views and a ton of display objects.

 

While the positioning works well for almost every device, I'm having trouble with the iPhone X because of the safe zones.

 

Really I think I would be fine if the screen just moved down past the safe zone (ie. the origin was at 0, 30 rather than 0, 0). Is there a way to do this or achieve this effect without going to every single display object I create and adding a conditional +30 to the .y property?

 

Thanks so much!

David



[TOPIC: post.html]
#2

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 25,241 posts
  • Enterprise

I would suggest you read over this and see if it helps you understand positioning better.

 

Rob



[TOPIC: post.html]
#3

davidgmonical

[GLOBAL: userInfoPane.html]
davidgmonical
  • Enthusiast

  • 77 posts
  • Corona SDK

Hi Rob. Read over what?



[TOPIC: post.html]
#4

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 25,241 posts
  • Enterprise

Oops:

 

https://coronalabs.com/blog/2018/08/08/understanding-content-scaling-in-corona/

 

Rob



[TOPIC: post.html]
#5

davidgmonical

[GLOBAL: userInfoPane.html]
davidgmonical
  • Enthusiast

  • 77 posts
  • Corona SDK

Hi Rob,

 

Maybe I'm missing something but it seems like the only way to achieve the effect I want is to position everything using safe screen boundaries (ie. display.safeScreenOriginY). I was just wondering whether there was an easier way, as I've already written a ton of positions throughout my code, but if not I'll go change all my positioning code to use this property.

 

Thanks



[TOPIC: post.html]
#6

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 25,241 posts
  • Enterprise

It depends on your app. Things that are edge positioned will need to use the safe zone offsets. Other objects may not need to factor that in. You may have something you're centering, You may need things that stay within your config.lua specified width and height. If you're building a business/utility app that flows down from the top, edge position the topmost objects and then use the .y value of the previous object + height of the next object to position it below. In that case you only have to worry about using safe zone offsets for that topmost object.

 

But its possible that you would need to add it everywhere depending on your app, Without seeing your app, it's hard to give more accurate advice.

 

Rob



[TOPIC: post.html]
#7

Alan PlantPot

[GLOBAL: userInfoPane.html]
Alan PlantPot
  • Contributor

  • 887 posts
  • Corona SDK

This won't be helpful for solving the problem quickly, but as a general rule I try to never position things with a hardcoded value. Instead use a variable and fraction of the screen space:

myThing.y = minY + (screenHeight * 0.25)

I also set variables for the top, bottom, left and right most edges of the screen and use those rather than 0 as the starting point for positioning, and I set variables for commonly used positions such as the centre of the screen. This also helps when dealing with the fact that on one device the left edge of the screen might be 0, but on a wider device the left edge might be -30 (depending on which content scaling method you use).  

 

For the issue you are having, the minY variable could then be adjusted to push all of the content away from the top edge of the screen (I still would have much preferred that they didn't put that stupid camera notch at the top of the screen though).


  • roaminggamer likes this

[TOPIC: post.html]
#8

roaminggamer

[GLOBAL: userInfoPane.html]
roaminggamer
  • Corona Geek

  • 7,481 posts
  • Corona SDK

I agree w/ @Alan, I too one-time calculate (at app start) meaningful (global) shorthand variables like left, right, top, bottom, fullw, fullh, ... then I use those in positioning code.  That way I can change/adjust all in one place for general cases and then only have to deal with a few corner cases.



[TOPIC: post.html]
#9

davidgmonical

[GLOBAL: userInfoPane.html]
davidgmonical
  • Enthusiast

  • 77 posts
  • Corona SDK

Yep that's a great idea. I set global screen WIDTH and HEIGHT variables but having TOP, BOTTOM, LEFT, and RIGHT would solve the issue. Thanks for all the help!




[topic_controls]
[/topic_controls]

Also tagged with one or more of these keywords: iphone x, display, position