Page 1 of 1
Resizing NavBar using resizeControl
Posted: Tue Jun 24, 2014 10:25 pm
by quailcreek
Hello,
I need to build a custom navBar for an iPhone app that will resize and move the items in the group automatically when the card orientation changes. Everything works fine except for the placement of the right hand button. The right button is located properly for portrait initially and moves correctly for landscape left and landscape right. The problem is when the orientation is changed from landscape to portrait. The right button and the end of the group are off the screen to the right. I'm running on the sim. Any help would be appreciated.
Tom
Code: Select all
## Group Script
on resizeControl
## I'm checking to see if the resizeColtrol is sent to the grp
answer "Resized"
## setting the position of the grp
set the topleft of me to 0,20
## Sizing the graphic to the size of the grp
set the rect of graphic "NavBar" of me to the rect of me
## Locating the left and right btns
set the left of btn "Left" to the left of me + 12
set the right of btn "Right" of me to the right of me - 12
## setting the position of the fld to the center of the grp
set the loc of fld "navBar" of me to the loc of me
end resizeControl
Code: Select all
## Card Script
on orientationChanged
put mobileDeviceOrientation() into theOrientation
if theOrientation contains "portrait" then
answer theOrientation
set the width of group "NavBar" to the height of this cd
## Reposition other elements on the card
else
if theOrientation contains "landscape left" then
answer theOrientation
set the width of group "NavBar" to the height of this cd
## Reposition other elements on the card
else
if theOrientation contains "landscape right" then
answer theOrientation
set the width of group "NavBar" to the height of this cd
## Reposition other elements on the card
end if
end if
end if
end orientationChanged
Code: Select all
## Stack Script
on openStack
if the environment is "mobile" then
## Portrait , Portrait Upside Down , Landscape Left, Landscape Right
put "portrait,landscape left,landscape right" into theallowed
iphoneSetAllowedOrientations theallowed
set the bottomleft of group "ToolBar" of cd "Home" to 0, the height of this stack
end if
end openStack
Re: Resizing NavBar using resizeControl
Posted: Wed Jun 25, 2014 3:29 am
by quailcreek
I figured out a slick way yo handle this. Thanks anyway.
Re: Resizing NavBar using resizeControl
Posted: Wed Jun 25, 2014 7:39 am
by Simon
Now Tom,
This is a forum, you give you get.
What's your slick way?
Simon
Re: Resizing NavBar using resizeControl
Posted: Wed Jun 25, 2014 4:11 pm
by quailcreek
Hi Simon,
Here's the code I came up with. It work pretty well, I think. Please let me know what you think. I'm testing in the sim.
Here's the code for the NavBar and TollBar:
Code: Select all
## NavBar group
on resizeControl
if the environment is "mobile" then
## I'm checking to see if the resizeColtrol is sent to the grp
answer "Resized"
## setting the position of the grp
set the topleft of me to 0,20
## Sizing the graphic to the size of the grp
set the rect of graphic "NavBar" of me to the rect of me
## Locating the left and right btns
set the left of btn "Left" to the left of me + 12
set the right of btn "Right" of me to the height of this cd - 12
## setting the position of the fld to the center of the grp
set the loc of fld "navBar" of me to the loc of me
end if
end resizeControl
Code: Select all
## ToolBar group
on resizeControl
if the environment is "mobile" then
## I'm checking to see if the resizeColtrol is sent to the grp
-- answer "Resized"
## setting the position of the grp
set the bottomleft of me to 0, the width of this cd
## Sizing the graphic to the size of the grp
set the rect of graphic "ToolBar" of me to the rect of me
## Locating the left and right btns
set the left of btn "Settings" to the left of me + 12
set the right of btn "My Gear" of me to the height of this cd - 57
set the right of btn "My Profile" of me to the height of this cd - 12
end if
end resizeControl
Code: Select all
#Card
on orientationChanged
put mobileDeviceOrientation() into theOrientation
if theOrientation contains "portrait" then
-- lock screen
set the width of group "NavBar" to the height of this cd
set the width of group "ToolBar" to the height of this cd
else
if theOrientation contains "landscape left" then
-- lock screen
set the width of group "NavBar" to the height of this cd
set the width of group "ToolBar" to the height of this cd
else
if theOrientation contains "landscape right" then
-- lock screen
set the width of group "NavBar" to the height of this cd
set the width of group "ToolBar" to the height of this cd
end if
end if
-- unlock screen
end if
end orientationChanged
Re: Resizing NavBar using resizeControl
Posted: Wed Jun 25, 2014 6:20 pm
by Simon
Thanks Tom,
I'm not sure why you are repeating the code in orientationChanged really just needs the two line as it's the same for all. Setting the width to the height is weird as well but if it's working for you.
Have you used "fullScreenMode" will that not do what you want?
Simon
Re: Resizing NavBar using resizeControl
Posted: Wed Jun 25, 2014 8:43 pm
by quailcreek
Hi Simon,
This is a test stack. There are more lines of code in the orientationChanged script than I show here. That's why it's repeated. Ya, I agree the width and height is weird. Actually you bring up a point that confuses the heck out me. Is the width and height supposed to be related to the users view of the phone? If so then orientationChanged must be sent to the card before the orientation is changed. That's why setting the width and height is weird. I can attach my test stack if you're interested.
How would you handle this with "set the fullscreenmode of this stack to" ?
Tom
Re: Resizing NavBar using resizeControl
Posted: Wed Jun 25, 2014 9:18 pm
by Simon
Hi Tom,
Here it is:
http://lessons.runrev.com/m/4069/l/1564 ... ll-devices
And yes, the width and height is related to the users point of view but there are cases
My Kindle Fire is 180 degrees turned around
Simon
Re: Resizing NavBar using resizeControl
Posted: Wed Jun 25, 2014 9:38 pm
by quailcreek
Hi Simon,
Ya I'm aware of that. Doesn't seem to work well on the iPhone though. I thought you had come up with something different.
Tom
Re: Resizing NavBar using resizeControl
Posted: Thu Jun 26, 2014 2:45 am
by Simon
Hi Tom,
If you really want to go this route:
http://forums.livecode.com/viewtopic.php?f=8&t=14859
But it really shouldn't be necessary, fullscreenmode should work.
Note in the above orientationChanged isn't use as a resizeStack is sent when the device rotates. The script runs on mobile and desktop.
Simon
Re: Resizing NavBar using resizeControl
Posted: Thu Jun 26, 2014 3:09 am
by quailcreek
Hi Simon,
There must be something about fullscreenmode that I'm missing. I took my test stack and commented out all of the code in the groups and the card. I added the set the fullscreenmode of this stack to "xx" (I tried each option) to the stack. When I rotated on the sim things were squeezed too small to be useful.
Tom
Re: Resizing NavBar using resizeControl
Posted: Thu Jun 26, 2014 4:30 am
by Simon
hmmm... I'm thinking then that you should start off in the mode where things are too small and make them a good size then in the rotation they will be large but that is better on mobile.
Are you working in the IDE with dimensions similar to iPhone? I use the 3:2 ratio either 320 x 480 or 640 x 960 seems ok for the ridiculous 71:40 ratio of iPhone 5 (fullScreenMode of letterbox), also looks good on my Android devices.
Simon