Question

I'm creating a custom keyboard accessory view. I am currently about 95% done with it. The only thing I have left is to remove the 1px (or 2px?) line above the native iOS keyboard. Is there a way to add a border to the inputaccessoryview so I can use the same color as the keyboard gradient to eliminate the black bar?

Picture Example

If the boarder isn't possible what is the next most logical thing to do with my source code?

signInViewController.h

#import <UIKit/UIKit.h>
#import <AVFoundation/AVAudioPlayer.h>
#import <AudioToolbox/AudioToolbox.h>

@interface signInViewController : UIViewController <UITextFieldDelegate, UITextViewDelegate> {
AVAudioPlayer *sound;
UIButton *myButton;
UITextField *textFieldOne;
UIButton *gmailButton;
UIButton *meButton;
UIButton *yahooButton;
UIButton *outlookButton;
UIView *inputAccView;
UIButton *aolButton;
UIButton *milButton;
}


- (IBAction)playSwoosh:(id)sender;

- (IBAction)dismiss:(id)sender;

- (IBAction)toggleUIButtonImage:(id)sender;

- (IBAction)backgroundTouched:(id)sender;



@property (weak, nonatomic) IBOutlet UITextField *textFieldOne;
@property (weak, nonatomic) IBOutlet UITextField *textFieldTwo;
@property (nonatomic, retain) UIButton *gmailButton;
@property (nonatomic, retain) UIButton *meButton;
@property (nonatomic, retain) UIButton *yahooButton;
@property (nonatomic, retain) UIButton *outlookButton;
@property (nonatomic, retain) UIButton *aolButton;
@property (nonatomic, retain) UIButton *milButton;
@property (retain, nonatomic) UIButton *myButton;
@property (nonatomic, retain) UIView *inputAccView;

@end

and signInViewController.m

#import "signInViewController.h"
#import <QuartzCore/QuartzCore.h>

@interface signInViewController ()

@end

@implementation signInViewController

@synthesize myButton = _myButton;
@synthesize textFieldOne = _textFieldOne;
@synthesize textFieldTwo = _textFieldTwo;
@synthesize inputAccView;
@synthesize gmailButton;
@synthesize yahooButton;
@synthesize meButton;
@synthesize outlookButton;
@synthesize aolButton;
@synthesize milButton;

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if (self) {
}
return self;
}

- (void)gmailButtonTapped
{
self.textFieldOne.text = [self.textFieldOne.text stringByAppendingString:@"@gmail.com"];
}

- (void)meButtonTapped
{
self.textFieldOne.text = [self.textFieldOne.text stringByAppendingString:@"@me.com"];
}

- (void)outlookButtonTapped
{
self.textFieldOne.text = [self.textFieldOne.text stringByAppendingString:@"@outlook.com"];
}

- (void)yahooButtonTapped
{
self.textFieldOne.text = [self.textFieldOne.text stringByAppendingString:@"@yahoo.com"];
}

- (void)aolButtonTapped
{
self.textFieldOne.text = [self.textFieldOne.text stringByAppendingString:@"@aol.com"];
}

- (void)milButtonTapped
{
self.textFieldOne.text = [self.textFieldOne.text stringByAppendingString:@"@mail.mil"];
}


- (void)createInputAccessoryView {
inputAccView = [[UIView alloc] initWithFrame:CGRectMake(10.0, 0.0, 310.0, 40.0)];
[inputAccView setBackgroundColor:[UIColor colorWithRed:0.569 green:0.600 blue:0.643 alpha:1.000]];
[inputAccView setAlpha: 0.8];     

// GMAIL BUTTON ADDED

gmailButton = [UIButton buttonWithType: UIButtonTypeCustom];
[gmailButton setFrame:CGRectMake(9.5, 4.5, 60.0, 30.0)];
[gmailButton setBackgroundColor:[UIColor colorWithRed:(241/255.0) green:(242/255.0) blue:(242/255.0) alpha:1]];
[inputAccView addSubview:gmailButton];

gmailButton.layer.cornerRadius = 5;
gmailButton.layer.masksToBounds = NO;
gmailButton.layer.shadowColor = [UIColor blackColor].CGColor;
gmailButton.layer.shadowOpacity = 0.8;
gmailButton.layer.shadowRadius = 2;
gmailButton.layer.shadowOffset = CGSizeMake(1.0f, 1.0f);

[gmailButton setTitle:@"@Gmail" forState:UIControlStateNormal];
[gmailButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[gmailButton setTitleColor:[UIColor grayColor] forState:UIControlStateHighlighted];
gmailButton.titleLabel.font = [UIFont fontWithName:@"Helvetica Neue Bold" size:12];

[gmailButton addTarget:self action:@selector(gmailButtonTapped) forControlEvents:UIControlEventTouchUpInside];

// ME BUTTON ADDED

meButton = [UIButton buttonWithType: UIButtonTypeCustom];
[meButton setFrame:CGRectMake(73.5, 4.5, 40.0, 30.0)];
[meButton setBackgroundColor:[UIColor colorWithRed:(241/255.0) green:(242/255.0) blue:(242/255.0) alpha:1]];
[inputAccView addSubview:meButton];

meButton.layer.cornerRadius = 5;
meButton.layer.masksToBounds = NO;
meButton.layer.shadowColor = [UIColor blackColor].CGColor;
meButton.layer.shadowOpacity = 0.8;
meButton.layer.shadowRadius = 2;
meButton.layer.shadowOffset = CGSizeMake(1.0f, 1.0f);

[meButton setTitle:@"@Me" forState:UIControlStateNormal];
[meButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[meButton setTitleColor:[UIColor grayColor] forState:UIControlStateHighlighted];
meButton.titleLabel.font = [UIFont fontWithName:@"Helvetica Neue Bold" size:12];

[meButton addTarget:self action:@selector(meButtonTapped) forControlEvents:UIControlEventTouchUpInside];

// YAHOO BUTTON ADDED

yahooButton = [UIButton buttonWithType: UIButtonTypeCustom];
[yahooButton setFrame:CGRectMake(117.5, 4.5, 65.0, 30.0)];
[yahooButton setBackgroundColor:[UIColor colorWithRed:(241/255.0) green:(242/255.0) blue:(242/255.0) alpha:1]];
[inputAccView addSubview:yahooButton];

yahooButton.layer.cornerRadius = 5;
yahooButton.layer.masksToBounds = NO;
yahooButton.layer.shadowColor = [UIColor blackColor].CGColor;
yahooButton.layer.shadowOpacity = 0.8;
yahooButton.layer.shadowRadius = 2;
yahooButton.layer.shadowOffset = CGSizeMake(1.0f, 1.0f);

[yahooButton setTitle:@"@Yahoo" forState:UIControlStateNormal];
[yahooButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[yahooButton setTitleColor:[UIColor grayColor] forState:UIControlStateHighlighted];
yahooButton.titleLabel.font = [UIFont fontWithName:@"Helvetica Neue Bold" size:12];

[yahooButton addTarget:self action:@selector(yahooButtonTapped) forControlEvents:UIControlEventTouchUpInside];

// OUTLOOK BUTTON ADDED

outlookButton = [UIButton buttonWithType: UIButtonTypeCustom];
[outlookButton setFrame:CGRectMake(186.5, 4.5, 77.0, 30.0)];
[outlookButton setBackgroundColor:[UIColor colorWithRed:(241/255.0) green:(242/255.0) blue:(242/255.0) alpha:1]];
[inputAccView addSubview:outlookButton];

outlookButton.layer.cornerRadius = 5;
outlookButton.layer.masksToBounds = NO;
outlookButton.layer.shadowColor = [UIColor blackColor].CGColor;
outlookButton.layer.shadowOpacity = 0.8;
outlookButton.layer.shadowRadius = 2;
outlookButton.layer.shadowOffset = CGSizeMake(1.0f, 1.0f);

[outlookButton setTitle:@"@Outlook" forState:UIControlStateNormal];
[outlookButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[outlookButton setTitleColor:[UIColor grayColor] forState:UIControlStateHighlighted];
outlookButton.titleLabel.font = [UIFont fontWithName:@"Helvetica Neue Bold" size:12];

[outlookButton addTarget:self action:@selector(outlookButtonTapped) forControlEvents:UIControlEventTouchUpInside];

// AOL BUTTON ADDED

aolButton = [UIButton buttonWithType: UIButtonTypeCustom];
[aolButton setFrame:CGRectMake(267.5, 4.5, 41.0, 30.0)];
[aolButton setBackgroundColor:[UIColor colorWithRed:(241/255.0) green:(242/255.0) blue:(242/255.0) alpha:1]];
[inputAccView addSubview:aolButton];

aolButton.layer.cornerRadius = 5;
aolButton.layer.masksToBounds = NO;
aolButton.layer.shadowColor = [UIColor blackColor].CGColor;
aolButton.layer.shadowOpacity = 0.8;
aolButton.layer.shadowRadius = 2;
aolButton.layer.shadowOffset = CGSizeMake(1.0f, 1.0f);

[aolButton setTitle:@"@Aol" forState:UIControlStateNormal];
[aolButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[aolButton setTitleColor:[UIColor grayColor] forState:UIControlStateHighlighted];
aolButton.titleLabel.font = [UIFont fontWithName:@"Helvetica Neue Bold" size:12];

[aolButton addTarget:self action:@selector(aolButtonTapped) forControlEvents:UIControlEventTouchUpInside];

}

- (IBAction)backgroundTouched:(id)sender {
[_textFieldOne resignFirstResponder];
[_textFieldTwo resignFirstResponder];
}


- (void)textFieldDidBeginEditing:(UITextField *)textField {

if (textField == self.textFieldOne) {
    [self createInputAccessoryView];
    [textField setInputAccessoryView:inputAccView];
    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationDelegate:self];
    [UIView setAnimationDuration:0.5];
    [UIView setAnimationBeginsFromCurrentState:YES];
    self.view.frame = CGRectMake(self.view.frame.origin.x, (self.view.frame.origin.y - 95), self.view.frame.size.width, self.view.frame.size.height);
    [UIView commitAnimations];
} else if (textField == self.textFieldTwo) {
    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationDelegate:self];
    [UIView setAnimationDuration:0.5];
    [UIView setAnimationBeginsFromCurrentState:YES];
    self.view.frame = CGRectMake(self.view.frame.origin.x, (self.view.frame.origin.y - 95), self.view.frame.size.width, self.view.frame.size.height);
    [UIView commitAnimations];
}
}

- (void)textFieldDidEndEditing:(UITextField *)textField {
if (textField == self.textFieldOne) {
    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationDelegate:self];
    [UIView setAnimationDuration:0.5];
    [UIView setAnimationBeginsFromCurrentState:YES];
    self.view.frame = CGRectMake(self.view.frame.origin.x, (self.view.frame.origin.y + 95), self.view.frame.size.width, self.view.frame.size.height);
    [UIView commitAnimations];
} else if (textField == self.textFieldTwo) {
    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationDelegate:self];
    [UIView setAnimationDuration:0.5];
    [UIView setAnimationBeginsFromCurrentState:YES];
    self.view.frame = CGRectMake(self.view.frame.origin.x, (self.view.frame.origin.y + 95), self.view.frame.size.width, self.view.frame.size.height);
    [UIView commitAnimations];
}
}


- (BOOL)textFieldShouldReturn:(UITextField *)textField {
NSInteger nextTag = textField.tag + 1;
UIResponder* nextResponder = [textField.superview viewWithTag:nextTag];
if (nextResponder) {
    [nextResponder becomeFirstResponder];
} else {
    [textField resignFirstResponder];
}
return  NO;
}
Was it helpful?

Solution

Well, after playing around with it, I've decided not to add a boarder because all it did was include an inside boarder. I simply just drew an object to cover it up. But I did find a great resource for those still wondering how to do it! This is another method that would be great for implementation. For you new developers that just want a quick fix, someone did offer for me to simply create another button that was the length of the screen and 3 px high to cover it up, but we all know that s the wrong answer. Just a tip for any newbies

Extend iOS Keyboard Gradient

OTHER TIPS

The KeyboardAccessoryView has a special property hideBorder according to the docs at https://github.com/ardaogulcan/react-native-keyboard-accessory I suppose InputAccessoryView has the same property.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top