Virtual Keyboard in iOS - part 2

One the first entry of this series I covered the issues with the keyboard in iOS not hiding automatically when needed. In this second - and final - entry on the subject I am going to go for the most of annoying issue when creating UIs in iOS.

The keyboard overlaps a focused TextField 

If you have a TextField below the keyboard top edge position, they will be hidden once the keyboard shows up. The keyboard size is 320x216 points* in in portrait mode, so anything below the 264 (iPhone 4/4s) or 352 (iPhone 5/5s) points won’t be visible.  It is so simple that is almost unbelievable, but it happens as you can see in the images. Since this default behavior is inconvenient we are going for the workaround.

The solution is not pretty but it is trivial: we need to place the UI elements inside a UIScrollView  and will use notifications to monitor when the keyboard will Show/Hide and will scroll the content of the container to ensure that views inside are always visible. We are using Xamarin and Xcode to develop this example. The first step is to subscribe to the notifications:

public override void ViewWillDisappear (bool animated)
{
 base.ViewWillDisappear (animated);
 UnregisterNotifications ();
}

public override void ViewWillAppear (bool animated)
{
 base.ViewWillAppear (animated);
 this.scrollView.ContentSize = new SizeF (320, 400);
 RegisterNotifications ();
}

NSObject _keyboardWillShow;
NSObject _keyboardWillHide;

protected  void RegisterNotifications ()
{
 _keyboardWillShow = NSNotificationCenter.DefaultCenter.AddObserver (UIKeyboard.WillShowNotification, WillShow);
 _keyboardWillHide = NSNotificationCenter.DefaultCenter.AddObserver (UIKeyboard.WillHideNotification, WillHide);
}

protected  void UnregisterNotifications ()
{
 NSNotificationCenter.DefaultCenter.RemoveObserver (_keyboardWillShow);
 NSNotificationCenter.DefaultCenter.RemoveObserver (_keyboardWillHide);
}

There is also an outlet called scrollView to access our container and on the ViewWillAppear method we set the ContentSize of the container. You should adjust this value to your specific UI layout.

The NSNotificationCenter it’s a singleton that will allows us to register for notifications, which are essentially events. We will register for two specific notifications on the ViewWillAppear and unregister them on the ViewWillDisapear.

The trickiest part is the WillShow event, in this case the actions are:

• Get the area above the keyboard.
• Get the area of the active view.
• If those areas intersect (meaning is no 100% visible) then we scroll to ensure the active view is completely visible.

protected  void WillShow (NSNotification notification)
{
 var activeView = this.View.FirstResponder ();
 if (activeView == null)
  return;    

 //get keyboard bounds
 var keyboardBounds = UIKeyboard.FrameBeginFromNotification (notification);

 var contentInsets = new UIEdgeInsets (0.0f, 0.0f, keyboardBounds.Size.Height, 0.0f);
 scrollView.ContentInset = contentInsets;
 scrollView.ScrollIndicatorInsets = contentInsets;
    
 //get the are above the keyboard
 var areaVisibleAboveKeyboard = new RectangleF (this.View.Frame.Location,
          new SizeF (this.View.Frame.Width, this.View.Frame.Size.Height - keyboardBounds.Size.Height));

 //get the area of the view we want to ensure its visible
 var areaActiveView = activeView.Superview.ConvertRectToView (activeView.Frame, this.View);   
    
 //if we can't see the full view, then scroll so its visible
 if (!areaVisibleAboveKeyboard.Contains (areaActiveView)) 
 {
  var scrollPoint = new PointF (0.0f, areaActiveView.Location.Y + areaActiveView.Height + 
  scrollView.ContentOffset.Y - areaVisibleAboveKeyboard.Height);
  scrollView.SetContentOffset (scrollPoint, true);
 }
}

The WillHide is far simpler; just reset the scroll the original state.

protected  void WillHide (NSNotification notification)
{
 var activeView = this.View.FirstResponder ();
 if (activeView == null)
  return;         

 //scroll back 
 var animationDuration = UIKeyboard.AnimationDurationFromNotification (notification);
 var contentInsets = new UIEdgeInsets (0.0f, 0.0f, 0.0f, 0.0f);
 UIView.Animate (animationDuration, delegate {
  scrollView.ContentInset = contentInsets;
  scrollView.ScrollIndicatorInsets = contentInsets;
    }
 );
}

Notice that in both the notifications we are checking for an active view, or “first responder” we are using the extensions method from the previous article.

You can get the full code of a working demonstration of both problems and their solutions.

1. KeyboardMess.zip - full source code
2. or see all the code above together on a GitHub Gist.

* Points are not pixels, check iPhone Development Guide for more details.