How to Ease iOS Keyboard handling in Xamarin App Development?

0
Shares
How to Ease iOS Keyboard handling in Xamarin App Development?
Rate this post

This tutorial shows tips to ease iOS Keyboard handling in Xamarin App Development. Here, different problems with solutions are listed that faced by Xamarin Developers while coding in Xamarin iOS Library for Keyboard handling.

During the years of iPhone usage, have you ever thought “I wish I could develop an app for Xamarin”, or even “I could develop an iOS keyboard handling better than rest Xamarin developers?

You’re in luck – Creating iOS Keyboard handling in Xamarin is not a difficult thing. There are many tools available that make developing your own app fun and easy. Additionally, many examples are available showing how to do things in Objective-C, but searching the same thing in Xamarin is quite tough. Removing the developers’ frustration, here, we are providing Xamarin solutions with examples for iOS keyboard handling.

Keyboard handling in native Xcode/swift is comparatively easier due to the iQKeyboardManager third-party library. If we are using XAMARIN iOS library to develop the cross-platform application, it is relatively difficult because less help is available over the internet. Additionally, we have to avoid the third party libraries to restrict an app size.

What Are the Problems Xamarin Developers Facing While Coding for Keyboard handling in Xamarin iOS Library?

Problem 1: Add a “Return” Button in place of Enter Key in Keyboard.

Problem 2: When the Keyboard loses focus, close the Keyboard and return to the Normal state of the screen

Problem 3: Add Next/Previous/Done Button in Keyboard

Problem 4: Move the View Up/Down if Keyboard is hiding your TextField/View

Solution

Step 1: As shown in figure, create a new project of iOS type in Visual Studio

1

 

2

Step 2: Create three Textfields inside the Storyboard that you have created in Step 1.

3

Problem 1 : Add a “Return” Button in place of Enter Key in Keyboard.

Solution : Step 3

In ViewDidLoad, add the following code.

#region Include Return Button in Keyboard
this.txtField1.ShouldReturn += (textField) =>
{
txtField1.ResignFirstResponder();
return true;
};

this.txtField2.ShouldReturn += (textField) =>
{
txtField2.ResignFirstResponder();
return true;
};

this.txtField3.ShouldReturn += (textField) =>
{
txtField3.ResignFirstResponder();
return true;
};
#endregion

Problem 2 : When the Keyboard loses focus, Close the Keyboard and return to the Normal state of the screen

Solution : Step 4

Add the Following code to ViewDidLoad too.

#region When Clicked out side keyboard, Close the Keyboard
UITapGestureRecognizer g_recognizer = new UITapGestureRecognizer(() =>
{
txtField1.ResignFirstResponder();
txtField2.ResignFirstResponder();
txtField3.ResignFirstResponder();
});
this.View.AddGestureRecognizer(g_recognizer);
#endregion

Problem 3 : Add Next/Previous/Done Button in Keyboard
Solution :
Step 5 (1)

  • Create a New Class named NextPreviousToolBar and paste the following code.
public class NextPreviousToolBar : UIToolbar
{
public UIView prevTextField { get; set; }
public UIView currentTextField { get; set; }
public UIView nextTextField { get; set; }

public NextPreviousToolBar() : base() { }

public NextPreviousToolBar(UIView curr, UIView prev,
UIView next)
{
this.currentTextField = curr;
this.prevTextField = prev;
this.nextTextField = next;
AddButtonsToToolBar();
}

void AddButtonsToToolBar()
{
Frame = new CoreGraphics.CGRect(0.0f, 0.0f, 320, 44.0f);
TintColor = UIColor.DarkGray;
Translucent = false;
Items = new UIBarButtonItem[]
{
new UIBarButtonItem("Prev",
UIBarButtonItemStyle.Bordered, delegate
{
prevTextField.BecomeFirstResponder();
}) { Enabled = prevTextField != null },
new UIBarButtonItem("Next",
UIBarButtonItemStyle.Bordered, delegate
{
nextTextField.BecomeFirstResponder();
}) { Enabled = nextTextField != null },
new
UIBarButtonItem(UIBarButtonSystemItem.FlexibleSpace),
new UIBarButtonItem(UIBarButtonSystemItem.Done, delegate
{
currentTextField.ResignFirstResponder();
})
};
}
}

Step 5 (2)
Add the following code to ViewDidLoad

#region Add Next Previous Buttons to Toolbar
txtField1.InputAccessoryView = new NextPreviousToolBar(txtField1, null, txtField2);
txtField2.InputAccessoryView = new NextPreviousToolBar(txtField2, txtField1, txtField3);
txtField3.InputAccessoryView = new NextPreviousToolBar(txtField3, txtField2, null);
#endregion

Problem 4 : Move the View Up/Down if the Keyboard is hiding your TextField/View
Solution : Step 6

Declare Following Variables globally in your viewcontroller
private NSObject _didShowNotificationObserver;
private NSObject _willHideNotificationObserver;
private UIView activeTextFieldView;
private nfloat amountToScroll = 0.0f;
private nfloat alreadyScrolledAmount = 0.0f;
private nfloat bottomOfTheActiveTextField = 0.0f;
private nfloat offsetBetweenKeybordAndTextField = 10.0f;
private bool isMoveRequired = false;
Add Following Code to ViewDidload

#region Move UI View Up Handling
// Keyboard popup
_didShowNotificationObserver = NSNotificationCenter.DefaultCenter.AddObserver
(UIKeyboard.DidShowNotification, KeyBoardDidShow, this);

// Keyboard Down
_willHideNotificationObserver = NSNotificationCenter.DefaultCenter.AddObserver
(UIKeyboard.WillHideNotification, KeyBoardWillHide, this);
#endregion

Add Following Functions to your ViewController.cs file

#region Move UI View Up Handling
public override void ViewWillAppear(bool animated)
{
base.ViewWillAppear(animated);
_didShowNotificationObserver = NSNotificationCenter.DefaultCenter.AddObserver(UIKeyboard.DidShowNotification, KeyBoardDidShow);

_willHideNotificationObserver = NSNotificationCenter.DefaultCenter.AddObserver(UIKeyboard.WillHideNotification, KeyBoardWillHide);
}

public override void ViewWillDisappear(bool animated)
{
base.ViewWillDisappear(animated);
if (_didShowNotificationObserver != null)
{
NSNotificationCenter.DefaultCenter.RemoveObserver(_didShowNotificationObserver);
}

if (_willHideNotificationObserver != null)
{
NSNotificationCenter.DefaultCenter.RemoveObserver(_willHideNotificationObserver);
}
}

private void KeyBoardDidShow(NSNotification notification)
{
// get the keyboard size
CoreGraphics.CGRect notificationBounds = UIKeyboard.BoundsFromNotification(notification);

// Find what opened the keyboard
foreach (UIView view in this.View.Subviews)
{
if (view.IsFirstResponder)
activeTextFieldView = view;
}

// Bottom of the controller = initial position + height + offset
bottomOfTheActiveTextField = (activeTextFieldView.Frame.Y + activeTextFieldView.Frame.Height + offsetBetweenKeybordAndTextField);

// Calculate how far we need to scroll
amountToScroll = (notificationBounds.Height - (View.Frame.Size.Height - bottomOfTheActiveTextField));

// Perform the scrolling
if (amountToScroll > 0)
{
bottomOfTheActiveTextField -= alreadyScrolledAmount;
amountToScroll = (notificationBounds.Height - (View.Frame.Size.Height - bottomOfTheActiveTextField));
alreadyScrolledAmount += amountToScroll;
isMoveRequired = true;
ScrollTheView(isMoveRequired);
}
else
{
isMoveRequired = false;
}

}

private void KeyBoardWillHide(NSNotification notification)
{
bool wasViewMoved = !isMoveRequired;
if (isMoveRequired) { ScrollTheView(wasViewMoved); }
}

private void ScrollTheView(bool move)
{

// scroll the view up or down
UIView.BeginAnimations(string.Empty, System.IntPtr.Zero);
UIView.SetAnimationDuration(0.3);

CoreGraphics.CGRect frame = View.Frame;

if (move)
{
frame.Y -= amountToScroll;
}
else
{
frame.Y += alreadyScrolledAmount;
amountToScroll = 0;
alreadyScrolledAmount = 0;
}

View.Frame = frame;
UIView.CommitAnimations();
}
#endregion

Check out Demo Video Link for more information:

https://www.dropbox.com/s/tok9didejqyh28h/vid_content_upwork.mov?dl=0

Are you looking for a Full Source Code Link? Visit here.

Do you still have any doubt in iOS Keyboard handling in Xamarin app development? Hire iPhone app developer from Space-O Technologies.

 
0
Shares
 

LET'S TALK VALIDATE YOUR IDEA!