Google How to navigate through UITextFields with iOS device keyboard Next / Go Buttons in Xamarin.iOS | SubramanyamRaju Xamarin & Windows App Dev Tutorials

Monday 12 March 2018

How to navigate through UITextFields with iOS device keyboard Next / Go Buttons in Xamarin.iOS

Introduction:
Some times we may need to navigate to from one TextField to another with help of iOS device keyboard "Next", "Go" buttons. This article will tell you about how to interact with these iOS keyboard buttons from Xamarin.iOS.




Requirements:
  • This article source code was prepared by using Visual Studio Community for Mac (7.3.2). And it is better to install latest visual studio updates from here.
  • This sample project is Xamarin.iOS project and tested in iOS simulator.
Description:

To understand this article, let's assume a page called login page having below scenario:
  • LoginPage having two text fields (user name and password).
  • Keyboard will open when user enter a user name.
  • After entering user name, user tap on Next button from the keyboard.
  • User will expect password field should focus without touching on it.
  • After enter password, Keyboard will have a Go button.
  • If user tap on Go button from the Keyboard will expect login process or closing keyboard.

In this article, we will create the sample to reach above exceptions.

And this article can explain you below topics:
1. How to create new Xamarin.iOS project?
2. How to place UITextFields on ViewController?
3. How to naming UITextFields and Button from Visual Studio for Mac.
4. How to set delegate to UItextField and implement the TextField ShouldReturn?

1. Create the new Xamarin.iOS project. 
  • Launch Visual Studio for Mac.
  • On the File menu, select New Solution.
  • The New Project dialog appears. The left pane of the dialog lets you select the type of templates to display. In the left pane, expand iOS App General > Single View App and click on Next.
  • Enter your App Name (Ex: KeyboardSample), select minimum iOS support that you want to support and click on Next button.
     

  • You can choose your project location like below.

  • After that your project will load like below
2. How to place UITextFields on ViewController?
For easier experience, I am using Xcode instead of Visual Studio to place UI controls on ViewController or to make changes in storyboard file. Right click on Main.storyboard => Open With => Xcode Interface Builder file.

After launching Xcode, to make our login page we need two UITextFields and one UIButton. So place UI controls like below:
Apply default constraints from auto layout and save file like below.


3. How to naming UITextFields and Button from Visual Studio for Mac?
In your visual studio double tap on your Main.stroyboard file. After loading storyboard file, tap on your text field and in right side of properties window give name (UserNameField) like below screen. Also do same thing for password field.
 4. How to set delegate to UItextField and implement the TextField ShouldReturn?
Open ViewController.cs file and add below code.
  1. using System;  
  2.   
  3. using UIKit;  
  4.   
  5. namespace KeyboardSample  
  6. {  
  7.     public partial class ViewController : UIViewController  
  8.     {  
  9.         protected ViewController(IntPtr handle) : base(handle)  
  10.         {  
  11.             // Note: this .ctor should not contain any initialization logic.  
  12.         }  
  13.   
  14.         public override void ViewDidLoad()  
  15.         {  
  16.             base.ViewDidLoad();  
  17.             UserNameField.ShouldReturn = (tf) =>  
  18.             {  
  19.                 PasswordField.SecureTextEntry = true;  
  20.                 PasswordField.ReturnKeyType = UIReturnKeyType.Go;  
  21.                 PasswordField.BecomeFirstResponder();  
  22.                 return true;  
  23.             };  
  24.             PasswordField.ShouldReturn = (tf) =>  
  25.             {  
  26.                 //Write here your login process code  
  27.                 return true;  
  28.             };  
  29.         }  
  30.   
  31.         public override void DidReceiveMemoryWarning()  
  32.         {  
  33.             base.DidReceiveMemoryWarning();  
  34.             // Release any cached data, images, etc that aren't in use.  
  35.         }  
  36.     }  
  37. }  

In above code when user enter a user name and hit on keyboard "return/next" button, we are enabling password field return type to "Go" button. And when user tap on "Go" button we need to process the login functionality.

The text field calls ShouldReturn method whenever the user taps the keyboard next/go button. we can use this method to implement any custom behavior when the button is tapped. For example, if you want to dismiss the keyboard when the user taps the return button, your implementation can call the ResignFirstResponder method.

  1. UserNameField.ResignFirstResponder();  

Demo screen from iOS simulator:

You can directly work on below sample source code to understand this article sample


KeyboardSample


FeedBack Note: Please share your thoughts, what you think about this post, Is this post really helpful for you? Otherwise, it would be very happy, if you have any thoughts for to implement this requirement in any other way? I always welcome if you drop comments on this post and it would be impressive.

Follow me always at @Subramanyam_B
Have a nice day by  :)

No comments:

Post a Comment

Search Engine Submission - AddMe