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

I don't think you are allowed to display anything outside of the keyboard view; it will get automatically clipped.

https://developer.apple.com/library/ios/documentation/General/Conceptual/ExtensibilityPG/Keyboard.html

Answer 2

//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;
}

Answer 3

@Ben is correct, you're not allowed to display anything outside the keyboard window.

If you examine the view hierarchy you can see that the UIWindow holding the keyboard extension doesn't extend above the keyboard, so even if you turn off clipsToBounds in the entire view hierarchy up to the window, you still can't display outside the window.