How do I go about creating a custom keyboard/keypad that will show up when some one taps on a UITextField? I would like to display a keypad with a, b, c, 1, 2, 3 and an enter button, nothing else. The keypad should work and behave like the standard keyboard does (in behavior) but it will definitely look different.
I can't find any example and the best I've found is to filter characters with existing keyboard which is an unacceptable solution.
I think you're looking for the "Text, Web, and Editing Programming Guide for iOS"
The UIKit framework includes support for custom input views and input accessory views. Your application can substitute its own input view for the system keyboard when users edit text or other forms of data in a view. For example, an application could use a custom input view to enter characters from a runic alphabet. You may also attach an input accessory view to the system keyboard or to a custom input view; this accessory view runs along the top of the main input view and can contain, for example, controls that affect the text in some way or labels that display some information about the text.
To get this feature if your application is using UITextView and UITextField objects for text editing, simply assign custom views to the inputView and inputAccessoryView properties. Those custom views are shown when the text object becomes first responder...
This might serve as a good introduction: customizing the iOS keyboard
You can use Custom-iOS-Keyboards library on Github.
First of all create a view (I did it in a separate nib file and loaded it this way):
NSArray *views = [[NSBundle mainBundle] loadNibNamed:#"ReducedNumericKeyboardView"
owner:self
options:nil];
keyBView = (ReducedNumericKeyboardView*)[views objectAtIndex:0];
After it, I set it as input view for the text field where i want to use it (and actually, this is the short answer to your question ;) ):
[self.propertyEditor setInputView:keyBView];
When clicking into the field i do scroll the view pup (if necessary) to not cover the field:
CGRect textFieldRect = [self.tableViewController.view.window convertRect:propertyEditor.bounds fromView:propertyEditor];
CGRect viewRect = [self.tableViewController.view.window convertRect:self.tableViewController.view.bounds fromView:self.tableViewController.view];
CGFloat midLine = textFieldRect.origin.y+.5*textFieldRect.size.height;
CGFloat numerator = midLine - viewRect.origin.y - MINIMUM_SCROLL_FRACTION*viewRect.size.height;
CGFloat denominator = (MAXIMUM_SCROLL_FRACTION - MINIMUM_SCROLL_FRACTION)*viewRect.size.height;
CGFloat heightFraction = MIN(1, MAX(0, numerator/denominator));
animateDistance = floor(PORTRAIT_USER_INPUT_VIEW_HEIGHT*heightFraction);
CGRect viewFrame = self.tableViewController.view.frame;
viewFrame.origin.y -= animateDistance;
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationBeginsFromCurrentState:YES];
[UIView setAnimationDuration:USER_INPUT_ANIMATION_DURATION];
[self.tableViewController.view setFrame:viewFrame];
[UIView commitAnimations];
When editing is finished, I do scroll the view down:
CGRect viewFrame = self.tableViewController.view.frame;
viewFrame.origin.y += animateDistance;
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationBeginsFromCurrentState:YES];
[UIView setAnimationDuration:USER_INPUT_ANIMATION_DURATION];
[self.tableViewController.view setFrame:viewFrame];
[UIView commitAnimations];
The constraints I use are set as follows:
static const CGFloat USER_INPUT_ANIMATION_DURATION = 0.3;
static const CGFloat PORTRAIT_USER_INPUT_VIEW_HEIGHT = 180;
static const CGFloat MINIMUM_SCROLL_FRACTION = 0.1;
static const CGFloat MAXIMUM_SCROLL_FRACTION = 0.2;
You want to set the value for
inputView
on your UITextField. You will need to fully implement a new keyboard or input mechanism in the view you provide.
Alternately,
inputAccessoryView
can be used to add a small amount of functionality. The view will be placed above the system keyboard and will arrive and be dismissed with it.
Unfortunately, the "Text, Web, and Editing Programming Guide for iOS" referenced above doesn't give any information on what to do with the character once you press a key. This is by far the hard part when implementing a keyboard in iOS.
I have created a full working example of a hex numberpad which can easily be customized with like you need.
Specific details are at my other answer on this subject: https://stackoverflow.com/a/13351686/937822
Related
I have a screen within an iPhone app that consist of a UITextView. This text view is contained within a UIScrollView. The purpose of the screen is for the user to type in text, and to optionally attach an image to what he is writing. Therefore, the screen also has a UIToolbar with a camera button at the bottom of the screen. The structure of the screen is as follows:
-View
--UIScrollView
---UITextView
--UIToolbar
---UIButton
When the user navigates to this screen, the viewDidAppear method assigns first responder to the uitextview element, so the keyboard shows up, which hides the toolbar and the camera button.
I would like the entire toolbar to re-draw itself right above the keyboard, and to position itself again at the bottom of the screen when the keyboard hides.
I have found related posts on SO (like this one). However, such methods introduce undesired behaviours. For example, implementing the solution in the article above, the toolbar does move with the keyboard, but the UIScrollView gets its frame.origin.y coordinate shifted way above the top of the screen, so it's impossible for the user to see what he is typing.
I have also tried to reset the frame of the toolbar, by adding it as an IBOutlet and using cgrectmake to reposition it. However, after several tries, the toolbar remains stuck at the bottom of the screen and hidden by the keyboard:
- (void) liftMainViewWhenKeybordAppears:(NSNotification*)aNotification{
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDelegate:self];
[UIView setAnimationDuration:0.3];
[UIView setAnimationCurve:<#(UIViewAnimationCurve)#>]
CGRect frame = self.keyboardToolbar.frame;
frame.origin.y = self.keyboardToolbar.frame.origin.y - 280;
self.keyboardToolbar.frame = frame;
[UIView commitAnimations];
}
I have tried several iterations similar to the code above and they all fail at repositioning the toolbar.
So in short, what is the right way to float a toolbar right on top of a keyboard in a screen whose space is completely utilised by a uitextview element?
Thanks to RoryMcKinnel for the pointer. As the article referenced is in Swift, I thought I might paste the solution that worked for be on ObjC
- (void)keyboardWillShowNotification:(NSNotification *)notification{
NSDictionary *userInfo = notification.userInfo;
double animationDuration = [userInfo[UIKeyboardAnimationDurationUserInfoKey] doubleValue];
CGRect keyboardEndFrame = [userInfo[UIKeyboardFrameEndUserInfoKey] CGRectValue];
CGRect convertedKeyboardFrame = [self.view convertRect:keyboardEndFrame fromView:self.view.window];
UIViewAnimationOptions rawAnimationCurve = (UIViewAnimationOptions)[userInfo[UIKeyboardAnimationCurveUserInfoKey] unsignedIntegerValue] << 16;
_toolBarBottomGuide.constant = CGRectGetMaxY(self.view.bounds) - CGRectGetMinY(convertedKeyboardFrame);
[UIView animateWithDuration:animationDuration delay:0.0 options:rawAnimationCurve animations:^{
[self.view layoutIfNeeded];
} completion:nil];
}
Bear in mind, this code did make the toolbar move as required, but the toolbar was not visible at all. It turned out that it was being hidden behind the UIScrollView. This was easily fixed by shifting the order between the scroll view and the toolbar element in the IB hierarchy.
The method above works for the keyboardWillShow event. You'll need to add the corresponding one for when the keyboard hides, like this:
- (void)keyboardWillHideNotification:(NSNotification *)notification{
NSDictionary *userInfo = notification.userInfo;
double animationDuration = [userInfo[UIKeyboardAnimationDurationUserInfoKey] doubleValue];
CGRect keyboardEndFrame = [userInfo[UIKeyboardFrameEndUserInfoKey] CGRectValue];
UIViewAnimationOptions rawAnimationCurve = (UIViewAnimationOptions)[userInfo[UIKeyboardAnimationCurveUserInfoKey] unsignedIntegerValue] << 16;
_toolBarBottomGuide.constant = 0.0f;
[UIView animateWithDuration:animationDuration delay:0.0 options:rawAnimationCurve animations:^{
[self.view layoutIfNeeded];
} completion:nil];
}
I followed the instructions here to adjust my view with the iOS keyboard.
https://developer.apple.com/library/ios/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html
This doesn't work with a hardware keyboard. When a text view is active the iOS keyboard is not shown but the example code still returns the full height of the keyboard. In my case just the input accessory view is shown on the screen.
How do I detect this case and adjust my view for only the input accessory view?
You can intersect the keyboard's frame with the current window as in my answer here https://stackoverflow.com/a/36553555/1049134.
Came across the same issue.
Looks like the iOS keyboard is completely instantiated and just moved out of the view partial when a hardware keyboard is attached. Therefore the size of the keyboard is right. It is just not completely shown.
After examining the notifications I solved it with calculating the visible keyboard height myself.
In my example I am listening to UIKeyboardWillShowNotification, UIKeyboardWillChangeFrameNotification and UIKeyboardWillHideNotification.
-(void)keyboardMessage:(NSNotification*)notification {
NSDictionary *userInfo = notification.userInfo;
CGFloat duration = [userInfo[#"UIKeyboardAnimationDurationUserInfoKey"] floatValue];
NSValue *value = userInfo[#"UIKeyboardFrameEndUserInfoKey"];
CGRect frame = [value CGRectValue];
[UIView animateWithDuration:duration animations:^{
self.lowerContraint.constant = self.view.frame.size.height - frame.origin.y;;
[self.view needsUpdateConstraints];
[self.view layoutIfNeeded];
}];
}
This code was working beautifully in ios 7. However, with ios8 and xcode 6.0.1 it has stopped working. When a user clicked on a text field to enter text, the field animated to float just above the top of the keyboard so they can see what they are typing. Any thoughts on why this fails to work now. I can see it start to animate for a split second, but then the textfield disappears. Frustrating.
- (void)textFieldDidBeginEditing:(UITextField *)textField {
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDelegate:self];
[UIView setAnimationDuration:0.4];
[UIView setAnimationBeginsFromCurrentState:YES];
textField.frame = CGRectMake(textField.frame.origin.x, (textField.frame.origin.y - 200.0),
textField.frame.size.width, textField.frame.size.height);
_searchBtn.frame = CGRectMake(_searchBtn.frame.origin.x, (_searchBtn.frame.origin.y - 200.0),
_searchBtn.frame.size.width, _searchBtn.frame.size.height);
[UIView commitAnimations];
textField.alpha = .75;
}
The problem is that your code adjusts your TextField's position by a fixed value of 200.0
This was probably great for iOS7 but things have changed in iOS8 for two reasons:
The system keyboard has an additional view for showing predicted words while typing
Custom keyboards can be as high as the developer chooses
You need to change your approach move moving the location of your TextField whenever the keyboard is shown or hidden using the following two notifications:
UIKeyboardWillShowNotification
UIKeyboardWillHideNotification
In the following thread I explain the problems that can arise and how to properly move your views around as the keyboard opens:
can't get correct value of keyboard height in iOS8
EDIT 1:
Assuming the textbox has an outlet called "yourTextBox", the code to modify the position of your textbox could look something like:
CGFloat screenHeight = [[UIScreen mainScreen] bounds].size.height;
CGFloat keyboardHeight = <<calculated keyboard height as previously discussed>>;
CGFloat textBoxHeight = _yourTextBox.frame.size.height;
// Change the current frame of your textbox in order to reposition it
CGFrame textBoxFrame = _yourTextBox.frame;
textBoxFrame.origin.y = screenHeight - keyboardHeight - textBoxHeight;
_yourTextBox.frame = textBoxFrame;
Note: If you are using AutoLayout constraints to position your subviews you will need to avoid modifying the frame and change your constraints instead. Post if you are having problems in this area because it can get tricky.
In our question module I need to resize and animate UIView when user clicked answers which are represented by tableview. I have read some related questions and applied their solution but none of them worked for me.
The problem is uiview doesn't appear at first click but if user click same answers 2 times or more it appears because in second click on same answers does not change the frame.
so basically if the feedback of answer change, height of the uiview gonna be recalculated and I guess it is blocking animation.
my view hierarchy:
http://i.imgur.com/Oho6Hob.png
method which changes the constraints of views and textview:
self.feedbackLabelWrapperHeight.constant = height + 45;
self.feedbackViewHeight.constant = height + 45 + 12;
int y = height;
[self.feedbackView setFrame:CGRectMake(50,self.scrollView.frame.size.height + self.scrollView.frame.origin.y -(y+40),self.feedbackView.frame.size.width,(y+40))];
animation method:
[UIView beginAnimations:#"feedback" context:NULL];
[UIView setAnimationBeginsFromCurrentState:YES];
[UIView setAnimationDuration:0.2];
[UIView setAnimationDelay:delay];
[self.view layoutIfNeeded];
[UIView commitAnimations];
self.isFeedbackViewVisiable = YES;
I'm calling these two methods in didSelectRowAtIndexPath method in these order:
and labelHeightOfResponse parameter is the calculated height of related label or textview
[self setFeedbackConstraintHeight:labelHeightOfResponse];
[self feedbackViewAppearAnimationWithDelay:0.2 yPosition:labelHeightOfResponse];
I would really appreciate help here.
Thanks!
after spending a week I've added a constraint which does nothing. I don't know why but it solved animation blocking furthermore it worked perfectly even I deleted layoutIfNeeded.
I would prefer first download the project from below link and then continue with question (only 36kb)
Download Link
At start what I have is like below.
When I click My Office button, I am calling action actionSeenButton which will print NSLog(#"actionSeenButton");
- (IBAction)actionSeenButton:(id)sender {
NSLog(#"actionSeenButton");
}
This works perfect.
When I click, Show hidden button, I am sliding view by 100 and showing the image and buttons that I have at the top, as shown in below image
Code used is
- (IBAction)showHiddenButton:(id)sender {
CGAffineTransform translation = CGAffineTransformIdentity;
translation = CGAffineTransformMakeTranslation(0, 100);
[UIView beginAnimations:nil context:nil];
self.view.transform = translation;
[UIView commitAnimations];
}
When I click this button, I am calling action actionHiddenButton which will print NSLog(#"actionHiddenButton");
- (IBAction)actionHiddenButton:(id)sender {
NSLog(#"actionHiddenButton");
}
BUT the problem is, when I click the new button that I see, action is not getting called.
Any idea why this is happening?
Note
When I move the top hidden button from y=-70 to y=170, action is getting called.
Sample project can be downloaded from here
What I wanted to implement is, showing three buttons (as menu) on the top in one line by moving view down.
verify that your button is not behind the frame of another view. even if the button is visable, if there is something covering it up it wont work. i don't have access to xcode at the moment but my guess is your view "stack" is prohibiting you from interacting with the button. a button is esentually a uiview and you can do all the same animations to buttons and labels that you can with views. your best bet is to leave the view in the background alone and just move your buttons. since your "hidden" button isn't part of your main "view" hiarchy thats where your problem is.
upon further investigation, your problem is related to auto-layout and making sure your button object stays in the view hierarchy. if you turn off auto-layout you will see where the problem is. when you animate the main view down the "hidden" button is off of the view and there for inactive. the easiest solution is to just animate the buttons. the next best solution closest to what you have is to add another view onto your "main view" and then put the buttons into that view. also why do you have that background image twice? why not just set the background color of your view to that same yellow?
I downloaded your project and it seems the translation you're making for self.view. So the actionHiddenButton is not in the frame.Its better to have the controls you want to animate in the separate view.
If you want to see the problem, after your view get transformed set clipsToBounds to YES. Like
self.view.transform = translation;
self.view.clipsToBounds = YES;
Yipeee!!! Below is how I did.
.h
Added new variable.
#property (retain, nonatomic) NSString *hideStatus;
.m
-(void) viewDidAppear:(BOOL)animated {
NSLog(#"viewDidAppear");
CGAffineTransform translation = CGAffineTransformIdentity;
translation = CGAffineTransformMakeTranslation(0, -100);
self.view.transform = translation;
self.view.clipsToBounds = YES;
[UIView commitAnimations];
self.view.frame = CGRectMake(0,-80,320,560);
hideStatus = #"hidden";
}
- (IBAction)showHiddenButton:(id)sender {
NSLog(#"hideStatus===%#", hideStatus);
CGAffineTransform translation = CGAffineTransformIdentity;
if ([hideStatus isEqualToString:#"hidden"]) {
translation = CGAffineTransformMakeTranslation(0, 0);
hideStatus = #"shown";
} else {
translation = CGAffineTransformMakeTranslation(0, -100);
hideStatus = #"hidden";
}
[UIView beginAnimations:nil context:nil];
self.view.transform = translation;
self.view.clipsToBounds = YES;
[UIView commitAnimations];
}
Attached is the sample project. You can download from here.