4

I've make a custom keyboard for a UITextField, consisting of 18 UIButtons. It's a UIView which is set as the text field's inputView.

The buttons are created in the initWithFrame: method of the UIView using the code

UIImage* buttonImage =[[UIImage imageNamed:@"keyboard-button-background.png"] stretchableImageWithLeftCapWidth:1.0 topCapHeight:79.0];
UIImage* buttonPressedImage =[[UIImage imageNamed:@"keyboard-button-pressed-background.png"] stretchableImageWithLeftCapWidth:1.0 topCapHeight:79.0];

UIButton* button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setTitle:title forState:UIControlStateNormal];
[button setBackgroundImage:buttonImage forState:UIControlStateNormal];
[button setBackgroundImage:buttonPressedImage forState:UIControlStateHighlighted];

button.frame = CGRectMake(xPosition, yPosition, buttonWidth, buttonHeight);

Once the button has been pressed, that button is then set as enabled = NO. The background stretches perfectly while at least one of the buttons is enabled. If all the buttons are disabled, and the UITextfield resignsFirstResponder and then the UITextField becomes First Responder again, the buttons appear but the background image no longer seems to stretch (at least not in the vertical direction, horizontal seems fine).

I'm not really sure where to start looking for the solution. My guess is that's in the way the custom keyboard is drawing the subviews, but I'm not sure.

Could this be fixed by setting the background image in layoutSubviews, or drawRect: or something like that? The fact that the horizontal stretch works fine makes me wonder if the frame of the UIButton isn't right as it's being drawn.

EDIT The cells on the far left are just labels, the cells on the right with numbers are UITextfields and have the custom keyboard

How the keyboard should look: How the keyboard should look

How the keyboard actually looks once resigned first responder on cell 3, then gave 1 first responder (all keys disabled), then gave 4 first responder: How the keyboard actually looks once resigned first responder on cell 3, then gave 1 first responder (all keys disabled), then gave 4 first responder

3
  • Can you include some screenshots? It's a bit hard to picture what this is supposed to look like.
    – jrturton
    Nov 15, 2012 at 11:53
  • Where are you setting your rects?
    – Luke
    Nov 22, 2012 at 19:44
  • I've added the line, I set the frame of the button in initWithFrame:
    – Josh
    Nov 23, 2012 at 9:31

2 Answers 2

2
+50

To handle different iOS APIs I did a category for UIImage.

@implementation UIImage (SPResizableImage)

- (UIImage *)spResizableImageWithCapInsets:(UIEdgeInsets)edge
{
    UIImage * resizableImage = nil;

    if ([self respondsToSelector:@selector(resizableImageWithCapInsets:)]) // iOS 5
    {
        resizableImage = [self resizableImageWithCapInsets:edge];
    }
    else
    {
        resizableImage = [self stretchableImageWithLeftCapWidth:edge.left
                                                   topCapHeight:edge.top];
    }

    return resizableImage;
}

@end
1
  • Well that seems to work! It's strange that stretchableImageWithLeftCapWidth:topCapHeight: doesn't quite work in some cases, but there we go! Thanks for the help.
    – Josh
    Nov 23, 2012 at 15:25
0

What is the size of the background image you're using?

Anyway stretchableImageWithLeftCapWidth:topCapHeight: is depreceted since iOS 5. Try to use resizableImageWithCapInsets: instead.

3
  • The image size is 9 x 80 and the buttons on this particular keyboard are 53 x 65. I have a couple of different keyboard layouts but they use the same image. The funny thing is, the horizontal stretch works, but the vertical seems to not work.
    – Josh
    Nov 23, 2012 at 9:52
  • Oh and I have to support iOS 4 so I need to use stretchableImage... if at all possible
    – Josh
    Nov 23, 2012 at 9:55
  • I think the problem is on the top cap value. I had a similar problem with stretched images.
    – DrAL3X
    Nov 23, 2012 at 13:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.