- Understanding Interface Builder
- Creating User Interfaces
- Customizing the Interface Appearance
- Connecting to Code
- Further Exploration
- Summary
- Q&A
- Workshop
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 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.
){kind=link}
)
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.
){kind=link}
)
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.
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 toggle button to turn the Accessibility Inspector on, as shown in Figure 5.12.
){kind=link}
)
Figure 5.12. 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.