iOS 8 : Keyboard Extension. Issue with adding pop up of keys

Question

I am building my Keyboard Extension app and i have added key pop animation on button when user tap on it. It works fine for inside image but for top row image pop up area be

Answer 1

//Those who are looking for pop up shaped image:

// I have used some constants for button width etc, you can adjust as per new keyboard.

**#define _UPPER_WIDTH (52.0 * [[UIScreen mainScreen] scale])

**#define _LOWER_WIDTH (32.0 * [[UIScreen mainScreen] scale])

**#define _PAN_UPPER_RADIUS (7.0 * [[UIScreen mainScreen] scale])

**#define _PAN_LOWER_RADIUS (7.0 * [[UIScreen mainScreen] scale])

**#define _PAN_UPPDER_WIDTH (_UPPER_WIDTH-_PAN_UPPER_RADIUS*2)

**#define _PAN_UPPER_HEIGHT (61.0 * [[UIScreen mainScreen] scale])

**#define _PAN_LOWER_WIDTH (_LOWER_WIDTH-_PAN_LOWER_RADIUS*2)

**#define _PAN_LOWER_HEIGHT (30.0 * [[UIScreen mainScreen] scale])

**#define _PAN_UL_WIDTH ((_UPPER_WIDTH-_LOWER_WIDTH)/2)

**#define _PAN_MIDDLE_HEIGHT (11.0 * [[UIScreen mainScreen] scale])

**#define _PAN_CURVE_SIZE (7.0 * [[UIScreen mainScreen] scale])

**#define _PADDING_X (15 * [[UIScreen mainScreen] scale])

**#define _PADDING_Y (10 * [[UIScreen mainScreen] scale])

**#define _WIDTH (_UPPER_WIDTH + _PADDING_X*2)

**#define _HEIGHT (_PAN_UPPER_HEIGHT + _PAN_MIDDLE_HEIGHT + _PAN_LOWER_HEIGHT + _PADDING_Y*2)

**#define _OFFSET_X -25 * [[UIScreen mainScreen] scale])

**#define _OFFSET_Y 59 * [[UIScreen mainScreen] scale])

- (UIImage *)createKeytopImageOfType:(ButtonType)type
{

CGMutablePathRef path = CGPathCreateMutable();


CGPoint p = CGPointMake(_PADDING_X, _PADDING_Y);
CGPoint p1 = CGPointZero;
CGPoint p2 = CGPointZero;

p.x += _PAN_UPPER_RADIUS;
CGPathMoveToPoint(path, NULL, p.x, p.y);

p.x += _PAN_UPPDER_WIDTH;
CGPathAddLineToPoint(path, NULL, p.x, p.y);

p.y += _PAN_UPPER_RADIUS;

CGPathAddArc(path, NULL,
             p.x, p.y,
             _PAN_UPPER_RADIUS,
             3.0*M_PI/2.0,
             4.0*M_PI/2.0,
             false);

p.x += _PAN_UPPER_RADIUS;

p.y += _PAN_UPPER_HEIGHT - _PAN_UPPER_RADIUS - _PAN_CURVE_SIZE;

CGPathAddLineToPoint(path, NULL, p.x, p.y);

p1 = CGPointMake(p.x, p.y + _PAN_CURVE_SIZE);

switch (type) 
{
    case LeftButton:
        p.x -= _PAN_UL_WIDTH*2;
        break;

    case InnerButton:
        p.x -= _PAN_UL_WIDTH;
        break;

    case RightButton:
        break;
}

p.y += _PAN_MIDDLE_HEIGHT + _PAN_CURVE_SIZE*2;
p2 = CGPointMake(p.x, p.y - _PAN_CURVE_SIZE);
CGPathAddCurveToPoint(path, NULL,
                      p1.x, p1.y,
                      p2.x, p2.y,
                      p.x, p.y);

p.y += _PAN_LOWER_HEIGHT - _PAN_CURVE_SIZE - _PAN_LOWER_RADIUS;
CGPathAddLineToPoint(path, NULL, p.x, p.y);

p.x -= _PAN_LOWER_RADIUS;
CGPathAddArc(path, NULL,
             p.x, p.y,
             _PAN_LOWER_RADIUS,
             4.0*M_PI/2.0,
             1.0*M_PI/2.0,
             false);

p.x -= _PAN_LOWER_WIDTH;
p.y += _PAN_LOWER_RADIUS;
CGPathAddLineToPoint(path, NULL, p.x, p.y);

p.y -= _PAN_LOWER_RADIUS;
CGPathAddArc(path, NULL,
             p.x, p.y,
             _PAN_LOWER_RADIUS,
             1.0*M_PI/2.0,
             2.0*M_PI/2.0,
             false);

p.x -= _PAN_LOWER_RADIUS;
p.y -= _PAN_LOWER_HEIGHT - _PAN_LOWER_RADIUS - _PAN_CURVE_SIZE;
CGPathAddLineToPoint(path, NULL, p.x, p.y);

p1 = CGPointMake(p.x, p.y - _PAN_CURVE_SIZE);

switch (kind) {
    case PKNumberPadViewImageLeft:
        break;

    case PKNumberPadViewImageInner:
        p.x -= _PAN_UL_WIDTH;
        break;

    case PKNumberPadViewImageRight:
        p.x -= _PAN_UL_WIDTH*2;
        break;
}

p.y -= _PAN_MIDDLE_HEIGHT + _PAN_CURVE_SIZE*2;
p2 = CGPointMake(p.x, p.y + _PAN_CURVE_SIZE);
CGPathAddCurveToPoint(path, NULL,
                      p1.x, p1.y,
                      p2.x, p2.y,
                      p.x, p.y);

p.y -= _PAN_UPPER_HEIGHT - _PAN_UPPER_RADIUS - _PAN_CURVE_SIZE;
CGPathAddLineToPoint(path, NULL, p.x, p.y);

p.x += _PAN_UPPER_RADIUS;
CGPathAddArc(path, NULL,
             p.x, p.y,
             _PAN_UPPER_RADIUS,
             2.0*M_PI/2.0,
             3.0*M_PI/2.0,
             false);
//----
CGContextRef context;
UIGraphicsBeginImageContext(CGSizeMake(_WIDTH,
                                       _HEIGHT));
context = UIGraphicsGetCurrentContext();
CGContextTranslateCTM(context, 0.0, _HEIGHT);
CGContextScaleCTM(context, 1.0, -1.0);

CGContextAddPath(context, path);
CGContextClip(context);

//----

// draw gradient
CGColorSpaceRef colorSpaceRef = CGColorSpaceCreateDeviceGray();
CGFloat components[] = {
    0.95f, 1.0f,
    0.85f, 1.0f,
    0.675f, 1.0f,
    0.8f, 1.0f};

size_t count = sizeof(components)/ (sizeof(CGFloat)* 2);

CGRect frame = CGPathGetBoundingBox(path);
CGPoint startPoint = frame.origin;
CGPoint endPoint = frame.origin;
endPoint.y = frame.origin.y + frame.size.height;

CGGradientRef gradientRef =
CGGradientCreateWithColorComponents(colorSpaceRef, components, NULL, count);

CGContextDrawLinearGradient(context,
                            gradientRef,
                            startPoint,
                            endPoint,
                            kCGGradientDrawsAfterEndLocation);

CGGradientRelease(gradientRef);
CGColorSpaceRelease(colorSpaceRef);

CGImageRef imageRef = CGBitmapContextCreateImage(context);
UIImage * image = [UIImage imageWithCGImage:imageRef scale:[[UIScreen mainScreen] scale] orientation:UIImageOrientationDown];
CGImageRelease(imageRef);

UIGraphicsEndImageContext();

CFRelease(path);

return image;
}