How To Put Images Properly In Different Orientation?

Solar2D General Questions/Discussion
#1

i have been playing with this for awhile and apparently i dont see any solution at all. I have tried “OnScreenOrientation” thingey, as written here:

http://www.burtonsmediagroup.com/blog/2010/07/developing-iphoneipadandroid-applications-with-corona-orientation-change/

but no difference still. I also have tried playing with config like here:

http://developer.coronalabs.com/forum/2010/09/27/screen-orientation-content-scaling-not-working-android

no difference as well.

Basically i want the position of the text, buttons, and images to be well positioned if the user rotate his phone (like changing from portrait to landscape) but how can I do that? How can I put FIXED x and y for JUST portrait and use another x and y position for JUST landscape orientation?

For example, at the moment i have a facebook button located like this:

local facebookBtn facebookBtn = display.newImage ("facebook-big.png") facebookBtn.x = display.contentWidth / 2 + 90 facebookBtn.y = display.contentHeight / 5 - 20 localGroup:insert(facebookBtn)

in corona simulator this facebook button is located at the top right (portrait)

but if i rotate it to landscape then the facebook button is all of sudden located in the middle of the screen. I want it to be located STILL at the top right in landscape mode, how can I do that? [import]uid: 114765 topic_id: 28759 reply_id: 328759[/import]

#2

You’ll have to listen for an orientation change event and reposition all of the elements you need in a function triggered by the switch. [import]uid: 33275 topic_id: 28759 reply_id: 115910[/import]

#3

yes i know about such “needs” but i dont know how to translate that stuff into the codes because i couldnt find any example code about orientation listener :slight_smile: [import]uid: 114765 topic_id: 28759 reply_id: 115913[/import]

#4

In the documentation for Corona, under the “Guides” link is the guild for event handling.

See: http://developer.coronalabs.com/content/application-programming-guide-event-handling

The first example covers dealing with detecting and handling orientation changes.
[import]uid: 19626 topic_id: 28759 reply_id: 115917[/import]

#5

hello there,

the example code here is exactly the same with the link i posted in my first post

[code]local label = display.newText( “portrait”, 0, 0, nil, 30 )
label:setTextColor( 255,255,255 )
label.x = display.stageWidth/2; label.y = display.stageHeight/2

local function onOrientationChange( event )
label.text = event.type – change text to reflect current orientation
– rotate text so it remains upright
local newAngle = label.rotation - event.delta
transition.to( label, { time=150, rotation=newAngle } )
end

Runtime:addEventListener( “orientation”, onOrientationChange )[/code]

problem is, this script doesnt solve my issue. Yes it’s working but the facebook button I mentioned before is still located in the middle of the screen if I change that from portrait to landscape. What’s the best solution of this?

what im thinking if is there’s any way that we could set up image.x and image.y numbers in different orientation, something like

[code]local facebookBtn
facebookBtn = display.newImage (“facebook-big.png”)
– * IF PORTRAIT
facebookBtn.x = display.contentWidth / 2 + 90
facebookBtn.y = display.contentHeight / 5 - 20
localGroup:insert(facebookBtn)

– * IF LANDSCAPE
facebookBtn.x = display.contentWidth / 2 + 1100
facebookBtn.y = display.contentHeight / 4 - 10
localGroup:insert(facebookBtn)
[/code]

you get what i mean? Because if i just duplicate the code from above examples, this part:

local function onOrientationChange( event ) label.text = event.type -- change text to reflect current orientation -- rotate text so it remains upright local newAngle = label.rotation - event.delta transition.to( label, { time=150, rotation=newAngle } ) end

then i dont see any significant change for the button placement. I honestly dont know what can “event.delta” and “transition.to” do to help the button placement in different orientations. Mind to teach me why do we use these codes in onOrientationChange and how to set it up properly?

And how do I place my facebook button STILL at the top right even when i rotate it from portrait to landscape? [import]uid: 114765 topic_id: 28759 reply_id: 116001[/import]

#6

As with anything in programming there’s a number of different ways you go about this.

You could perform a check in the orientation function and adjust positions accordingly.

local function onOrientationChange( event )  
if event.type == "landscapeLeft" then  
 faceBookBtn.x = 100  
elseif event.type == "Portrait" then  
 faceBookBtn.x = 200  
end  
  
end

Obviously this isn’t going to be very practical if you have lots of UI elements. Perhaps a better idea would be to have custom properties on the button, something like:

facebookBtn.xPor = 100  
facebookBtn.xLan = 200

And then switch between these in the orientation function.

I’m sure there’s plenty of other, more effecient ways that somebody will be able to chime in with.

P.S You’d also need to rotate the images with event.delta. [import]uid: 33275 topic_id: 28759 reply_id: 116020[/import]

#7

hello mate, thanks for the code! It works!

I never knew i could do that directly inside onOrientationChange event listener. Thanks! [import]uid: 114765 topic_id: 28759 reply_id: 116035[/import]

#8

Cool cool, no worries. Remember the orientation function is just listening for the orientation change event - you can do whatever you want in that function, just remember it’s invoked whenever you switch the devices. [import]uid: 33275 topic_id: 28759 reply_id: 116055[/import]