Home > Articles > Mobile Application Development & Programming

  • Print
  • + Share This
This chapter is from the book

Customizing the Interface Appearance

How your interface appears to the end user isn’t just a combination of control sizes and positions. For many kinds of objects, literally dozens of different attributes can be adjusted. Although you could certainly configure things such as colors and fonts in your code, it’s easier to just use the tools included in Interface Builder.

Using the Attributes Inspector

The most common place you’ll tweak the way your interface objects appear is through the Attributes Inspector, available by clicking the slider icon at the top of the Utility area. You can also choose View, Utilities, Show Attributes Inspector (Option+Command+4) if the Utility area isn’t currently visible. Let’s run through a quick example to see how this works.

Make sure the Empty.storyboard file is still open and that you’ve added a text label to the view. Select the label, and then open the Attributes Inspector, shown in Figure 5.10.

Figure 5.10.

Figure 5.10. To change how an object looks and behaves, select it and then open the Attributes Inspector.

The top portion of the Attributes Inspector will contain attributes for the specific object. In the case of the text object, this includes settings such as font, size, color, and alignment (everything you’d expect to find for editing text).

In the lower portion of the inspector are additional inherited attributes. Remember that onscreen elements are a subclass of a view. Therefore, all the standard view attributes are also available for the object and for your tinkering enjoyment. In many cases, you’ll want to leave these alone, but settings such as background and transparency can come in handy.

Feel free to explore the many different options available in the Attributes Inspector to see what can be configured for different types of objects. There is a surprising amount of flexibility to be found within the tool.

Setting Accessibility Attributes

For many years, the “appearance” of an interface meant just how it looks visually. Today, the technology is available for an interface to vocally describe itself to the visually impaired. iOS includes Apple’s screen-reader technology: Voiceover. Voiceover combines speech synthesis with a customized interface to aid users in navigating applications.

Using Voiceover, users can touch interface elements and hear a short description of what they do and how they can be used. Although you gain much of this functionality “for free” (the iOS Voiceover software will read button labels, for example), you can provide additional assistance by configuring the accessibility attributes in Interface Builder.

To access the Accessibility settings, you need to open the Identity Inspector by clicking the window icon at the top of the Utility area. You can also choose View, Utilities, Show Identity Inspector or press Option+Command+3. The Accessibility options have their own section within the Identity Inspector, as shown in Figure 5.11.

Figure 5.11.

Figure 5.11. Use the Accessibility section in the Identity Inspector to configure how Voiceover interacts with your application.

You can configure four sets of attributes within this area:

  • Accessibility: If enabled, the object is considered accessible. If you create any custom controls that must be seen to be used, this setting should be disabled.
  • Label: A simple word or two that serves as the label for an item. A text field that collects the user’s name might use “your name,” for example.
  • Hint: A short description, if needed, on how to use the control. This is needed only if the label doesn’t provide enough information on its own.
  • Traits: This set of check boxes is used to describe the features of the object—what it does and what its current state is.

Simulating the Interface

If you’ve worked with earlier versions of Xcode, you know that you could easily simulate your user interface. Unfortunately, when Apple introduced Storyboards, they removed this capability. However, Xcode will now write much of your interface code for you. This means that when you create an interface and connect it to your application classes, you can run the app in the iOS Simulator even though it isn’t done. We will follow a development pattern throughout the book that takes advantage of this. Except in a few very unusual instances, you can run your apps at any time to test the interface and any functionality you’ve added.

  • + Share This
  • 🔖 Save To Your Account