Adding a Switch
The switch that we’ll use in our application has one role: to toggle a web view that displays details about the flower (flowerDetailView) on and off. Add the switch to the view by dragging the switch (UISwitch) object from the Library into the view. Position it along the right side of the screen, just under the segmented control.
As with the segmented control, providing some basic user instruction through an onscreen label can be helpful. Drag a label (UILabel) into the view and position it to the left of the switch. Change the text to read Show Photo Details:. Your view should now resemble Figure 8, but your switch will likely show up as “on.”
Setting the Default State
I
know you’re getting used to many of the different configuration options
for the controls we use, but in this case, the switch has only a single
option: whether the default state is on or off. The switch that you
added to the view is set to “on;” we want to change it so that it is
“off” by default.
To change the default
state, select the switch and open the Attributes Inspector (Command+1).
Using the State pop-up menu, change the default state to off. That
covers just about everything for buttons! We just need to connect it to
an action, and we can move on to the next element.
Connecting to the Action
The only time we’re
really interested in the switch is when its value changes, so, like the
segmented control, we need to take advantage of the event Value Changed
and connect that to the toggleFlowerDetail action method.
With the Document window
visible, select the switch, and then open the Connections Inspector
(Command+2). Drag from the circle beside the Value Changed event to the
File’s Owner icon in the Document window. When you release your mouse
button, choose the toggleFlowerDetail action to complete the connection, as shown in Figure 9.
We’re
cruising now! Let’s wrap this up by adding the web views that will show
the flower and flower details, then the button that will let us load a
new image whenever we want.
Adding the Web Views
The application that we’re
building relies on two different web views. One will display the flower
image itself; the other view (which can be toggled on and off) shows
details about the image. The details view will be overlaid on top of the
image itself, so let’s start by adding the main view, flowerView.
To add a web view (UIWebView)
to your application, locate it in the Library, and then simply drag it
into your view. The web view will display a resizable rectangle that you
can drag and position anywhere you’d like. Because this is the view
that the flower image will be shown in, position it to fall about
halfway down the screen, and then resize it so that it is the same width
as the iPhone screen and so that it covers the lower portion of the
view entirely.
Repeat this to add a second web view for the flower details (flowerDetailView).
This time, size the view so that it is about one-third the height of
the flower view, and locate it at the very bottom of the screen, over
top of the flower view, as shown in Figure 10.
Setting the Web View Attributes
Web views, surprisingly, have
very few attributes that you can configure in Interface Builder, but
what is available can be very important! To access the web view
attributes, select one of the views you added, and then press Command+1
to open the Attributes Inspector (see Figure 11).
There are two types of options
you can select: Scaling and Detection (Phone Numbers, Addresses,
Events, Links). If Scales Page to Fit under Scaling is selected, large
pages will be scaled to fit in the size of the area you’ve defined. If
the Detection options are used, the iPhone’s data detectors go to work
and will underline items that it has decided are phone numbers,
addresses, dates, or additional web links.
For the main flower view,
we absolutely want the images to be scaled to fit within the view.
Select the web view, and then use the Properties Inspector to choose the
Scales Page to Fit option.
For the second view, we do not
want this to be set, so select the web view where the application will
be showing the flower details and use the Attributes Inspector to ensure
that no scaling will take place. You may also want to change the view
attributes for the detail view to have an alpha value of around 0.65.
This will create a nice translucency effect when the details are
displayed on top of the photograph.
Watch Out!
Scaling
doesn’t necessarily do what you’d expect for “small” web pages. If you
display a page with only the text Hello World on it in a scaled web
view, you might expect the text to be shown to fill the web view.
Instead, the text will be tiny. The web view assumes that the text is part of a larger page and scales it down rather than making it appear bigger.
If you happen to have control of the webpage itself, you can add a "viewport" meta tag to tell Safari how wide (in pixels) the full page is:
<meta name="viewport" content="width=320"/>
Connecting to the Outlets
To prepare the two web views so that we can use them to display content, we need to connect them to the flowerView and flowerDetailView
outlets created at the start of the project. To do this, Control-drag
from the File’s Owner icon in the Document window to the web view in
your view or its icon in the Document window. Release your mouse button,
and then, when prompted, choose the appropriate outlet.
For the larger view, connect to flowerView, as demonstrated in Figure 12. Repeat the process, connecting the smaller view to flowerDetailView.
With the tough stuff out of
the way, we just have one more finishing touch to put on the interface,
and then we’re ready to code.
