Resizing iOS

[hrcap]

Morning All

I have designed my first two cards. When using simulator for an iPhone 6s Plus the Header Bar resizes to the width of the screen as desired. When I create the standalone application and open it on an iPhone 6s Plus the header bar does not resize. I have trawled the similar posts that I could find and tried various combinations but haven't been able to resolve.

the code for the resize is within the stack script on Preopen Stack as below

on preopenstack
//----------
//adjusts the size of the stack to fit the mobile screen
if the environment is "mobile" then
get the working screenrect
put item 3 of it into WW
put item 4 of it into HH
set the width of this stack to WW
set the height of this stack to HH
set the topleft of this stack to 0,0


set the textfont of stack "dashboard_persons" to "helvetica"
end if
end preopenstack



Many Thanks for taking the time to look

[sphere]

check this
http://lessons.livecode.com/m/4069/l/15 ... ll-devices
this
http://lessons.livecode.com/m/4069/l/28 ... esolutions
and this
http://lessons.livecode.com/m/4069/l/56 ... -densities

[hrcap]

Okay, after much fiddling and learning I have managed to get the header bar and fields on Card 1 to locate themselves to be centred, this only however happens when i navigate from Card 1 to Card 2 and then back to Card 1 again.

When i first open the app everything is still off to the left.

Is there anything that i can do to trigger the locating of the object when i first open the app?



on the card script of card 1 i have

on openCard

setlocs

//-----------------------
// ensures that the user is not put straight into a field
focus on nothing
end openCard



//COMMANDS
on setlocs //sets the locations of the screen items
put (the width of this stack / 2) into tX
put (the height of this stack / 2) into tY

// Header
set the width of graphic "header_bar" to (tX * 2)
set the loc of graphic "header_bar" to tX, 0
set the top of graphic "header_bar" to -29
set the height of graphic "header_bar" to 67

// Button button_Background_light
set the location of button "button_background_light" to tX, 190

// Button button_login
set the location of button "button_login" to (tX + 74), 208

// Button button_acount_create
set the location of button "button_account_create" to tX, 328

// Button button_forgotten_password
set the location of button "button_forgotten_password" to tX, 368

// Field Email_user
set the location of field "email_user" to tX, 107

// Field passwordEntryTool
set the location of field "passwordEntryTool" to tX, 149

// Graphic line_Between_Email_User_and_PasswordEntryTool
set the location of graphic "Line_Between_Email_User_and_PasswordEntryTool" to tX, 130

// Graphic Image_BEE_Logo.png
set the location of image "Image_BEE_Logo.png" to tX, 537


end setlocs
// --------------------------------------------------------------------------------------------------------
// ----------

[sphere]

I see what you try to do, and for positioning some buttons for different sizes it can be usefull indeed.
But for simplicity to start, if you set the width of the header bar to the full width of the card and then add this:

Code: Select all

on preOpenStack
if the environment is "mobile" then
  set the fullscreenmode of me to "exactFit"
end if
end preOpenStack

Now it will be automagically the correct width of your phone
You can use also another command than exactFit, check the lesson.

Note!: that some other people are much better then me with sizes and positons of items on a card

[bwmilby]

Check out this post:
viewtopic.php?p=171839#p171839

And this thread from the list:
https://www.mail-archive.com/use-liveco ... 97667.html

The discussed stack is here:
https://milby.us/lc/MobileDemo2.livecode

You can build and run that from your device to see how size and fullscreenmode effect the display of the stack. I use resize handlers in it so you can look at a working example that adjusts control positions based on the stack (device) size.

The stack lets you reset the native size of the stack on the fly (on the device) and then see how it is rendered with different modes. I do not include any X sizes, but it would not be hard to switch one of the existing sizes out.

If your UI requires a header bar at the top of the screen, then you really need to consider using the resizestack handler and place objects. With the tall aspect ratio of the new X models, that is the only way to get a good result. Geometry manager can be used, but also handling landscape orientation would require profiles which are not easy to get working properly.

[hrcap]

Many Thanks for your help, I simply had my 'set fullscreenmode to exactfit' too far down within the handler, i moved this to the top of the prestock open handler and it solved made the stack fit.

As a note for reference to others, i had the livecode file for this app saved within dropbox, when building the standalone iOS version from this file it also caused the fit to be out of alignment. As soon as i moved the livecode file to my desktop and built the iOS standalone it again fitted correctly.


Thank you very much