Can you set different layouts for Portrait and Landscape?

Unity Engine
1

I have an app that has quite a bit of info, and some won’t fit on portrait orientation, so I would like to have a different visual layout of the objects when the user has the phone in landscape orientation. I also don’t want to have to duplicate the canvas and objects if I don’t have to.

Does anybody have any experience with different layouts per orientation? Thanks!

2

I have always just setup one solid canvas to work in one mode or the other, then copied it, and reconfigured it a bit to look better in portrait/landscape. Then just disable/enable the gameobject for the unused canvas.

Not a perfect solution maybe but it works well enough.

3

Yeah. I just have literally 60+ game objects, so creating a duplicate would mean I’d have to double up all of my logic as well, and that’s a HUGE undertaking. I just want to be able to shift things around based on screen orientation, and enable/disable some based on that logic as well.

I know I have to look at Screen.Orientation, but I just don’t know what the best practice would be to change the layout.

4

Well, if your truly set on only one canvas (which if things are that complex maybe you should), that means your gonna be doing a lot of adjustments on the code side of things when you switch orientation. You can check when it’s been changed and manually adjust locations, anchors, sizes, and stuff like that, but in some cases it’s easier to make two and adjust in the editor rather than putting that overhead into the game.

I’d figure if you don’t make two canvas objects you’ll actually end up with more overall code as a result, and definitely consider that some images and buttons and such may not appropriately be sized for both if you haven’t got your canvas set to match both width and height!

5

My latest thought (unless someone has a better idea) is this:

  1. In the editor, switching the orientation to Landscape (Portrait layout is already done).
  2. Making note of the original position (for portrait).
  3. Moving the element(s) visually, noting the transforms
  4. In the backend, setting an if (Screen.orientation == ScreenOrientation.LandscapeLeft || Screen.orientation == ScreenOrientation.LandscapeRight) and then setting those values there. Conversely, setting one with initial positions so if they switch back the positions will return.
6

That should do it, but keep in mind you are putting a ever so slightly higher performance load on the client, rather than the editor, with the trade off being to save some memory on the additional canvas. I’d test performance and make sure everything goes smoothly when that transition happens, and if it doesn’t seem to make any impact on your target devices, then its “good enough”. :stuck_out_tongue:

7

The good news is the computational aspect is really nominal. It’s literally just the passing of a small 1800-value byte array and a couple of dozen floats and strings. It’s entirely GUI. So any performance hit is entirely superfluous on that point.