iOS Developer Library

Developer

Start Developing iOS Apps Today

PDF
On This Page

Designing a User Interface

A user needs to interact with an app interface in the simplest way possible. Design the interface with the user in mind, and make it efficient, clear, and straightforward.

Storyboards let you design and implement your interface in a graphical environment. You see exactly what you're building while you’re building it, get immediate feedback about what’s working and what’s not, and make instantly visible changes to your interface.

When you build an interface in a storyboard, as you did in Tutorial: Basics, you're working with views. Views display content to the user. They are the building blocks for constructing your user interface and presenting your content in a clear, elegant, and useful way. As you develop more complex apps, you'll create interfaces with more scenes and more views.

.

image: ../Art/ModelViewController_v_2x.png

The View Hierarchy

Views not only display themselves onscreen and react to user input, they can serve as containers for other views. As a result, views in an app are arranged in a hierarchical structure called the view hierarchy. The view hierarchy defines the layout of views relative to other views. Within that hierarchy, views enclosed within a view are called subviews, and the parent view that encloses a view is referred to as its superview. Even though a view can have multiple subviews, it can have only one superview.

At the top of the view hierarchy is the window object. Represented by an instance of the UIWindow class, a window object is the basic container into which you add your view objects for display onscreen. By itself, a window doesn’t display any content. To display content, you add a content view object (with its hierarchy of subviews) to the window.

For a content view and its subviews to be visible to the user, the content view must be inserted into a window’s view hierarchy. When you use a storyboard, this placement is configured automatically for you. When an app launches, the application object loads the storyboard, creates instances of the relevant view controller classes, unarchives the content view hierarchies for each view controller, and then adds the content view of the initial view controller into the window. You’ll learn about managing view controllers in the next chapter; for now, you’ll focus on creating a hierarchy within a single view controller in your storyboard.

Types of Views

When you design your app, it’s important to know what kind of view to use for what purpose. For example, the kind of view you use to gather input text from a user, such as a text field, is different from what you might use to display static text, such as a label. Apps that use UIKit views for drawing are easy to create because you can assemble a basic interface quickly. A UIKit view object is an instance of the UIView class or one of its subclasses. The UIKit framework provides many types of views to help present and organize data.

Although each view has its own specific function, UIKit views can be grouped into these general categories.

View category

Purpose

Examples of views

image: ../Art/views_content.png

Content

Display a particular type of content, such as an image or text.

Image view, label

image: ../Art/views_collections.png

Collections

Display collections or groups of views.

Collection view, table view

image: ../Art/views_controls.png

Controls

Perform actions or display information.

Button, slider, switch

image: ../Art/views_bars.png

Bars

Navigate, or perform actions.

Toolbar, navigation bar, tab bar

image: ../Art/views_input.png

Input

Receive user input text.

Search bar, text view

image: ../Art/views_containers_2x.png

Containers

Serve as containers for other views.

View, scroll view

Modal

Interrupt the regular flow of the app to allow a user to perform an action.

Action sheet, alert view

You can assemble views graphically using Interface Builder. Interface Builder provides a library of the standard views, controls, and other objects that you need to build your interface. After dragging these objects from the library, you drop them onto the canvas and arrange them in any way you want. Next, use inspectors to configure those objects before saving them in a storyboard. You see the results immediately, without the need to write code, build, and run your app.

The UIKit framework provides standard views for presenting many types of content, but you can also define your own custom views by subclassing UIView (or its descendants). A custom view is a subclass of UIView in which you handle all of the drawing and event-handling tasks yourself. You won’t be using custom views in these tutorials, but you can learn more about implementing a custom view in Defining a Custom View.

Use Storyboards to Lay Out Views

You use a storyboard to lay out your hierarchy of views in a graphical environment. Storyboards provide a direct, visual way to work with views and build your interface.

As you saw in Tutorial: Basics, storyboards are composed of scenes, and each scene has an associated view hierarchy. You drag a view out of the object library and place it in a storyboard scene to add it automatically to that scene’s view hierarchy. The view’s location within that hierarchy is determined by where you place it. After you add a view to your scene, you can resize, manipulate, configure, and move it on the canvas.

The canvas also shows an outline view of the objects in your interface. The outline view—which appears on the left side of the canvas—lets you see a hierarchical representation of the objects in your storyboard.

image: ../Art/storyboard_components_outline_view_2x.png

The view hierarchy that you create graphically in a storyboard scene is effectively a set of archived Objective-C objects. At runtime, these objects are unarchived. The result is a hierarchy of instances of the relevant classes configured with the properties you’ve set visually using the various inspectors in the utility area.

As you learned in Tutorial: Basics, the default interface configuration you work with in a storyboard applies to any version of your interface. When you need to adjust your interface for specific device sizes or orientations, you make the changes to specific size classes. A size class is a high-level way to describe the horizontal or vertical space that’s available in a display environment, such as iPhone in portrait or iPad in landscape. There are two types of size classes: regular and compact. A display environment is characterized by a pair of size classes, one that describes the horizontal space and one that describes the vertical space. You can view and edit your interface for different combinations of regular and compact size classes using the size class control on the canvas:

image: ../Art/SC_H_size_button_any_any_2x.png

You won’t be working with specific size classes in this tutorial, but if you’re curious about size classes, learn more about them in Size Classes Design Help.

Use Inspectors to Configure Views

The inspector pane appears in the utility area above the Object library.

image: ../Art/storyboard_components_inspectors_2x.png

Each inspector provides important configuration options for elements in your interface. When you select an object, such as a view, in your storyboard, you can use inspectors to customize different properties of that object.

  • image: ../Art/inspector_file.pngFile. Specify general information about the storyboard.

  • image: ../Art/inspector_quick_help.pngQuick Help. Get useful documentation about an object.

  • image: ../Art/inspector_identity.pngIdentity. Specify a custom class for your object and define its accessibility attributes.

  • image: ../Art/inspector_attributes.pngAttributes. Customize visual attributes of an object.

  • image: ../Art/inspector_size.pngSize. Specify an object’s size and Auto Layout attributes.

  • image: ../Art/inspector_connections.pngConnections. Create connections between your interface and source code.

You began working with the Attributes inspector in the first tutorial. You’ll continue using these inspectors throughout the rest of the tutorials to configure views and other objects in your storyboard. In particular, you’ll use the Attributes inspector to configure your views, the Identity inspector to configure your view controllers, and the Connections inspector to create connections between your views and view controllers.

Use Auto Layout to Position Views

When you start positioning views in your storyboard, you need to consider a variety of situations. iOS apps run on a number of different devices, with various screen sizes, orientations, and languages. You need a dynamic interface that responds seamlessly to changes in screen size, device orientation, localization, and metrics.

As you already saw in Tutorial: Basics, Xcode offers a tool called Auto Layout to help create a versatile, adaptive interface. Auto Layout is a system for expressing relationships between views. It lets you define these relationships in terms of constraints on individual views or between sets of views.

image: ../Art/storyboard_components_auto_layout_2x.png

Use the Auto Layout icons in the bottom-right area of your canvas to add various types of constraints to views on your canvas, resolve layout issues, and determine constraint resizing behavior.

  • image: ../Art/al_align_2x.pngAlign. Create alignment constraints, such as centering a view in its container, or aligning the left edges of two views.

  • image: ../Art/al_pin_2x.pngPin. Create spacing constraints, such as defining the height of a view, or specifying its horizontal distance from another view.

  • image: ../Art/al_resolve_issues_2x.pngResolve Auto Layout Issues. Resolve layout issues by adding or resetting constraints based on suggestions.

  • image: ../Art/al_resizing_2x.pngResizing Behavior. Specify how resizing affects constraints.

For the simple interface you’re creating in the ToDoList app, you don’t need to learn everything about Auto Layout at this point. As an app’s interface layout gets more complex, you’ll add a variety of constraints to specify exactly how the interface should lay out on different devices and orientations. At the end of this document, there’s a link to the Auto Layout guide that helps you use constraints to define more intricate adaptive interfaces.