Please note, this blog entry is from a previous course. You might want to check out the current one.
The game must work properly (and look good) in both Landscape and Portrait orientations on both the iPhone 4 and the iPhone 5. Use Autolayout as much as possible to make this work. Positioning the cards themselves will require some additional work (although you are probably already doing this work for some of the Required Tasks above). None of your code should be specific to any given screen width or height or orientation (i.e. no “if landscape then” or “if width/height … then” code). The bottom line of this task is that your MVCs’ Views should look good in any reasonably-sized bounds rectangle.
Go to storyboard make sure, all views in all controllers are where they should be (aligned with blue lines etc…), and add constraints using “reset to suggested constraints”:
Check all constraints for “weired” values which you might want to reset to default ones, and reposition views when constraints get changed and produce warnings.
When you run the app and notice that the buttons at the bottom of the screen tend to disappear under the tab bar, make sure that the edges do not extend under the bottom bar:
After a rotation resize the grid and update the user interface:
- (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation
{
self.grid.size = self.gridView.bounds.size;
[self updateUI];
}
… while the auto layout works, buttons and cards which end up at the right hand side in landscape mode do not seem to be touchable any more, thus the auto-resizing mask needs to be adjusted for all controllers:
- (void)viewDidLoad
{
[super viewDidLoad];
[self.view setAutoresizingMask:UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight];
}
The complete code is available on github.
For what it’s worth, I noticed Paul mentioned didRotateFromInterfaceOrientation is rarely needed, so I used viewDidLayoutSubviews instead. At the moment, I’m not clear on the differences, but I didn’t need to use setAutoresizingMask:UIViewAutoresizingFlexibleWidth for things to work properly in the simulator.
… we discussed that issue at length at piazza … and came to no conclusion why it’s necessary sometimes it is not … maybe a bug which has been fixed by now?
Is there still an accessible forum on Piazza about this course? I can’t find it, but then again I have never used it.
So I don’t know if I’m looking at the right place
There never was a piazza group for the last course, we use the previous one. Have a look for “Coding Together iOS 6”.
Hi there, my gridView (the superview that holds the cards) does not seem to adjust when I change from iPhone 4 to use iPhone 5. There is an unused area at the bottom. Does it fill up all the way for you? The gridView handles the landscape very well though. But it does not seem to change its size when moving from iPhone 4 to 5. Thanks.
Nevermind, i think gridView is expanding all the way but grid is choosing to leave the space at the end unfilled. It fills up if I increase the aspect ratio.
To see if it actually expands, change its background color! If I remember correctly, it worked back in April 😉
My auto layout doesn’t work in Xcode 6.
I set a tailing space to superview and top space to superview constraints to a label.
It works in portrait but doesn’t in landscape…
However, in simulated metrics, they are both working.
What exactly does not work?
A UILabel, I set a “tailing space to superview” constraint and “top space to superview” constraint.
These two constrains define the distances of this Label to its superview up frame and right frame.
I define them in portrait, and it looks good in storyboard in landscape mode in simulated metrics.
But in IOS simulator, this Label squeezes to the upper-left corner.
Ok, I know what was going wrong. I did the layout on the compact mode. Everything seems ok if I redo it in any mode.