Basically, you should fill whole Content Area, but position important bits inside Safe Area. You can stretch your title bar background from “contentOriginY” to “safeScreenOriginY+titleBarIconsHeight”, and render your title bar icons centred in safeScreenOriginY+titleBarIconsHeight*0.5.
This way you would always have nice looking title bar icons below iPhone X bezels or ordinary iPhone’s status bars, or just on top of the screen if status bar is off.
I think code with some pictures would be easiest explanation here. So, I made a snippet. It draws titlebar, and 5 round buttons in the beginning of it. Titlebar has grey background.
[lua]
display.setStatusBar( display.HiddenStatusBar )
– comment out next line to hide status bar
display.setStatusBar( display.DarkTransparentStatusBar )
local titleBarHeight = 30
– it is easier just to create/destroy elements when device is rotated in such simple case
– so we’ll jsut put all elements in group, and re-create it every time we need to resize
local group = display.newGroup()
local function reCreateElements ( )
– re-create group with titlebar elements
group:removeSelf( )
group = display.newGroup()
– creating grey titlebar background
– it starts from screen origin, and goes down from safe area beginning to titleBarHeight
local x0 = display.screenOriginX – left of the screen
local y0 = display.screenOriginY – top of the screen
local x1 = display.screenOriginX + display.actualContentWidth – right of the screen
local y1 = display.safeScreenOriginY + titleBarHeight – space for title bar after safe area
local titleBarBackground = display.newRect(group, (x0+x1)*0.5, (y0+y1)*0.5, x1-x0, y1-y0)
titleBarBackground:setFillColor( 0.9 )
local buttonsY = display.safeScreenOriginY + 0.5*titleBarHeight – buttons are centred in the middle of status bar
local buttonsX = display.safeScreenOriginX – button start from left of status bar
– create 5 buttons
for i = 0, 4 do
local r = 0.5*titleBarHeight – radius
local x = buttonsX + (i*2+1)*r – each button has width 2*radius, plus one radius offset for first button
local y = buttonsY
local button = display.newCircle(group, x,y, r)
button:setFillColor( math.random()*0.5+0.2,math.random()*0.5+0.2,math.random()*0.5+0.2 )
end
– -- this just to demonstrate area one has to use to draw actual title bar content
– local areaWhereActualTitleBarContentIs = display.newRect(group, display.safeScreenOriginX,display.safeScreenOriginY, display.safeActualContentWidth, titleBarHeight)
– areaWhereActualTitleBarContentIs.anchorX, areaWhereActualTitleBarContentIs.anchorY = 0, 0
– areaWhereActualTitleBarContentIs:setFillColor( 0,0,0,0.1 )
end
reCreateElements()
– when device is rotated, just re-create all elements
Runtime:addEventListener( “resize”, reCreateElements )
[/lua]
Here’s some screenshots:
iPhone 6 without status bar
iPhone 6 with status bar
iPhone X portrait:
iPhone X landscape:
As you can see, using safe area + content area can make your app adaptable to pretty much any screen configuration…
