Resizing NavBar using resizeControl

[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

[quailcreek]

I figured out a slick way yo handle this. Thanks anyway.

[Simon]

Now Tom,
This is a forum, you give you get.
What's your slick way?

Simon

[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

[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

[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

[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

[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

[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

[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

[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