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 choosing Tools, Attributes Inspector or by
pressing Command+1. Let’s run through a quick example to see how this
works.
Make sure that the
EmptyView.xib file is still open and that you’ve added a text label to
the view. Select the label, and then press Command+1 to open the
Attributes Inspector, shown in Figure 1.
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? This means that 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.
Did You Know?
Don’t get hung up on
trying to memorize every attribute for every control now—I cover
interesting and important attributes when they are needed throughout
the book.
Feel free to explore the
many different options available in the Attributes Inspector, and to
see what can be configured for different types of objects. There is a
surprising amount of flexibility to be found within the tool.
By the Way
The attributes you change
in Interface Builder are simply properties of the objects themselves.
To help identify what an attribute does, use the documentation tool in
Xcode to look up the object’s class and review the descriptions of its
properties.
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. The iPhone includes Apple’s screen reader
technology: Voiceover. Voiceover combines speech synthesis with a
customized interface to aid users in navigating applications.
Using Voiceover, a
user 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 iPhone 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
choosing Tools, Identity Inspector or by pressing Command+4. The
Accessibility options have their own section within the Identity
Inspector, as shown in Figure 2.
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.
Did You Know?
For an application to be
available to the largest possible audience, you should take advantage
of accessibility tools whenever possible. Even objects such as the text
labels you’ve used in this lesson should have their traits configured
to indicate that they are static text. This helps potential users know
that they can’t interact with them.
Simulating the Interface
At any point in time
during the construction of your interface, you can test the controls in
the iPhone Simulator. To test the interface, choose File, Simulate
Interface (Command+R). After a few seconds, the iPhone Simulator will
start and display your interface design.
Watch Out!
When you use the Simulate
Interface command, only the interface code is being run. Nothing that
you may have written in Xcode is included. Therefore, you can simulate
interfaces even if you haven’t written a single line of supporting code
or if your code has errors. However, it also means that if your code
modifies the display in any way, you won’t see those changes onscreen.
To compile and run your code
along with the interface, switch to Xcode and click Build and Run, or,
as a shortcut, choose File, Build and Go in Xcode from the IB menu
(Command+Shift+R).
|
If you are
building accessible interfaces, you may want to enable the
Accessibility Inspector in the iPhone 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 3.
|
By the Way
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 iPhone 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.
