5. Swipe, Animation, & Limiting Gestures to a Range a Pixels

What we are going to be doing in the section is using a swipe gesture to hide the slider controls that show up on the main view. We will then go through the process of animating the view hiding. From there we will limit the area on the screen that can accept the swipe to hide gesture.

Here is a screen shot of before and after the swiping so you can see what we want to accomplish:

Here is the zip file for all of the code used in this example.

The first thing we need to do is add another view to the main view and then put all of the sliders back on top of the new view (you will have to manually re-align all of the sliders). You will also need to add two Swipe Gestures Recognizers to the new view that we created. Configure one of the gestures for swipe up and configure the other gesture to swipe down. See the screen shot below for more info:

The next thing we need to do is add the new view and the swipe gesture recognizer to the header file. To do this open up DOViewController.h and append the following lines of code to the rest of the IBOutlet’s.

    
    IBOutlet UIView *sliderView;
    IBOutlet UISwipeGestureRecognizer *hideViewGestureRecognizer;
    IBOutlet UISwipeGestureRecognizer *showViewGestureRecognizer;

Now we need to add the IBAction for the gestures in the header as well. Add the following two lines to the rest of the IBAction’s in the header file.

    - (IBAction)hideViewGesture:(id)sender;
    - (IBAction)showViewGesture:(id)sender;

Below is the code exert for the “hideViewGesture”. It also manages the the animation. Basically the animation controls the speed of the view sliding off the bottom of the screen. Without the animation it would simply disappear off of the screen instantly.

- (IBAction)hideViewGesture:(id)sender
{
    [UIView animateWithDuration:.5
                     animations:^{
                         sliderView.frame = CGRectMake(0, 480, 320, 150);
                     }
                     completion:^(BOOL complete) {
                         sliderView.hidden = YES;
                     }];
}

You are going to specify the number settings in CGRectMake to control how the view slides off of the screen. The height of the iPhone is 480 points by 320 points.

Here is the code used to show the view again once it has been hidden. It is activated with a swipe up from the bottom. This also has an animation to control the speed of the view re-appearing. We set the animation to ‘.5’ seconds. This seems like the most natural speed, but for fun you can set it to something much longer such as 10 seconds.

- (IBAction)showViewGesture:(id)sender
{
    sliderView.hidden = NO;
    [UIView animateWithDuration:.5 animations:^{
        sliderView.frame = CGRectMake(0, 310, 320, 150);
    }];   
}

Now what we are going to do is limit the pixels on the screen that are able to except swipe gestures. This is so that the use has to swipe up from the bottom to get the view back rather than any where on the screen.

To do this we set the ‘y’ value to “420.0”. The ‘y’ value starts at 0 at the top of the screen and gets larger as you go down, up to 480.

- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldReceiveTouch:(UITouch *)touch
{
    if(showViewGestureRecognizer == gestureRecognizer && [touch locationInView:self.view].y >= 420.0)
    {
        return YES;
    }
    else
    {
        return NO;
    }
}