Page 1 of 1

Creating a custom keyboard for use in iPhone application Rate Topic: -----

#1 tony12095  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 14
  • View blog
  • Posts: 109
  • Joined: 23-October 12

Posted 15 October 2013 - 08:49 PM



Please note: This is for iOS 7 development.

Today, i am going to show you how to create an application that uses a custom keyboard to type a letter into a text field.

If you do not have Xcode, travel over to the Mac App Store and download the latest version of Xcode. Once you have that completed, open Xcode, and select the button that displays "Create a new Xcode Project." We are going to be creating a SingleViewApplication under the iOS Application section. Next, we will name our project "CustomKeyboardApplication" and fill the rest in. For the prefix, I am going to use CKA, but you can use anything you'd like.


The first thing we have to do is to open our "CKAViewController.h" file. We need to create what is called a "global variable" meaning that it is accessible throughout the entire program.
In order to do that, change the .h file to look like the following:
#import <UIKit/UIKit.h>

@interface CKAViewController : UIViewController {

      UITextField *textField;

}

@end



After that we open our "CKAViewController.m" file, and we are looking for the method, or function that is named - (void) viewDidLoad {}.

Within that method/function we are going to create all the items that will be displayed in our application once it is loaded into the view hierarchy and is present on the screen. So, for any kind of typing to occur, we first need to add a text field into the view..in order to do so, just type the following:

 
  // our global variable
  textField = [[UITextField alloc] initWithFrame:CGRectMake(10, 10, 300, 30)];

  // here we are adding it to the view
  [self.view addSubview:textField];   

  // we set it to blue since there will be no border to this text field. 
  textField.backgroundColor = [UIColor blueColor];  

  // this next line is a method that tells the textfield "perform click on event" when the app is all done loading
  [textField becomeFirstResponder];




Now that we are finished with the text field, we are going to need a way to create the custom keyboard. The way we do that is by creating a custom UIView object, or an object that is going to be created separately than the others. Let's name this custom view keyboardView.

 

 // creating the custom keyboard view
 // this was tested on an iPod touch 5, that is why our frame is set to:  0, 568, 320, 568/3
 // for iphone 4/4s users, all you have to do is change 568 to 480 and you're gonna get the same results
 UIView *keyboardView = [[UIView alloc] initWithFrame:CGRectMake(0, 568, 320, 568/3)];

 // just setting the background color of the custom view to blue so we can see it easier
 keyboardView.backgroundColor = [UIColor blueColor];

 // when dealing with UITextField, there is a property named inputView. You see this property every time you see the normal keyboard appear
 // so all we have to do is update it to be the custom UIView object we created above to show our custom keyboard
 textField.inputView = keyboardView;





Run the application, and you should see a blue box that is the textfield and when the app is done launching, should see another blue box appear from the bottom; that would be our custom keyboard appearing when the [textField becomeFirstResponder]; in action.

Now that we have our textfield and keyboard view, we are going to need buttons to show the text in the textfield. So, just under the code dealing with our keyboard view, let us create our button and create what is known as the "action" method.


    UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];
    [button setTitle:@"b" forState:UIControlStateNormal];
    button.frame = CGRectMake(200, 40, 100, 100);
    button.backgroundColor = [UIColor lightGrayColor];
    [button addTarget:self action:@selector(loadText) forControlEvents:UIControlEventTouchUpInside];
        
    // this just simply adds the button onto the keyboard view
    [keyboardView addSubview:button];



Let's go through all that, as it is very confusing when reading it for the first time.

1: UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem]; - this creates a new button that is going to be created for the use of the keyboard. It is better to do this under Apple's standards because it is better control of the button. UIButtonTypeSystem is the replacement of iOS 6's rounded rectangle button.

2: [button setTitle:@"b" forState:UIControlStateNormal]; - this means that as long as nothing is happening, the title will stay as "b"

3: button.frame = CGRectMake(200, 40, 100, 100); - this sets the location of where on the custom view it is going to be placed. We will see where we add it to the custom view in a bit

4: button.backgroundColor = [UIColor lightGrayColor]; - simply put, just sets the background color of the button to light gray

5: [button addTarget:self action:@selector(loadText) forControlEvents:UIControlEventTouchUpInside]; - this means that when the user presses down on the button, and once released, the button will type the text into the text field. Much like the Messages app uses the keyboard to type text.

6: [keyboardView addSubview:button]; - this is where we add the button onto the custom view


Now that we have everything set up, and ready to go, let us create the "loadText" method for the typing of the keyboard. In objective-c, the syntax is a bit different if you have not already seen. :)/>/>/>/>

We are going to create what is called an IBAction upon the button, all UIButton objects REQUIRES the use of IBAction in the signature. So, let us create our IBAction method below: Note: this method goes below the - (void) viewDidLoad; method

- (IBAction) loadText {
     // here we will set the text of the button pressed.
     textField.text = @"b";
}



Once you have finished, you should get this as your complete list of files:

CKAViewController.h:
@interface CKAViewController : UIViewController {

   UITextField *textField;

}
@end



CKAViewController.m:
- (void) viewDidLoad {
    // our global variable
    textField = [[UITextField alloc] initWithFrame:CGRectMake(10, 10, 300, 30)];

    // here we are adding it to the view
    [self.view addSubview:textField];   

    // we set it to blue since there will be no border to this text field. 
    textField.backgroundColor = [UIColor blueColor];  

    // this next line is a method that tells the textfield "perform click on event" when the app is all done loading
    [textField becomeFirstResponder];

    // creating the custom keyboard view
    // this was tested on an iPod touch 5, that is why there is  0, 568, 320, 568/3
    // for iphone 4/4s users, all you have to do is change 568 to 480 and you're gonna get the same results
    UIView *keyboardView = [[UIView alloc] initWithFrame:CGRectMake(0, 568, 320, 568/3)];

    // just setting the background color of the custom view to blue so we can see it easier
    keyboardView.backgroundColor = [UIColor blueColor];

    // when dealing with UITextField, there is a property named inputView. You see this property every time you see the normal keyboard appear
    // so all we have to do is update it to be the custom UIView object we created above to show our custom keyboard
    textField.inputView = keyboardView;
  
    UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];
    [button setTitle:@"b" forState:UIControlStateNormal];
    button.frame = CGRectMake(200, 40, 100, 100);
    button.backgroundColor = [UIColor lightGrayColor];
    [button addTarget:self action:@selector(loadText) forControlEvents:UIControlEventTouchUpInside];
  
    // this just simply adds the button onto the keyboard view
    [keyboardView addSubview:button];

}
 
- (IBAction) loadText {
     // here we will set the text of the button pressed.
     textField.text = @"b";
}






Even though we cannot create sentences, or even words, with this tutorial, it has shown you the creative and custom way of creating your very own keyboard for use in applications you create, use, and more.

I hope that this has helped everyone that reads it, and for more, leave me a comment, or whatever you wanna say. Thanks for taking the time to read my tutorial!




Is This A Good Question/Topic? 0
  • +

Page 1 of 1