Custom Input View For System Keyboard

ios allows apps to display custom input views for the system keyboard. It also enables apps to have an accessory view above the system keyboard or custom input view. Additionally, it enables apps to play key-click sounds when users tap on a controls of an input view or input accessory view.
We can display UIPicker, Color Picker and any other custom view instead of system keyboard. I am going to display a UIPickerView for a keyboard.

Here a sample code for display custom input view for the system keyboard.

First create a sub class of UIView, (named "CustomFontSelectionView").

#import <UIKit/UIKit.h>
@interface CustomFontSelectionView : UIView

#import "CustomFontSelectionView.h"
@implementation CustomFontSelectionView

 Now add a UIPicker of Subview, 
 first declare a instance of UIPicker class in file CustomFontSelectionView.h  file
 and a Array  for containing all objects.

@interface CustomFontSelectionView : UIView<UIPickerViewDelegate, UIPickerViewDataSource>
{
    UIPickerView *pickerView;
    NSArray *fontListArray;
}

add below code in  CustomFontSelectionView.m

-(instancetype) initWithFrame:(CGRect)frame{
    self = [super initWithFrame:frame];
    if (self) {
        [self initialize];
    }
    return self;
}
-(void) initialize{
    fontListArray = @[[NSNumber numberWithInteger:10],[NSNumber numberWithInteger:11],[NSNumber numberWithInteger:12],[NSNumber numberWithInteger:13],[NSNumber numberWithInteger:14],[NSNumber numberWithInteger:15],[NSNumber numberWithInteger:16],[NSNumber numberWithInteger:17],[NSNumber numberWithInteger:18],[NSNumber numberWithInteger:19],[NSNumber numberWithInteger:20],[NSNumber numberWithInteger:21],[NSNumber numberWithInteger:22],[NSNumber numberWithInteger:23],[NSNumber numberWithInteger:24],[NSNumber numberWithInteger:25]];
    pickerView = [[UIPickerView alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
    pickerView.delegate = self;
    pickerView.dataSource = self;
    [self addSubview:pickerView];
}
#pragma mark -
#pragma mark Picker View DataSource
-(NSInteger) pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component{
    return fontListArray.count;
}
- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView{
    return 1;
}
#pragma mark Picker View Delegate
- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component{
    return [NSString stringWithFormat:@"%@",[fontListArray objectAtIndex:row]];
}
- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component{
    //send delegate to update text with selected font size
    if (self.fontDelegate && [self.fontDelegate respondsToSelector:@selector(didSelectFontSize:)]) {
        [self.fontDelegate didSelectFontSize:[fontListArray objectAtIndex:row]];
    }
} 



Now import Newly created Class to ViewController class
#import "CustomFontSelectionView.h"

and declare a instance variable for Class object
CustomFontSelectionView *customFontSelectionView; (a variable or instance always declare inside Interface Section)

Now go to ViewController and add a UITextField(either by code or by Xib, we can use any way).
and declare a instance of UITextField inside ViewController.h class.
In case of adding a UITextField using Xib connect IBoutlet with declared UITextField.


Add UITextField by code 
Declare a UItextField instance in ".h" file (named textField).
  
@property (nonatomic, strong)  UITextField *textField;

In ViewController.h
 Add following  code to ".m" file
Inside viewDidload method add code for display  Custom view.
self.textField = [[UITextFiled alloc]initWithFrame:CGRectMake(0, 0, self.view.bound.size.frame, 150)];
 [self.view addSubView: self.textField];

Now initialize Custom View

#pragma mark -
-(void) displayFontSelectionView{
    [self.textField resignFirstResponder];
    if (!customFontSelectionView) {
        customFontSelectionView = [[CustomFontSelectionView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, height)];
    }
    customFontSelectionView.fontDelegate = self;
    self.textField.inputView = customFontSelectionView;
    [self.textField becomeFirstResponder];
}

Add following piece of code just below  " [self.view addSubView: self.textField];"

self.textField.inputView = customColorSelectionView;

We can also add a Input Accessory view with a keyboard(Appear just above keyboard) in the same way
Add a UIToolbar either using Xib or code and add as a input accessory view.

self.textField..inputAccessoryView = self.toolBar; 


Click here for complete project.