How to make popup like keyboard characters in iOS8 custom keyboard?

Question

I want to create popup in iOS8 custom keyboard as shown below image.

Some code are working but can't access outer window of keyboard and occures issue as shown in below image-2

Keri

Answer 1

This what i have done in my custom Keyboard its working

//adding pop up when character is tapped
- (void)addPopupToButton:(UIButton *)button
{


    CGRect frame,frame1;
    if(self.view.frame.size.width == 320)
    {
        //Keyboard is in Portrait
        frame = CGRectMake(0, -25, 28, 43);
        frame1=CGRectMake(0, 0, 28, 43);

    }
    else{
        //Keyboard is in Landscape
        frame = CGRectMake(3, -25, 35, 43);
        frame1=CGRectMake(0, 10, 35, 43);

    }
   //create pop up view
    UIView *popUp=[[UIView alloc]initWithFrame:frame];

    //create a label to add to pop up view
    UILabel *text = [[UILabel alloc] init];

    //set frame for the label and set label title
    [text setFrame:frame1];
    [text setText:button.titleLabel.text];
    text.textAlignment=NSTextAlignmentCenter;
    [text setFont:[UIFont boldSystemFontOfSize:30]];
    text.backgroundColor=[UIColor whiteColor];

    //add label as popup view's subview
    [popUp addSubview:text];

    //add pop up view as button's subview
    [button addSubview:popUp];

}


//remove Pop up view
-(void)endPopUpForButton:(UIButton*)button
{
    if ([button subviews].count > 1)
    {
        [[[button subviews] objectAtIndex:1] removeFromSuperview];
    }
}

Paratrooper

Hi, codeIgnitor can we add popup outside 320*216 frame? As I want to make bigger popup which goes outside this frame and the issue is that outer part of view is cropped down as shown in above image. – Keri

@ScorpianAlive, I had a same problem! for now i have set it to 320.0 for time being.. Will be working for a bigger popup. – Paratrooper

@codeIgniter, I was asking can I make keyboard height bigger than 216? – Keri

@ScorpianAlive, Its possible to change the height of your custom keyboard by adding the NSLayoutconstraint to the view refer the code in this document developer.apple.com/library/prerelease/ios/documentation/… but not working in xcode beta 3 and 4 – Paratrooper

@Paratrooper Thanks, Your link worked for custom height But, How to handle height changes for portrait- landscape orientations? As there remained same height on landscape, I tried to applied same code to reduce height but unable to handle orientation changes for keyboard height. – Revelationist

@VijayHirpara, You mean u tried the code inside the willAnimateRotationToInterfaceOrientation method what was the result??? – Paratrooper

Answer 2

From the Apple App Extension Programming guide:

Finally, it is not possible to display key artwork above the top edge of a custom keyboard’s primary view, as the system keyboard does on iPhone when you tap and hold a key in the top row.

So it seems like you can't add pop-up outside the keyboard frame, so codelgnitor's answer is the best you can do.

Anathema

Can we do any custom code to achieve same functioanlity. As I found code for popup to show for single character, it works fine but I need to show multiple characters , too for some keys. – Revelationist

You can put a hidden keyboard keys row on your keyboard, then make it visible when user do a long press gesture on a key. Then hide it again when user press any key on that keyboard row. – Anathema