Monday, November 24, 2014

Unified Storyboards in Xcode 6

Adaptive applications


A major topic at this year's WWDC(2014) was building adaptive applications. Instead of building applications that target specific screen sizes, developers are encouraged to develop applications that adapt to the device they run on, irrespective of its screen size.

iOS 8 makes dealing with screen size and orientation much more versatile. It is easier than ever to create a single interface for an application that works well on both iPad and iPhone, adjusting to orientation changes and different screen sizes as needed.

This is a move that started a couple of releases back with the introduction of Auto Layout in iOS 6, enabling developers to create apps that work on both the 3.5" and 4.0" screens. It's now been further improved to enable iOS developers to build apps that run on all supported iPhones, including the new 4.7" iPhone 6 and 5.5" iPhone 6 Plus, and iPads using the same code base.

Since the developer no longer needs to create separate and specific storyboard for iPhone and iPad devices, they have flexibility to design applications with a common interface and then customize that interface for different size classes. In this way, an application can be adapted to the strengths of each form factor and tune the user interface to provide the best experience.

Size Classes
Size classes define the canvas size used in layouts. They allow you to specify how the application's user interface changes when the available size of your view controller changes. This makes it possible to have a unified storyboard when building a universal application. Previously you had to design two separate storyboards, one for iPad and one for iPhone.

Prior to iOS 8, the developer used UIInterfaceOrientation and UIInterfaceIdiom to differentiate between portrait and landscape modes and iPhone and iPad devices. In iOS8, the method of determining orientation and device is by using Size Classes. Every device is defined by a Size Class, in both vertically and horizontally axis, and there are two types of size classes in iOS 8:

  • Regular

  • Compact

But you should note that a size class doesn't necessarily map to one device in one orientation. For instance, an iPad can have a view with an iPhone style layout (a compact horizontal and a regular vertical size class) when presented on a smaller space on the device, and an iPad style layout (a regular horizontal and a regular vertical size class) when the available space is larger.

You change size classes by using the Size Classes control near the layout toolbar at the bottom of the Interface Builder canvas. Interface Builder starts you out in the any width and any height size class where you can layout common user interface components and constraints for the different screen sizes and orientations. You then update the parts that need to change when the available screen size changes by making changes to the user interface in the different size classes.

Let us look at the steps on how to use auto-layout for both iPhone and iPad application development in Xcode 6 by using default “Inferred” view.

  1. Open Xcode 6.
  2. Select Single View Application and create new project in Xcode.
  3. Give Project Name as AutoLayoutUniversalDemo
  4. Choose Language : Swift/Objective – C
  5. Select Device : Select Universal
  6. Now in project navigator you will find “Main.Storyboard”.
  7. Click on “Main.Storyboard”, select View Controller you will see “Attribute inspector” in “Utility Area”. Keep size as Inferred so that your View Controller does not change according to specific device.
  8. Drag button to the center of view controller. You can check how button will be displayed in different device using Assistant editor without running the application.

 Screen Shot 2014-11-24 at 11.13.24 am.png
(Look at the different size of screen 3.5 inch, 4 inch, 4.7 inch, 5.5 inch, iPad)

  1. Lets look how to set its position using Auto Layout.
  2. Select View controller on left hand side and select button present at   the center.
    1. At the bottom you can see “Screen Shot 2014-11-24 at 11.52.46 am.png” (pin) in Editor area.

  1. Clicking on it will pop the current constraints for controller which will display its position and height and width. Now set spacing to nearest neighbor.

Screen Shot 2014-11-24 at 11.57.15 am.png

  1. This will change the size of the button but it will remain at the center. Set its height and width and see what happens.

  1. If still it is not displayed according to it is height and width then remove all the constraints first

Screen Shot 2014-11-24 at 12.14.17 pm.png

  1. Click on button and drag mouse upward/downward/left/right it will display certain options when you release mouse in popover. Select center horizontally/vertically.

    Screen Shot 2014-11-24 at 12.33.56 pm.png

  2. As you can now see, the button will be displayed at the center but its size gets reduced.

  1. The application you will get the button exactly in center for all the device and its size won’t even get changed.

    Screen Shot 2014-11-24 at 12.40.23 pm.png

No comments:

Post a Comment