Beginning iOS Development

Course No. 10-152-143

Chapter 8 — Notification and Rotation (iOS)

Objective-C code is all about objects sending messages to other objects.

Notification Center

  • How can parts of an application communicate with other parts?


  • NSNotificationCenter is part of every application. It’s a central bulletin board where notifications can be left for those who want to see them.


UIDevice Notifications

  • Create a new Single View Application in Xcode. Name it HeavyRotation.


  • Add this code to the application:didFinishLaunchingWithOptions: method in HeavyAppDelegate.
  • This code uses the Target/Action pattern to designate the orientationChanged: method to receive notices when the device is rotated.
    • This is the @selector() directive we learned about last semester. Don’t forget the ‘:’!
  • Here’s that method.
  • Run the app and look at the Console logs. Rotate the device several times and you should see something like this.
  • This is a good example of the Target/Action pattern in use.
  • This can be handy in some circumstances, but for view controllers we use a different approach.

Autorotation

NOTE: iOS 6 changed the way this is done almost completely. The book does not contain the correct methods and should be read only for the general idea. Use the code here to do your program.

  • Click on the Main.storyboard file. Then:
    • Click on the View.
    • Click on the first inspector tab.
    • Deselect the Use Autolayout checkbox.


  • NOTE: The shouldAutorotateToInterfaceOrientation: method has been deprecated in iOS 6. Don’t use it in new code. Use the following methods instead.
  • Add this method to the HeavyViewController.m file. This method tells the system which orientations are supported by your app.

User Interface

  • Next, we’ll build a user interface.
  • Find a nice image somewhere. I’m using this one.


  • Drag it into the Images.xcassets file in your project.


  • Open the Main.storyboard file in Interface Builder and add these elements to the View.
    • A slider (UISlider).
    • An image view (UIImageView).
    • Two buttons (UIButton) that are 44 by 44 pixels.
  • Arrange the elements like this.


    • Put the buttons in the lower corners.
    • Give the image view a light gray background color.
  • Click on the UIImageView and select your image and set the Mode to Aspect Fit.


  • Run the app and you should see something like this.


  • Rotate the app in the iOS Simulator by selecting the Hardware→Rotate Right menu item. You can also press the ⌘→ keys.


  • Whoops! That’s not exactly what we had in mind, eh?


Springs and Struts

Here are the steps needed to fix this.

  • Open the Main.storyboard file for editing.
  • Click on the View and select the second-to-last tab in the inspector window.


  • This is the Sizing and Autosizing window. This system will be supplanted by Auto Layout, but is still in wide use and we need to know it. We’ll also be learning Auto Layout.


  • These are called Springs and Struts.


    • A Spring controls the size of the element when the screen is rotated.
    • A Strut controls the edges of the element in relation to the sides of the window.
  • Click on the slider and click on the springs and struts until they match this.


  • Run the app and rotate the screen.


    • That’s better!
  • Next, select the image view and set its springs and struts like this.


  • Run the and rotate the screen.


    • We’re getting closer. Now for the buttons.
  • Select the left button and configure the springs and struts like this.


  • The right button should be like this.


  • Run it! Rotate it!


    • Cool!

Just for fun!

  • In the iOS Simulator, select the Debug→Toggle Slow Animations menu item. Rotate the screen and watch what is really happening.


Making it Universal

  • Let’s make the app a Universal app and run it on an iPad.
  • Do this:


  • Have the simulator run an iPad.


  • Now it’s and iPad app!


  • And it rotates.


FtMC: Overriding Autorotation

  • There are methods which let us override the default rotation behavior. Here are the two important ones.
    • willAnimateRotationToInterfaceOrientation:duration:
    • didRotateFromInterfaceOrientation:
  • willAnimateRotationToInterfaceOrientation:duration: will run just before the view is rotated. This method is run inside the animation for the view so anything you do in here will automatically be animated, too. In this example the background color is changing to a random color with every rotation.
  • If you toggle to slow animations in the simulator you can see that the colors are being blended as the device rotates. Sweet!
  • didRotateFromInterfaceOrientation: runs just after the rotation animation completes. You can do some final tweaking of your interface here. In this example, a label is being set to the current time after the device is rotated.

One more little detail

  • 76 pt.


  • 120 pt.


  • 152 pt.