UIButton control with swipe gesture

Question

I want to make a UIButton control with swipe to fill and pop-over like in below picture.

It is used in the Economist's GMAT Tutor app. Any hint please?

Answer 1

Download Code

I guess you can use UIPanGestureRecognizer, But try it with the UIView not with UIButton So, That you use Core Graphics for filling(draw) out the color according to the movement of the finger.

To show answer use UILabel over UIView

For UIPanGestureRecognizer Tutorial

//Color Filling
//Add This code to UIView subClass that you will use instead of `UIButton`
- (void)drawRect:(CGRect)rect 
{
    CGContextRef context = UIGraphicsGetCurrentContext ();

    // The color to fill the rectangle (in this case black)
    CGContextSetRGBFillColor(context, 0.0, 0.0, 0.0, 1.0);

    // draw the filled rectangle
    CGRect fillRect = CGRectMake(0,0,FingerPositionInView,self.bounds.size.height)
    CGContextFillRect (context, fillRect);
}

//Final Code

.h File
#import <UIKit/UIKit.h>

@interface MHAnswerView : UIView
{
    float fingerPositionInView;
}
- (id)initWithFrame:(CGRect)frame andAnswer:(NSString*)answer;

@end

.m File

#import "MHAnswerView.h"

@implementation MHAnswerView

- (id)initWithFrame:(CGRect)frame andAnswer:(NSString*)answer
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
        [self.layer setBorderColor:[UIColor colorWithRed:185.0f/255.0f green:224.0f/255.0f blue:231.0f/255.0f alpha:1.0f].CGColor];
        [self.layer setBorderWidth:2.0f];
        [self.layer setCornerRadius:2.0f];
        [self setBackgroundColor:[UIColor whiteColor]];
        UILabel* lblAnswer = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, frame.size.width, frame.size.height)];
        lblAnswer.textAlignment = NSTextAlignmentCenter;
        lblAnswer.text = answer;
        [self addSubview:lblAnswer];

        UIPanGestureRecognizer* panGesture = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(move:)];
        [self addGestureRecognizer:panGesture];
        [NSTimer scheduledTimerWithTimeInterval:1.0f/60.0f target:self selector:@selector(updateProgressView) userInfo:nil repeats:YES];

    }
    return self;
}
-(void)updateProgressView
{
      [self setNeedsDisplayInRect:self.bounds];
}

// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect
{
    // Drawing code
    CGContextRef context = UIGraphicsGetCurrentContext ();

    // The color to fill the rectangle (in this case black)
    CGContextSetRGBFillColor(context,185.0f/255.0f,224.0f/255.0f,231.0f/255.0f,1.0);
    //CGContextSetRGBFillColor(context,0.0,0.0f,0.0f,1.0);
    // draw the filled rectangle
    CGRect fillRect = CGRectMake(0,0,fingerPositionInView,self.bounds.size.height);
    CGContextFillRect (context, fillRect);
}
-(void)move:(UIPanGestureRecognizer*)sender
{
    CGPoint translation = [sender translationInView:self];
    NSLog(@"%f", translation.x+self.frame.origin.x);
    fingerPositionInView = translation.x + self.frame.origin.x;

}

//Adding MHView to View Controller 
MHAnswerView* mhview = [[MHAnswerView alloc] initWithFrame:CGRectMake(20, 20, 280, 100) andAnswer:@"Answer"];
    [self.view addSubview:mhview];

Answer 2

Attach a gesture recognizer to the view:

UIPanGestureRecognizer* pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePan:)];
[view addGestureRecognizer:pan];

in your handler retrieve the x position of the finger:

- (void)handlePan:(UIPanGestureRecognizer*)sender
{   
    CGPoint translation = [sender translationInView:[view superview]];
    NSLog(@"%f", translation.x)
}