Orientation Configuration

1. Orientation Configuration adapting to orientation changes

2. Orientation • There are 7 possible orientations recognized by iOS: • UIDeviceOrientationUnknown, • UIDeviceOrientationPortrait, • UIDeviceOrientationPortraitUpsideDown, • UIDeviceOrientationLandscapeLeft, • UIDeviceOrientationLandscapeRight, • UIDeviceOrientationFaceUp, • UIDeviceOrientationFaceDown

3. Using Orientations • You can restrict which orientations your app will recognize • Restrictions can be for the entire app • or they can be for particular views • Apple has different “recommendations” for different devices • for iPad it is recommended that you always allow all orientations • for iPhone/iPad touch allow landscape modes only if it works for your app • for iWatch/wearables: we’ll see

4. Specifying Orientations • at the app level

5. Specifying Orientations • really, we’re changing the plist • see Supporting Files->appName-Info.plist

6. Specifying Orientations • per viewController specification: put this method in the viewController.m file. • Must specify allowed orientations -(NSUInteger)supportedInterfaceOrientations { return UIInterfaceOrientationLandscapeLeft | UIInterfaceOrientationLandscapeRight; }

7. Specifying Orientations • Orientation choices: UIInterfaceOrientationLandscapeLeftUIInterfaceOrientationLandscapeRight UIInterfaceOrientationMaskPortrait UIInterfaceOrientationMaskPortraitUpsideDown • Or combination choices: UIInterfaceOrientationMaskAllButUpsideDownUIInterfaceOrientationMaskAll UIInterfaceOrientationMaskLandscape

8. Specifying Orientations • Interface Orientation vsDevice Orientation • Device depends on how the user is holding • Cannot choose to accept it (the user changes it by how she holds the device) • Interface you can choose to observer or not

9. Constraints • can specify constraints if turn on autolayout • Select the storyboard in the Project Navigator • Click on the File Inspector then click on the Use Auto Layout checkbox • It should be on by default • This enables you to “pin” components via the Editor->Pin menu • Auto Layout tutorial: XCode 5 Auto Layout tricks

10. Constraints • Create an interface that looks like this. Use blue dashed guidelines to line the buttons up.

11. Constraints • Run. Change to landscape. Get this.

12. Constraints • Fix 1: use Editor->Pin to pin elements to top/side/bottom. • Or ctrl drag from component to the side you want to be constrained to. • Do this for every element. • See this in the document outline:

13. Constraints • Fix 1: use Editor->Pin to pin elements to top/side/bottom. Or ctrl drag from component to the side you want to be constrained to. Do this for every element.

14. Constraints • Now add a button as at right. • add left and top constraints • run This constraint is the problem!

15. Constraints • Delete the constraint to top. • ctrl-drag to left side • choose Center Vertically in Container • Fixed!

16. Aligning • At the bottom of the view is a bar of layout controls. • Similar to the Edit menu item Resizing Behavior Align Pin Resolve Auto Layout Issues Apply Retina 3.5-inch Form Factor

17. Aligning • Add 3 text boxes and place as below • make sure the boxes are offest • and they are different widths

18. Aligning • select all three textfields • click on the Align button • check “Bottom Edges” • click on “Add 2 Constraints” button

19. Aligning • select all three textfields • click on the Pin button • check “Equal Widths” • click on “Add 2 Constraints” button

20. Aligning • select leftmost textfield • make sure it is the recommended distance from left border (blue dotted line) • ctrl-drag to left border and choose “Leading Space to Container” • ctrl-drag to top border and choose “Leading Space to Top Layout Guide”

21. Aligning • select all rightmost textfield • make sure it is the recommended distance from right border (blue dotted line) • ctrl-drag to right border and choose “Trailing Space to Container”

22. Aligning • Choose the “Resolve Auto Layout Issues” button. • Click on “Update All Frames in View Controller” • Result is not quite correct!

23. Aligning • Move 2nd text box to center (use the dotted center alignment line) • Ctrl-drag from Text 1 box to Text 2 box and choose “Horizontal Spacing” • Ctrl-drag from Text 2 box to Text 3 box and choose “Horizontal Spacing” • Update all Frames in View Controller again

24. Aligning • Run. • Change orientations.

25. Other Methods • In code. (void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation) interfaceOrientationduration:(NSTimeInterval)duration { if (interfaceOrientation == UIInterfaceOrientationPortrait || interfaceOrientation == UIInterfaceOrientationPortraitUpsideDown) { button1.frame = CGRectMake(20, 20, 125, 125); button2.frame = CGRectMake(175, 20, 125, 125); button3.frame = CGRectMake(20, 168, 125, 125); button4.frame = CGRectMake(175, 168, 125, 125); button5.frame = CGRectMake(20, 315, 125, 125); button6.frame = CGRectMake(175, 315, 125, 125); } else { button1.frame = CGRectMake(20, 20, 125, 125); button2.frame = CGRectMake(20, 155, 125, 125); button3.frame = CGRectMake(177, 20, 125, 125); button4.frame = CGRectMake(177, 155, 125, 125); button5.frame = CGRectMake(328, 20, 125, 125); button6.frame = CGRectMake(328, 155, 125, 125); } } we change the button position and size based on the orientation button1, button2, etc are IBOutlets to the buttons

26. Other Methods we change the view and size based on the orientation • Swap views - (void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation) interfaceOrientation duration:(NSTimeInterval)duration { if (interfaceOrientation == UIInterfaceOrientationPortrait) { self.view = self.portrait; self.view.transform = CGAffineTransformIdentity; self.view.transform = CGAffineTransformMakeRotation(degreesToRadians(0)); self.view.bounds = CGRectMake(0.0, 0.0, 320.0, 460.0); } else if (interfaceOrientation == UIInterfaceOrientationLandscapeLeft) { self.view = self.landscape; self.view.transform = CGAffineTransformIdentity; self.view.transform = CGAffineTransformMakeRotation(degreesToRadians(-90)); self.view.bounds = CGRectMake(0.0, 0.0, 480.0, 300.0); } // rest of the method is in book…