I want to adjust the height of a textview when the keyboard appears. In iOS 7 this can be done by adjusting the NSLayoutConstraint between the textview and the bottomLayoutGuide of the view controller.
That works fine with the code below except for one detail. During the animation the textview runs ahead of the keyboard and a wide gap appears. Similar during the keyboardWillHide method.
The cause for this "bug" is probably because the keyboard starts from the very bottom of the screen while the textview starts higher up due to the height of the toolbar.
Any suggestions on how to fix this?
-(void) keyboardWillShow:(NSNotification *) notification
{
//update constraints
CGRect keyboardFrame = [[[notification userInfo] valueForKey:UIKeyboardFrameEndUserInfoKey] CGRectValue];
CGRect convertedKeyboardFrame = [[self view] convertRect:keyboardFrame
fromView:nil];
CGRect toolbarFrame = [[[self navigationController] toolbar] frame];
CGRect convertedToolbarFrame = [[self view] convertRect:toolbarFrame
fromView:nil];
CGFloat toolbarAdjustment = (UIInterfaceOrientationIsPortrait([self interfaceOrientation])) ? CGRectGetHeight(convertedToolbarFrame) :CGRectGetWidth(convertedToolbarFrame);
[[_textView bottomSpaceConstraint] setConstant:CGRectGetHeight(convertedKeyboardFrame) - toolbarAdjustment];
//animate change
for (UIView *view in [[self view] subviews])
{
[view setNeedsUpdateConstraints];
}
[UIView animateWithDuration:[[[notification userInfo] valueForKey:UIKeyboardAnimationDurationUserInfoKey] doubleValue]
delay:0 //0.2 as possible hack, otherwise a gap appears between keyboard and textview
options:[[[notification userInfo] valueForKey:UIKeyboardAnimationCurveUserInfoKey] integerValue]
animations:^{
for (UIView *view in [[self view] subviews])
{
[view layoutIfNeeded];
}
}
completion:NULL];
}
The delay is probably caused by calling layoutIfNeeded repeatedly in a loop.
In the animation block, just send layoutIfNeeded to the root view, i.e., self.view. Sending layoutIfNeeded to the root view will take care of the entire view hierarchy. So get rid of the loop.
I question if the call to setNeedsUpdateConstraints is necessary; if it is, it only needs to be sent to the root view.
Also, try eliminating the animation options parameter
options:0
Related
I have ViewController which is loaded from a .nib file. in the viewDidLoad method I create a subview and add it to the view hierarchy. How do I fade out that subview to show the view in .nib file?
(the subview is like a splash screen, which I want to fade out to show the view in the .nib, it's set up this way since it was easiest way for me.)
Here is some of my code (I tried to set a reference to the original view from the nib in the viewDidLoad but couldn't get it to work):
[super viewDidLoad];
// Do any additional setup after loading the view from its nib.
NSLog(#"View did load");
//set reference to view in .nib here
UIView *currentView = self.view;
CGRect frame = [[UIScreen mainScreen] bounds];
splashView = [[splashView alloc] initWithFrame:frame];
[[self view] addSubview:splashView];
//transition did not work
[UIView transitionFromView:splashView toView:currentView duration:0.25 options:UIViewAnimationOptionTransitionCrossDissolve completion:^(BOOL finished) {
NSLog(#"transition finished");
}];
}
That code crashes. What am I doing wrong?
Try the following in place of your original code:
[super viewDidLoad];
// Do any additional setup after loading the view from its nib.
NSLog(#"View did load");
CGRect frame = [[UIScreen mainScreen] bounds];
splashView = [[splashView alloc] initWithFrame:frame];
[[self view] addSubview:splashView];
[self.view bringSubviewToFront: splashView];
[UIView animateWithDuration: 2.0
delyay: 0.5 // omit if you don't need a delay
options: UIViewAnimationCurveEaseOut // check the documentation for other options
animations: ^{
splashView.alpha = 0;
}
completion: ^(BOOL finished) {
[splashView removeFromSuperView];
}];
I don't know if you're using ARC or not, or if you using storyboards or not!
If you're note using ARC, then memory management is wrong in this snippet.
Im stuck trying to animate a table view smoothly which has an autolayout contraint. I have a reference to the constraint "keyboardHeight" in my .h and have linked this up in IB. All i want to do is animate the table view with the keyboard when it pops up. Here is my code:
- (void)keyboardWillShow:(NSNotification *)notification
{
NSDictionary *info = [notification userInfo];
NSValue *kbFrame = [info objectForKey:UIKeyboardFrameEndUserInfoKey];
NSTimeInterval animationDuration = [[info objectForKey:UIKeyboardAnimationDurationUserInfoKey] doubleValue];
CGRect keyboardFrame = [kbFrame CGRectValue];
CGFloat height = keyboardFrame.size.height;
[UIView animateWithDuration:animationDuration animations:^{
self.keyboardHeight.constant = -height;
[self.view setNeedsLayout];
}];
}
The thing is the animation block is instantaneous and I see white space appear before the keyboard has finished its animation. So basically I see the white background of the view as the keyboard is animating. I cannot make the animation last for as long as the keyboard is animating.
Am i approaching this the wrong way? Thanks in advance!
Try it this way:
self.keyboardHeight.constant = -height;
[self.view setNeedsUpdateConstraints];
[UIView animateWithDuration:animationDuration animations:^{
[self.view layoutIfNeeded];
}];
Remember this pattern because this should be the correct way to update constraint-based layouts (according to WWDC). You can also add or remove NSLayoutConstraints as long as you call setNeedsUpdateConstraints after.
If you're using UITableViewController, keyboard size should be automatically accommodated by iOS to adjust the contentInsets. But if your tableView is inside a UIViewController, you probably wanted to use this:
KeyboardLayoutConstraint in the Spring framework. Simplest solution I've found so far.
Try the next code. In this case table view lays out at the bottom edge of the screen.
- (void)keyboardWillShow:(NSNotification *)notification { // UIKeyboardWillShowNotification
NSDictionary *info = [notification userInfo];
NSValue *keyboardFrameValue = [info objectForKey:UIKeyboardFrameEndUserInfoKey];
NSTimeInterval animationDuration = [[info objectForKey:UIKeyboardAnimationDurationUserInfoKey] doubleValue];
CGRect keyboardFrame = [keyboardFrameValue CGRectValue];
BOOL isPortrait = UIDeviceOrientationIsPortrait([UIApplication sharedApplication].statusBarOrientation);
CGFloat keyboardHeight = isPortrait ? keyboardFrame.size.height : keyboardFrame.size.width;
// constrBottom is a constraint defining distance between bottom edge of tableView and bottom edge of its superview
constrBottom.constant = keyboardHeight;
// or constrBottom.constant = -keyboardHeight - in case if you create constrBottom in code (NSLayoutConstraint constraintWithItem:...:toItem:...) and set views in inverted order
[UIView animateWithDuration:animationDuration animations:^{
[tableView layoutIfNeeded];
}];
}
- (void)keyboardWillHide:(NSNotification *)notification { // UIKeyboardWillHideNotification
NSDictionary *info = [notification userInfo];
NSTimeInterval animationDuration = [[info objectForKey:UIKeyboardAnimationDurationUserInfoKey] doubleValue];
constrBottom.constant = 0;
[UIView animateWithDuration:animationDuration animations:^{
[tableView layoutIfNeeded];
}];
}
The approach I took is to add a view which follows the size of the keyboard. Add it below your tableview, or text input or whatever and it will push things up when the keyboard appears.
This is how I set up the view hierarchy:
NSDictionary *views = #{#"chats": self.chatsListView, #"reply": self.replyBarView, #"fakeKeyboard":self.fakeKeyboardView};
[self.view addVisualConstraints:#"V:|-30-[chats][reply][fakeKeyboard]|" views:views];
And then the key bits of the keyboard-size-following view look like this:
- (void)keyboardWillShow:(NSNotification *)notification
{
// Save the height of keyboard and animation duration
NSDictionary *userInfo = [notification userInfo];
CGRect keyboardRect = [userInfo[UIKeyboardFrameEndUserInfoKey] CGRectValue];
self.desiredHeight = CGRectGetHeight(keyboardRect);
self.duration = [userInfo[UIKeyboardAnimationDurationUserInfoKey] floatValue];
[self animateSizeChange];
}
- (void)keyboardWillHide:(NSNotification *)notification
{
self.desiredHeight = 0.0f;
[self animateSizeChange];
}
- (CGSize)intrinsicContentSize
{
return CGSizeMake(UIViewNoIntrinsicMetric, self.desiredHeight);
}
- (void)animateSizeChange
{
[self invalidateIntrinsicContentSize];
// Animate transition
[UIView animateWithDuration:self.duration animations:^{
[self.superview layoutIfNeeded];
}];
}
The nice thing about letting this particular view handle its resizing is that you can let the view controller ignore it, and you can also re-use this view any place in your app you want to shift everything up.
The full file is here:
https://gist.github.com/shepting/6025439
What I'm trying to achieve is that when the user press a button the window grows and the extra space is taken by a panel of NSSplitview that uncollapses and grows to fill the space.
I can easily animate the window resize and the splitview growing independently but when I try to put the two animation together one inevitably happens before the other or by steps. First the window partly resize, then the splitview resize follow, then the window finish resizing and finally the splitview finishes as well. Any ides on why that might be happening?
Here is the code I use:
- (IBAction)helpButtonPressed:(id)sender
{
if ([sender isKindOfClass:[NSMenuItem class]]) [sender setState:![sender state]];
NSWindow *window = [[[self windowControllers] objectAtIndex:0] window];
NSRect oldFrame = [window frame];
CGFloat windowWidthAdd;
if ([sender state]) windowWidthAdd = HELP_WIDTH; else windowWidthAdd = -HELP_WIDTH;
NSRect newFrame = NSMakeRect(oldFrame.origin.x, oldFrame.origin.y,oldFrame.size.width+windowWidthAdd, oldFrame.size.height);
[[NSAnimationContext currentContext] setDuration:0.3f];
[NSAnimationContext beginGrouping];
[[window animator] setFrame:newFrame display:YES];
if ([sender state]) [self uncollapseRightView]; else [self collapseRightView];
[NSAnimationContext endGrouping];
}
-(void)collapseRightView
{
NSView *right = [[self.splitView subviews] objectAtIndex:1];
NSView *left = [[self.splitView subviews] objectAtIndex:0];
NSRect leftFrame = [left frame];
NSRect overallFrame = [self.splitView frame];
[right setHidden:YES];
[[left animator] setFrameSize:NSMakeSize(overallFrame.size.width,leftFrame.size.height)];
}
-(void)uncollapseRightView
{
NSView *left = [[self.splitView subviews] objectAtIndex:0];
NSView *right = [[self.splitView subviews] objectAtIndex:1];
[right setHidden:NO];
CGFloat dividerThickness = [self.splitView dividerThickness];
// get the different frames
NSRect leftFrame = [left frame];
// Adjust left frame size
leftFrame.size.width = (leftFrame.size.width-HELP_WIDTH-dividerThickness);
NSRect rightFrame = [right frame];
rightFrame.origin.x = leftFrame.size.width + dividerThickness;
rightFrame.size.width = HELP_WIDTH;
[[left animator] setFrameSize:leftFrame.size];
[[right animator] setFrame:rightFrame];
}
If you are looking a little closer at the class reference of NSSplitView, you will recognize it conforms to NSAnimatablePropertyContainer. That means NSSplitView will provide you with an "animating proxy of itself". If you call animator on your NSSplitView you'll get this proxy, on which you should be able to change properties in an animated fashion.
For adjusting the animation duration and timing function, use NSAnimationContext the same way you already did.
Last but not least: Did you recognize NSSplitView's minPossiblePositionOfDividerAtIndex: and maxPossiblePositionOfDividerAtIndex:?
In my iPad app, I have an implementation of a login window as a UIAlertView subclass that adds two UITextField, using an idiom that's found on the net.
The problem is that in horizontal orientation, the alert is partially hidden by the keyboard. Namely, the buttons are hidden. Of course, it's possible to hide the keyboard to reveal the button, but this is ugly.
The way the idiom is supposed to fix that is to add a translation transform to the view:
CGAffineTransform translate = CGAffineTransformMakeTranslation(0.0, 100.0);
[self setTransform:translate];
However that doesn't really work:
in initial vertical orientation, that works (but stops working after any device rotation)
in initial horizontal orientation, one can see it work, but the alert is right away animated back to the center of the screen where it's partially hidden again.
in any orientation after rotating the iPad, it doesn't work at all: nothing happens, as if the transform was not even there.
(additionally, this transform idea may stop {working|being necessary} for iOS 4.x. But that's another issue).
Any idea welcome.
For the sake of completeness, here is the full code:
- (id)initWithLogin:(NSString *)defaultLogin delegate:(id)delegate
{
if (self = [super initWithTitle:#"Username and password"
message:#"\n\n\n"
delegate:delegate
cancelButtonTitle:#"Cancel"
otherButtonTitles:#"Enter", nil])
{
UITextField *theTextField = [[UITextField alloc] initWithFrame:CGRectMake(12.0, 45.0, 260.0, 25.0)];
[theTextField setBackgroundColor:[UIColor whiteColor]];
theTextField.text = defaultLogin;
theTextField.placeholder = #"username";
[self addSubview:theTextField];
self.loginField = theTextField;
[theTextField release];
theTextField = [[UITextField alloc] initWithFrame:CGRectMake(12.0, 80.0, 260.0, 25.0)];
[theTextField setBackgroundColor:[UIColor whiteColor]];
theTextField.placeholder = #"password";
theTextField.secureTextEntry = YES;
[self addSubview:theTextField];
self.passwordField = theTextField;
[theTextField release];
// the two next lines may not be useful for iOS > 4.0
CGAffineTransform translate = CGAffineTransformMakeTranslation(0.0, 100.0);
[self setTransform:translate];
}
return self;
}
Thanks for Bittu for a working solution. Here is my implementation of his idea. I put the code to move the alert up in a new method of my subclass:
- (void)slideUp
{
CGContextRef context = UIGraphicsGetCurrentContext();
[UIView beginAnimations:nil context:context];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView setAnimationDuration:0.25f];
CGPoint center = self.center;
center.y -= 100;
self.center = center;
[UIView commitAnimations];
}
The key point is when to call that code. There are two cases: the simplest case is when the user rotates the device. Unfortunately, the Alert class is not informed of that event, only the client UIViewController, so that's were we need to call it. This is ugly by breaking encapsulation, but so be it:
- (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation
{
if(loginWindow && UIInterfaceOrientationIsLandscape(self.interfaceOrientation))
{
[loginWindow slideUp];
}
}
The second case is when the orientation is already horizontal when opening up the alert. The alert delegate is informed of that in its didPresentAlertView: delegate method.
- (void)didPresentAlertView:(UIAlertView *)alertView
{
if ( UIInterfaceOrientationIsLandscape([[UIApplication sharedApplication] statusBarOrientation]) ) {
[self slideUp];
}
}
Unfortunately, that implementation doesn't work, because calling slideUp at that time will conflict with the system already animating the alert to the center of the screen. The solution is to delay the call slightly, for example using NSTimer:
- (void)didPresentAlertView:(UIAlertView *)alertView
{
if ( UIInterfaceOrientationIsLandscape([[UIApplication sharedApplication] statusBarOrientation]) ) {
[NSTimer scheduledTimerWithTimeInterval:0.25f
target:self
selector:#selector(slideUp)
userInfo:nil
repeats:NO];
}
}
By the way, slideUp doesn't have the documented signature for a NSTimer selector, but it still seems to work! If that bothers you, simply add an in between method with the correct signature:
- (void)slideUpByTimer:(NSTimer*)theTimer
{
[self slideUp];
}
I had the exact same issue with the alertView with UITextField as a subview. Instead of taking the transform path, I took a little different approach. Here's how I did it.
First create your alertview with textfield in it:
UITextField *textField = [[UITextField alloc] initWithFrame:CGRectMake(12.0, 40.0, 260.0, 25.0)];
[textField setBackgroundColor:[UIColor whiteColor]];
textField.placeholder = #"Search";
UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:#"Enter Search Text" message:#" " delegate:self cancelButtonTitle:#"Cancel" otherButtonTitles:#"Enter",nil];
[alertView addSubview:textField];
[alertView show];
Then in the UIViewController that's going to show the alert view, implement this method:
- (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation
{
if(self.interfaceOrientation == UIInterfaceOrientationLandscapeLeft || self.interfaceOrientation == UIInterfaceOrientationLandscapeRight)
{
CGContextRef context = UIGraphicsGetCurrentContext();
[UIView beginAnimations:nil context:context];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView setAnimationDuration:0.25f];
CGPoint center = self.alertView.center;
center.y -= 100;
self.alertView.center = center;
[UIView commitAnimations];
}
}
this method happens after the "rotation finished" notification has been posted. therefore, you'll see the alertview partially under the keyboard before the animation to slide it up starts happening. Hope this helps you with your login alertview.
I have a table with each cell containing a label and a text field. Problem is that when i go to edit the last row, keyboard hides the lower portion of the table, and i can't see what is being typed. How can i move my interface above the keyboard so i see what is being typed?
Thanks,
Mustafa
You'll want to register your viewController for UIKeyboardDidShowNotification and UIKeyboardWillHideNotification events. When you get these, you should adjust the bounds of your table; the keyboard is 170 pixels height, so just shrink or grow your table bounds appropriately, and it should properly adjust to the keyboard.
This problem is complex depending on your UI scenario. Here I will discuss a scenario that where UITextField or UITextview resides in a UITableViewCell.
You need to use NSNotificationCenter to detect UIKeyboardDidShowNotification event.
see http://iosdevelopertips.com/user-interface/adjust-textfield-hidden-by-keyboard.html. You need to shrink the UITableView frame size so that it occupies only the screen area that is not covered by the keyboard.
If you tap a UITableViewCell, the OS will automatically position the cell within the viewing area of UITableView. But it does not happen when you tap a UITextView or UITableViewCell even though it resides in a UITableViewCell.
You need to call
[myTableView selectRowAtIndexPath:self.indexPath animated:YES scrollPosition:UITableViewScrollPositionBottom];`
to programmatically "tap" the cell.
If you implement both points, you will see the UITextView/Field position right above the keyboard. Bare in mind that the UITableViewCell where the UITableView/Field resides cannot be taller than the "not covered" area. If this is not the case for you, there is a different approach for it but I will not discuss here.
Check out this question: A UITableView list of editable text fields
Just make sure that you have enough scrolling space below that. Because according to my knowledge the iPhone automatically adjusts and shows the focused textbox at the time its keyboard appears.
Removing/commenting the lines where the rect hight is being modified seems to solve the problem. Thanks.
Modified Code:
# define kOFFSET_FOR_KEYBOARD 150.0 // keyboard is 150 pixels height
// Animate the entire view up or down, to prevent the keyboard from covering the author field.
- (void)setViewMovedUp:(BOOL)movedUp
{
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.3];
// Make changes to the view's frame inside the animation block. They will be animated instead
// of taking place immediately.
CGRect rect = self.view.frame;
CGRect textViewRect = self.textViewBeingEdited.frame;
CGRect headerViewRect = self.headerView.frame;
if (movedUp) {
// If moving up, not only decrease the origin but increase the height so the view
// covers the entire screen behind the keyboard.
rect.origin.y -= kOFFSET_FOR_KEYBOARD;
// rect.size.height += kOFFSET_FOR_KEYBOARD;
} else {
// If moving down, not only increase the origin but decrease the height.
rect.origin.y += kOFFSET_FOR_KEYBOARD;
// rect.size.height -= kOFFSET_FOR_KEYBOARD;
}
self.view.frame = rect;
[UIView commitAnimations];
}
[[NSNotificationCenter defaultCenter] addObserver:self
selector:#selector(keyboardWasShown:)
name:UIKeyboardDidShowNotification
object:nil];
[[NSNotificationCenter defaultCenter] addObserver:self
selector:#selector(keyboardWasHidden:)
name:UIKeyboardDidHideNotification
object:nil];
keyboardVisible = NO;
- (void)keyboardWasShown:(NSNotification *)aNotification {
if ( keyboardVisible )
return;
if( activeTextField != MoneyCollected)
{
NSDictionary *info = [aNotification userInfo];
NSValue *aValue = [info objectForKey:UIKeyboardBoundsUserInfoKey];
CGSize keyboardSize = [aValue CGRectValue].size;
NSTimeInterval animationDuration = 0.300000011920929;
CGRect frame = self.view.frame;
frame.origin.y -= keyboardSize.height-300;
frame.size.height += keyboardSize.height-50;
[UIView beginAnimations:#"ResizeForKeyboard" context:nil];
[UIView setAnimationDuration:animationDuration];
self.view.frame = frame;
[UIView commitAnimations];
viewMoved = YES;
}
keyboardVisible = YES;
}
- (void)keyboardWasHidden:(NSNotification *)aNotification {
if ( viewMoved )
{
NSDictionary *info = [aNotification userInfo];
NSValue *aValue = [info objectForKey:UIKeyboardBoundsUserInfoKey];
CGSize keyboardSize = [aValue CGRectValue].size;
NSTimeInterval animationDuration = 0.300000011920929;
CGRect frame = self.view.frame;
frame.origin.y += keyboardSize.height-300;
frame.size.height -= keyboardSize.height-50;
[UIView beginAnimations:#"ResizeForKeyboard" context:nil];
[UIView setAnimationDuration:animationDuration];
self.view.frame = frame;
[UIView commitAnimations];
viewMoved = NO;
}
keyboardVisible = NO;
}
tabelview.contentInset = UIEdgeInsetsMake(0, 0, 210, 0);
[tableview scrollToRowAtIndexPath:[NSIndexPath indexPathForRow:your_indexnumber inSection:Your_section]
atScrollPosition:UITableViewScrollPositionMiddle animated:NO];
try this my coding this will help for u