iOS Recipes - Matt Drance [9]
We create a UIView subclass, SlideInView, which exposes two methods: showWithTimer:inView:from:, which controls its appearance and timing, and viewWithImage:, which is a class method that instantiates the view from a UIImage. We can also create the view in Interface Builder, which allows for more dynamic notifications that can include labels and images. By using labels, we can reuse slideInViews by simply modifying the text in the label (see Figure 8, SlideInView sample app ).
SlideInView/SlideInView.m
+ (id)viewWithImage:(UIImage *)SlideInImage {
SlideInView *SlideIn = [[[SlideInView alloc] init] autorelease];
SlideIn.imageSize = SlideInImage.size;
SlideIn.layer.bounds = CGRectMake(0, 0, SlideIn.imageSize.width,
SlideIn.imageSize.height);
SlideIn.layer.anchorPoint = CGPointMake(0, 0);
SlideIn.layer.position = CGPointMake(-SlideIn.imageSize.width, 0);
SlideIn.layer.contents = (id)SlideInImage.CGImage;
return SlideIn;
}
Figure 8. SlideInView sample app
* * *
The class method viewWithImage: instantiates the view and sets the contents property of the underlying layer to point to the UIImage. The view position is set to be offscreen, but it will need to be adjusted again depending on the direction and position of the animation.
SlideInView/SlideInView.m
- (void)awakeFromNib {
self.imageSize = self.frame.size;
self.layer.bounds = CGRectMake(0, 0, self.imageSize.width,
self.imageSize.height);
self.layer.anchorPoint = CGPointMake(0, 0);
self.layer.position = CGPointMake(-self.imageSize.width, 0);
}
The awakeFromNib method is called after the instance of SlideInView has already been unpacked, so we just need to ensure that the view is positioned off the screen.
SlideInView/SlideInView.m
switch (side) { // align view and set adjustment value
case SlideInViewTop:
self.adjustY = self.imageSize.height;
fromPos = CGPointMake(view.frame.size.width/2-self.imageSize.width/2,
-self.imageSize.height);
break;
case SlideInViewBot:
self.adjustY = -self.imageSize.height;
fromPos = CGPointMake(view.frame.size.width/2-self.imageSize.width/2,
view.bounds.size.height);
break;
case SlideInViewLeft:
self.adjustX = self.imageSize.width;
fromPos = CGPointMake(-self.imageSize.width,
view.frame.size.height/2-self.imageSize.height/2);
break;
case SlideInViewRight:
self.adjustX = -self.imageSize.width;
fromPos = CGPointMake(view.bounds.size.width,
view.frame.size.height/2-self.imageSize.height/2);
break;
default:
return;
}
The showWithTimer:inView:from:bounce: method takes three parameters: the destination view, the enum representing the side to slide from, and the option to add an additional bounce element to the slide animation. Based on the side enum, we set the adjustX or adjustY value that is used to calculate the end point of the animation, and we set the fromPos value for the view to start offscreen on the selected side.
SlideInView/SlideInView.m
CGPoint toPos = fromPos;
CGPoint bouncePos = fromPos;
bouncePos.x += (adjustX*1.2);
bouncePos.y += (adjustY*1.2);
toPos.x += adjustX;
toPos.y += adjustY;
CAKeyframeAnimation *keyFrame = [CAKeyframeAnimation
animationWithKeyPath:@"position"];
keyFrame.values = [NSArray arrayWithObjects:
[NSValue valueWithCGPoint:fromPos],
[NSValue valueWithCGPoint:bouncePos],
[NSValue valueWithCGPoint:toPos],
[NSValue valueWithCGPoint:bouncePos],
[NSValue valueWithCGPoint:toPos],
nil];
keyFrame.keyTimes = [NSArray arrayWithObjects:
[NSNumber numberWithFloat:0],
[NSNumber numberWithFloat:.18],
[NSNumber numberWithFloat:.5],
[NSNumber numberWithFloat:.75],
[NSNumber numberWithFloat:1],
nil];
The bounce option triggers the use of keyframe animation, adding the extra values and keyTimes necessary to give the impression of a small bounce in the appropriate direction. Keyframe animation is a powerful and flexible technique for creating nonstandard animation curves. The keyTimes are unit values that represent