Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Keyboard handling just like in Messages app in iOS 7

I am implementing a view that is in some way similar to what happens in Messages app, so there is a view with UITextView attached to the bottom of the screen and there is also UITableView showing the main content. When it is tapped it slides up with the keyboard and when keyboard is dismissed it slides back to the bottom of the screen.

That part I have and it is working perfectly - I just subscribed to keyboard notifications - will hide and wil show.

The problem is that I have set keyboard dismiss mode on UITableView to interactive and I cannot capture changes to keyboard when it is panning.

The second problem is that this bar with uitextview is covering some part of uitableview. How to fix this? I still want the uitableview to be "under" this bar just like in messages app.

I am using AutoLayout in all places.

Any help will be appreciated!

============

EDIT1: Here is some code:

View Hierarchy is as follows:

View - UITableView (this one will contain "messages") - UIView (this one will slide)

UITableView is has constraints to top, left, right and bottom of parent view so it fills whole screen. UIView has constraints to left, right and bottom of parent view so it is glued to the bottom - I moved it by adjusting constant on constraint.

In ViewWillAppear method:

NSNotificationCenter.DefaultCenter.AddObserver (UIKeyboard.DidShowNotification, OnKeyboardDidShowNotification);
NSNotificationCenter.DefaultCenter.AddObserver (UIKeyboard.WillChangeFrameNotification, OnKeyboardDidShowNotification);
NSNotificationCenter.DefaultCenter.AddObserver (UIKeyboard.WillHideNotification, OnKeyboardWillHideNotification);

And here are methods:

void OnKeyboardDidShowNotification (NSNotification notification)
{
    AdjustViewToKeyboard (Ui.KeyboardHeightFromNotification (notification), notification);
}

void OnKeyboardWillHideNotification (NSNotification notification)
{   
    AdjustViewToKeyboard (0.0f, notification);
}

void AdjustViewToKeyboard (float offset, NSNotification notification = null)
{
    commentEditViewBottomConstraint.Constant = -offset;

    if (notification != null) {
        UIView.BeginAnimations (null, IntPtr.Zero);
        UIView.SetAnimationDuration (Ui.KeyboardAnimationDurationFromNotification (notification));
        UIView.SetAnimationCurve ((UIViewAnimationCurve)Ui.KeyboardAnimationCurveFromNotification (notification));
        UIView.SetAnimationBeginsFromCurrentState (true);
    }

    View.LayoutIfNeeded ();
    commentEditView.LayoutIfNeeded ();

    var insets = commentsListView.ContentInset;
    insets.Bottom = offset;
    commentsListView.ContentInset = insets;

    if (notification != null) {
        UIView.CommitAnimations ();
    }
}
like image 488
BartoszCichecki Avatar asked Jul 08 '14 14:07

BartoszCichecki


2 Answers

I'd recommend you to override -inputAccessoryView property of your view controller and have your editable UITextView as its subview. Also, don't forget to override -canBecomeFirstResponder method to return YES.

- (BOOL)canBecomeFirstResponder
{
if (!RUNNING_ON_IOS7 && !RUNNING_ON_IPAD)
{
    //Workaround for iOS6-specific bug
    return !(self.viewDisappearing) && (!self.viewAppearing);
}

return !(self.viewDisappearing);
}

With this approach system manages everything.

There are also some workarounds you must know about: for UISplitViewController (UISplitViewController detail-only inputAccessoryView), for deallocation bugs (UIViewController with inputAccessoryView is not deallocated) and so on.

like image 182
Nikita Ivaniushchenko Avatar answered Nov 27 '22 20:11

Nikita Ivaniushchenko


This solution is based on a lot of different answers on SO. It have a lot of benefits:

  • Compose bar stays on bottom when keyboard is hidden
  • Compose bas follows keyboard while interactive gesture on UITableView
  • UITableViewCells are going from bottom to top, like in Messages app
  • Keyboard do not prevent to see all UITableViewCells
  • Should work for iOS6, iOS7 and iOS8

This code just works:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell = // . . .

    // . . .

    cell.contentView.transform = CGAffineTransformMakeScale(1,-1);
    cell.accessoryView.transform = CGAffineTransformMakeScale(1,-1);
    return cell;
}

- (UIView *)inputAccessoryView {
    return self.composeBar;
}

- (BOOL)canBecomeFirstResponder {
    return YES;
}

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.tableView.transform = CGAffineTransformMakeScale(1,-1);

    // This code prevent bottom inset animation while appearing view
    UIEdgeInsets newEdgeInsets = self.tableView.contentInset;
    newEdgeInsets.top = CGRectGetMaxY(self.navigationController.navigationBar.frame);
    newEdgeInsets.bottom = self.view.bounds.size.height - self.composeBar.frame.origin.y;
    self.tableView.contentInset = newEdgeInsets;
    self.tableView.scrollIndicatorInsets = newEdgeInsets;
    self.tableView.contentOffset = CGPointMake(0, -newEdgeInsets.bottom);

    // This code need to be done if you added compose bar via IB
    self.composeBar.delegate = self;
    [self.composeBar removeFromSuperview];

    [[NSNotificationCenter defaultCenter] addObserverForName:UIKeyboardWillChangeFrameNotification object:nil queue:nil usingBlock:^(NSNotification *note)
    {
        NSNumber *duration = note.userInfo[UIKeyboardAnimationDurationUserInfoKey];
        NSNumber *options = note.userInfo[UIKeyboardAnimationCurveUserInfoKey];
        CGRect beginFrame = [note.userInfo[UIKeyboardFrameBeginUserInfoKey] CGRectValue];
        CGRect endFrame = [note.userInfo[UIKeyboardFrameEndUserInfoKey] CGRectValue];

        UIEdgeInsets newEdgeInsets = self.tableView.contentInset;
        newEdgeInsets.bottom = self.view.bounds.size.height - endFrame.origin.y;
        CGPoint newContentOffset = self.tableView.contentOffset;
        newContentOffset.y += endFrame.origin.y - beginFrame.origin.y;

        [UIView animateWithDuration:duration.doubleValue
                              delay:0.0
                            options:options.integerValue << 16
                         animations:^{
                             self.tableView.contentInset = newEdgeInsets;
                             self.tableView.scrollIndicatorInsets = newEdgeInsets;
                             self.tableView.contentOffset = newContentOffset;
                         } completion:^(BOOL finished) {
                             ;
                         }];
    }];
}

Use for example pod 'PHFComposeBarView' compose bar:

@property (nonatomic, strong) IBOutlet PHFComposeBarView *composeBar;

And use this class for your table view:

@interface InverseTableView : UITableView
@end
@implementation InverseTableView
void swapCGFLoat(CGFloat *a, CGFloat *b) {
    CGFloat tmp = *a;
    *a = *b;
    *b = tmp;
}
- (UIEdgeInsets)contentInset {
    UIEdgeInsets insets = [super contentInset];
    swapCGFLoat(&insets.top, &insets.bottom);
    return insets;
}
- (void)setContentInset:(UIEdgeInsets)contentInset {
    swapCGFLoat(&contentInset.top, &contentInset.bottom);
    [super setContentInset:contentInset];
}
@end

If you would like keyboard to disappear by tapping on message:

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    [self.composeBar.textView resignFirstResponder];
}

Do not call this, this will hide composeBar at all:

[self resignFirstResponder];

UPDATE 2:

NEW SOLUTION for keyboard tracking works much better:

- (void)viewDidAppear:(BOOL)animated
{
    [super viewDidAppear:animated];

    // Compose view height growing tracking
    [self.composeBar addObserver:self forKeyPath:@"frame" options:0 context:nil];
    // iOS 7 keyboard tracking
    [self.composeBar.superview addObserver:self forKeyPath:@"center" options:0 context:nil];
    // iOS 8 keyboard tracking
    [self.composeBar.superview addObserver:self forKeyPath:@"frame" options:0 context:nil];
}

- (void)viewDidDisappear:(BOOL)animated
{
    [super viewDidDisappear:animated];

    [self.composeBar removeObserver:self forKeyPath:@"frame"];
    [self.composeBar.superview removeObserver:self forKeyPath:@"center"];
    [self.composeBar.superview removeObserver:self forKeyPath:@"frame"];
}

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context
{
    if (object == self.composeBar.superview || object == self.composeBar)
    {
        // Get all values
        CGPoint newContentOffset = self.tableView.contentOffset;
        UIEdgeInsets newEdgeInsets = self.tableView.contentInset;
        UIEdgeInsets newScrollIndicartorInsets = self.tableView.scrollIndicatorInsets;

        // Update values
        CGFloat bottomInset = self.view.bounds.size.height - [self.composeBar convertPoint:CGPointZero toView:self.view].y;
        CGFloat diff = newEdgeInsets.bottom - (bottomInset + 7);
        newContentOffset.y += diff;
        newEdgeInsets.bottom = bottomInset + 7;
        newScrollIndicartorInsets.bottom = bottomInset;

        // Set all values
        if (diff < 0 || diff > 40)
            self.tableView.contentOffset = CGPointMake(0, newContentOffset.y);
        self.tableView.contentInset = newEdgeInsets;
        self.tableView.scrollIndicatorInsets = newEdgeInsets;
    }
}
like image 42
k06a Avatar answered Nov 27 '22 20:11

k06a