Display and Interaction Traits
In addition to physical screen layout, the UIView
class provides properties that control how your view appears onscreen
and whether users can interact with it. Every view uses a translucency
factor (alpha) that ranges between opaque and transparent. Adjust this by issuing [myView setAlpha:value],
where the alpha values falls between 0.0 (fully transparent) and 1.0
(fully opaque). This is a great way to hide views and to fade them in
and out onscreen.
You can assign a color to the background of any view. [myView setBackgroundColor: [UIColor redColor]]
colors your view red, for example. This property affects different view
classes in different ways depending on whether those views contain
subviews that block the background. Create a transparent background by
setting the view’s background color to clear (i.e. [UIColor clearColor]).
Every
view, however, offers a background color property regardless of whether
you can see the background. Using bright, contrasting background colors
is great way to visually see the true extents of views. When you’re new
to iPhone development, coloring in views offers a concrete sense of
what is and is not onscreen and where each component is located.
The userInteractionEnabled property controls whether users can touch and interact with a given view. For most views, this property defaults to YES. For UIImageView, it defaults to NO, which can cause a lot of grief among beginning developers. They often place a UIImageView
as their backsplash and don’t understand why their switches, text entry
fields, and buttons do not work. Make sure to enable the property for
any view that needs to accept touches, whether for itself or for its
subviews, which may include buttons, switches, pickers, and other
controls. If you’re experiencing trouble with items that seem
unresponsive to touch, you should check the userInteractionEnabled property value for that item and for its parents.
Disable
this property for any display-only view you layer over your interaction
area. To show a noninteractive clock via a transparent full-screen
view, unset interaction. This allows touches to pass through the view
and fall below to the actual interaction area of your application.
UIView Animations
UIView
animation provides one of the odd but lovely perks of working with the
iPhone as a development platform. It enables you to slow down changes
when updating views, producing smooth animated results that enhance the
user experience. Best of all, this all occurs without you having to do
much work.
UIView animations are
perfect for building a visual bridge between a view’s current and
changed states. With them, you emphasize visual change and create an
animation that links those changes together. Animatable changes include
the following:
Changes in location— Moving a view around the screen
Changes in size— Updating the view’s frame and bounds
Changes in stretching— Updating the view’s content stretch regions
Changes in transparency— Altering the view’s alpha value
Changes in states— Hidden versus showing
Changes in view order— Altering which view is in front
Changes in rotation— Or any other affine transforms that you apply to a view
Building UIView Animation Blocks
UIView animations work as blocks, that is, a complete transaction that progresses at once. Start the block by issuing beginAnimations:context:. End the block with commitAnimations. Send these class methods to UIView
and not to individual views. In the block between these two calls, you
define the way the animation works and perform the actual view updates.
The animation controls you’ll use are as follows:
beginAnimations:context— Marks the start of the animation block.
setAnimationCurve— Defines the way the animation accelerates and decelerates. Use ease-in/ease-out (UIViewAnimationCurveEaseInOut)
unless you have some compelling reason to select another curve. The
other curve types are ease in (accelerate into the animation), linear
(no animation acceleration), and ease out (accelerate out of the
animation). Ease-in/ease-out provides the most natural-feeling
animation style.
setAnimationDuration—
Specifies the length of the animation, in seconds. This is really the
cool bit. You can stretch out the animation for as long as you need it
to run. Be aware of straining your user’s patience and keep your
animations below a second or two in length. As a point of reference,
the keyboard animation, when it slides on or offscreen, lasts 0.3
seconds.
commitAnimations— Marks the end of the animation block.
Sandwich your actual view change commands after setting up the animation details and before ending the animation.
CGContextRef context = UIGraphicsGetCurrentContext();
[UIView beginAnimations:nil context:context];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView setAnimationDuration:1.0];
// View changes go here
[contentView setAlpha:0.0f];
[UIView commitAnimations];
This snippet shows UIView
animations in action by setting an animation curve and the animation
duration (here, one second). The actual change being animated is a
transparency update. The alpha value of the content view goes to zero,
turning it invisible. Instead of the view simply disappearing, this
animation block slows down the change and fades it out of sight. Notice
the call to UIGraphicsGetCurrentContext(), which returns the
graphics context at the top of the current view stack. A graphics
context provides a virtual connection between your abstract drawing
calls and the actual pixels on your screen (or within an image). As a
rule, you can pass nil for this argument without ill effect in the latest SDKs.
Animation Callbacks
View
animations can notify an optional delegate about state changes, namely
that an animation has started or ended. This proves helpful when you
need to catch the end of an animation to start the next animation in a
sequence. To set the delegate, use setAnimationDelegate:, for example:
[UIView setAnimationDelegate:self];
To set up an end-of-animation callback, supply the selector sent to the delegate.
[UIView setAnimationDidStopSelector:@selector(animationDidStop:finished:context:)];
