Defining a custom gesture is tricky. The tricky part is being flexible when defining what constitutes a gesture . In our sample, we’re going to define a gesture shaped like a check mark.

Step 1: create a new project in Xcode using the view-based application template. We are going to need a function from CGPointUtils, so add CGPointUtils.h, and CGPointUtils.c to this project’s classes folder.

Step 2: You can see that we’ve defined a minimum angle of 50 degress and a maximum angle of 135 degress in our header file.

#define kMinimumCheckMarkAngle 50
#define kMaximumCheckMarkAngle 135
#define kMinimumCheckMarkLength 10
#import <UIKit/UIKit.h>

@interface CheckPleaseViewController : UIViewController {
        IBOutlet UILabel *label;
        CGPoint lastPreviousPoint;
        CGPoint lastCurrentPoint;
        CGPoint lineLengthSoFar;
 }

@property(nonatomic,retain) UILabel *label;

-(void)eraseLabel;

Step 3: Double click your .xib file, open it to Interface Builder. Make sure the view is set to accept multiple touches, and drag a single label over it to. Double click the label and delete the text. Next, control drag from the File’s Owner icon to the label, and connect it to the label outlet. Save and close the nib, and go back to Xcode.

Step 4: Let’s take a look at the touch methods, which we are implimented in controller class. First in touchesBegan:withEvent:, we determine the point that the user is currently touching and store that value in lastPreviousPoint and lastCurrentPoint. Another one is touchesMoved:withEvent:, we calculate the angle between the line from the current touch’s previous position to its current position, and the line between the two points stored in the lastPreviousPoint and lastCurrentPoint instance variables.

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
        UITouch *touch = [touches anyObject];
        CGPoint point = [touch locationInView:self.view];
        lastPreviousPoint = point;
        lastCurrentPoint = point;
        lineLengthSoFar = 0.0f;
 }

-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
        UITouch *touch = [touches anyObject];
        CGPoint previousPoint = [touch previousLocationInView:self.view];
        CGPoint currentPoint = [touch locationInView:self.view];
        CGFloat angle = angleBetweenLines(lastPreviousPoint,
        lastCurrentPoint,previousPoint,currentPoint);
       
        if(angle >= kMinimumCheckMarkAngle && angle <= kMaximumCheckMarkAngle
            && lineLengthSoFar > kMinimumCheckMarkLength){
                label.text = @"Checkmark";
                [self.performSelector : @selector(eraseLabel)
                 withObject:nil afterDelay:1.6];
        }
       
        lineLengthSoFar += distanceBetweenPoints(previousPoint, currentPoint);
        lastPreviousPoint = previousPoint;
        lastCurrentPoint =  currentPoint;
}

Step 5: Compile and run , and try out the gesture. (See figure 1)


Figure 1: Our checkmark gesture application.

Did you enjoy this article?
Share
the
Love
Get Free Updates