Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to extend keyboard gradient on iPhone?

I see that few apps are extending keyboard but I would like to know how they do it.

Here are 2 examples.

Textastic & Prompt

Now I know that I can add inputAccessoryView to UITextView but it still has small thin line that separates keyboard from UIToolbar like on image bellow.

enter image description here

How they do it? Extending UIWindow that holds keyboard or in some other way?

Update 1 with answer:

So I have used solution that Tyraz wrote.

  1. Subclass UIToolbar
  2. Instead of image I have used UIView with background color same as the finishing color of the keyboard gradient and with UIViewAutoResizingMaskFlexibleWidth so that it covers keyboard when rotated, with height of 3 pixels

Here is the code for the subclassed UIToolbar

- (void)didMoveToSuperview {

    [self.separatorHideView removeFromSuperview];

    CGRect seperatorRect = CGRectMake(self.frame.origin.x,
                                      self.frame.size.height,
                                      self.frame.size.width,
                                      3.0);

    self.separatorHideView = [[UIView alloc]];
    self.separatorHideView.backgroundColor = [UIColor colorWithRed:0.569 green:0.600 blue:0.643 alpha:1.000];
    self.separatorHideView.autoresizingMask = UIViewAutoresizingFlexibleWidth;
    [self addSubview:self.separatorHideView];
}

Update 2: Here is code how I'm adding it to UITextView and what color I'm using for tint.

I'm adding it to the UITextView in viewDidLoad with following code

    CustomToolbar *accessoryToolbar = [[CustomToolbar alloc] initWithFrame:CGRectMake(0, 0, 320, 38)];
    accessoryToolbar.tintColor = [UIColor colorWithRed:0.569 green:0.600 blue:0.643 alpha:1.000];
    editor.inputAccessoryView = accessoryToolbar;  

And this is how it looks like with solution applied to it

enter image description here

like image 657
Amar Kulo Avatar asked Oct 28 '12 09:10

Amar Kulo


2 Answers

On iOS 7 you can create an inputAccessoryView to match keyboard style easily:

[[UIInputView alloc] initWithFrame:<#frame#> 
                    inputViewStyle:UIInputViewStyleKeyboard];
like image 89
djromero Avatar answered Oct 16 '22 23:10

djromero


I would try to use a inputAccessoryView plus a second view that sits on top of the separator line and "fills the gap".

Once the inputAccessoryView is added to the keyboard (overwrite the didMoveToSuperview method in your accessory UIView subclass to get notified when this happens), add it to the inputAccessoryView's superview.

Should be something like that in your accessory UIView subclass:

- (void)didMoveToSuperview {
  [self.separatorHideView removeFromSuperview];

  CGRect seperatorRect = CGRectMake(self.frame.origin.x, 
                                    self.frame.origin.y + self.frame.size.height,
                                    self.frame.size.width,
                                    2.0);

  UIImage *gapGradient = [UIImage imageNamed:@"GapGradient"];
  self.separatorHideView = [[UIImageView alloc]initWithImage:gapGradient];
  self.separatorHideView.frame = seperatorRect;

  [self.superview addSubview:self.separatorHideView];
}

I would also overwrite setFrame in your accessory UIView subclass to update the frame of the gapView in case the frame of the keyboard is changed.

like image 4
Thyraz Avatar answered Oct 16 '22 23:10

Thyraz