- Understanding Interface Builder
- Creating User Interfaces
- Customizing the Interface Appearance
- Connecting to Code
- Further Exploration
- Summary
- Q&A
- Workshop
- Activities
This chapter is from the book
This chapter is from the book
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, positions, and constraints. 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 IB.
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.
Turn back to the Empty.storyboard file with the label you’ve added (or just use the Constraints.storyboard label). Select the label, and then open the Attributes Inspector, shown in Figure 5.12.
)
FIGURE 5.12 To change how an object looks and behaves, select it, and then open the Attributes Inspector.
The top portion of the Attributes Inspector contains 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 bottom 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 IB.
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.13.
)
FIGURE 5.13 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.
- Identifier: Similar to the Label attribute, the Identifier should contain a more detailed description of the control (for example, “A text field for your first and last name”).
- Traits: This set of check boxes is used to describe the features of the object—what it does and what its current state is.
Enabling the iOS Accessibility Inspector
If you are building accessible interfaces, you may want to enable the Accessibility Inspector in the iOS Simulator. To do this, start the Simulator and click the Home button to return to the home screen. Start the Settings application and navigate to General, Accessibility, and then use the switch to turn the Accessibility Inspector on, as shown in Figure 5.14.
)
FIGURE 5.14 Toggle the iOS Accessibility Inspector on.
The Accessibility Inspector adds an overlay to the Simulator workspace that displays the label, hints, and traits that you’ve configured for your interface elements. Note that navigating the iOS interface is very different when operating in accessibility mode.
Using the X button in the upper-left corner of the inspector, you can toggle it on and off. When off, the inspector collapses to a small bar, and the iPhone Simulator will behave normally. Clicking the X button again turns it back on. To disable the Accessibility Inspector altogether, just revisit the Accessibility setting in the Settings application.
Previewing the Interface
If you’ve worked with earlier versions of Xcode, you know that you could easily simulate your UI. This feature disappeared in Xcode 4, but has made a happy return in the latest Xcode releases (even if it is a bit difficult to find).
To use the preview feature, you must use the Xcode assistant editor feature that we reviewed in Hour 2. For example, open the PreviewUI.storyboard file included in this hour’s Projects directory. This storyboard contains a simple user interface: a label, a field, and a button. Choose View, Show Toolbar from the menu bar so that all the typical window controls are showing. (On a normal project, the toolbar would already be visible.)
To preview the view as it will look on a device, first activate the assistant editor. Next, click the bar above the assistant editor pane where it reads Automatic. A drop-down menu appears, with Preview as the last option, as shown in Figure 5.15.
)
FIGURE 5.15 Select Preview (or choose from the options in its submenu) to activate a preview in the assistant editor.
Select Preview, and the assistant editor refreshes to show a live preview of what your UI will look like on a device. Use the button at the bottom of the preview to toggle between portrait and landscape orientations. In Figure 5.16, I’m previewing the UI on a 4.7-inch iPhone in landscape mode.
)
FIGURE 5.16 Preview the UI in different orientations and on different devices.
To add additional devices to the preview, click the + menu and choose the iOS device you’d like. If you’re creating a project that runs on earlier versions of iOS, you can even choose to preview a device running a different OS version.
The preview is added to the right of the existing preview. You can even add multiples of the same device so that you can see a landscape and portrait view at the same time. To remove a preview, click to select it, and then press the Delete key.
This will come in very handy when we explore Auto Layout more in Hour 16. In addition, if you want to test your application UIs, you can always run your apps in the iOS Simulator, even when they aren’t entirely written. Apple’s development tools make it possible to see results as you build, instead of having to wait until every single feature is in place.