Is there an elegant way to dynamical adjust the UI layout for different platforms, especially for mobile and desktop

Solar2D General Questions/Discussion
#1

Is there an elegant way to dynamically adjust the UI layout for different platforms, especially for mobile and desktop?

Or I have to write two total different composer scenes to support this requirement?

eg.

on mobile, the title is at the top and button at bottom; when rotate orientation, ui also adjust the layout

on desktop, the tile is at left and button at right corner

#2

You can do it in two ways:

  1. prepare table with positions for all you buttons and ui objects and have seperate table for mobile and desktop. This way you have the same objects but with one simple way you can adjust positions using reference from table.
  2. would be to prepare just views without any logic and have different view loaded based on the platform. MVC style.

Version with table is simpler I think. It would look something like that:

local ui\_pos = { mobile = { button\_1 = {x = 10, y = 20}, button\_2 = {x = 20, y = 50} }, desktop = { button\_1 = {x = 10, y = 120}, button\_2 = {x = 20, y = 150} }, } local platform = "mobile" -- user with if and system info to decide which platform to set. local button\_1 = display.newRect( ui\_pos[platform].button\_1.x, ui\_pos[platform].button\_1.y, 100, 100 )
#3

Thanks you very much for your idea and the sample code.

I think the table version is the exact way I prefer. :slight_smile:

#4

You can do it in two ways:

  1. prepare table with positions for all you buttons and ui objects and have seperate table for mobile and desktop. This way you have the same objects but with one simple way you can adjust positions using reference from table.
  2. would be to prepare just views without any logic and have different view loaded based on the platform. MVC style.

Version with table is simpler I think. It would look something like that:

local ui\_pos = { mobile = { button\_1 = {x = 10, y = 20}, button\_2 = {x = 20, y = 50} }, desktop = { button\_1 = {x = 10, y = 120}, button\_2 = {x = 20, y = 150} }, } local platform = "mobile" -- user with if and system info to decide which platform to set. local button\_1 = display.newRect( ui\_pos[platform].button\_1.x, ui\_pos[platform].button\_1.y, 100, 100 )
#5

Thanks you very much for your idea and the sample code.

I think the table version is the exact way I prefer. :slight_smile: