JAHelia
JAHelia

Reputation: 7922

changing layout for two orientations for a view from interface builder

is it possible to set the layout for a view for landscape and portrait orientations from interface builder (XCode 4.1)? I'm asking this question because when I set the layout for portrait, and then change view orientation to landscape and re-set the layout again according to landscape, it will keep with the last layout for landscape orientation !! that means, when I switch back to portrait orientation the layout does not change.

any solution to this problem from IB ?

EDIT:

I understood the idea now, so IB will give you limited flexibility for playing with my view in both orientations, it's limited because I can't produce a fully new layout for my view for each orientation from IB, for example, If I have six UIButtons (with their shadow image views) placed on a portrait orientation as in the following screenshot: enter image description here

and giving each button and the shadow image view all resizing masks as in this screenshot:

enter image description here

the result in landscape will be messed up as in this screenshot:

enter image description here

so I have two questions:

1) is it possible to set auto-resizing for these objects (from IB) so that the landscape view will match the portrait one ? if yes how ?

2) can I design (from IB) a completely different layout for landscape (without affecting the original layout in portrait) as in the following screenshot:

enter image description here

If i can't, I think the solution would be to make a new view from code, is that true ?

thank you for your help.

Upvotes: 1

Views: 6277

Answers (2)

pronvit
pronvit

Reputation: 4289

It's not a problem of IB of course. There's just no built-in mechanism for switching to completely different layout on orientation change.

If your objects (button/shadow) are of different sizes then you have to group them into views as @Niko said for autoresizing masks to work correctly.

Upvotes: 1

Niko
Niko

Reputation: 2543

To automatically change the layout of your view in interface builder, you have to set the autoresizing mask option of all graphical objects of your view. You can either do it programmatically like :

myObj.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin;

Or with Interface builder in the Size Inspector tab of each object. You should see something like this :

enter image description here

When the line is red, it means the margin (regarding the object container) will stay the same if device orientation change. In other case, the margin will change to adapt the object placement in the view container.

Unlikely, when a row is in NOT in red, it means the size of teh object will stay the same in all device orientations, else the size will be modified (useful for background image for example)

So, in the example above the object size will not change, and the left and top margin will not change either regarding its container.

Hope this is clear enough. Do not hesitate to react in case it's not clear

EDIT

You can check the result of your resizing mask without re-compiling the application simply by doing the trick below :

  • Select the uiviewcontroller main view (self.view)
  • Go to the Attributes Inspector
  • In section "Simulated Metrics" you should see an 'Orientation' Item
  • Switch off and on from 'Portrait' to 'Landscape' to see the resulted view

EDIT1

If I correctly understand what you means, I think you can do it this way :

enter image description here

Placing your button and your shadow image view in a view container. Then set the view container autoresizing as you are doing right know for your button and lock the button and image view size/margins regarding this view container.

That should work.

Upvotes: 1

Related Questions