Almost all mobile apps have some sort of text entry. One of the main ways to do this is to simply add a text box. Adding a text box is both simple and easy to do, but we can take this a little further and improve the user experience.

Hiding the Keyboard

When the keyboard is shown by tapping a text box, the natural thing to do in order to hide it would be to tap outside the text box. However, this is not the case by default. But, this is easy to add by overriding the TouchesBegan method of the ViewController:

    public override void TouchesBegan (NSSet touches, UIEvent evt)
    {
        // hide the keyboard from all views
        View.EndEditing (true);

        base.TouchesBegan (touches, evt);
    }

Enabling/Disabling the Return Key

There is a very simple way to let the user know that some text is required: disable the return key if no text is provided. This can be done in both the code and in the designer. In the code we set the EnablesReturnKeyAutomatically property:

    textField.EnablesReturnKeyAutomatically = true;

There is a checkbox in the designer labeled “Auto-enable Return Key”.

It is important to note that this does not apply if the keyboard type is NumberPad as there is no return key for this keyboard type.

Changing the Keyboard Type

Another way to provide a basic restriction of the UI is to select a keyboard type. By selecting an appropriate keyboard type, the user can know what is expected to be entered as well as make the available characters easier to reach. If we only want numbers, we use the NumberPad as this removes the other keys. If we are providing an entry for an email address, we use the EmailAddress type which makes the @ and the . key more available:

    textField.KeyboardType = UIKeyboardType.NumberPad;

There is a dropdown in the designer labeled “Keyboard” which provides all the available options.

Changing the Return Key Type

Another nice user experience is to change the text for the “return” key, which provides additional hints as to what is going to happen with the input. There are several options that are available, such as Done, Search or Next:

    textField.ReturnKeyType = UIReturnKeyType.Done;

There is a dropdown in the designer labeled “Return Key” which provides all the available options.

Adding an Action to the Return Key

When the user presses the return key on the keyboard, we would expect something to happen, especially if it is a single line textbox. But, on iOS nothing happens, so we attach a delegate that can hide the keyboard and maybe do some more work. This is easy to add by assiging a delegate to the ShouldReturn property of the UITextFied:

    textField.ShouldReturn = delegate {
        // hide the keyboard
        textField.ResignFirstResponder ();

        // the "return" logic here

        return true;
    };

Adding “Return” to the Number Pad

As the NumberPad keyboard type does not have a return key, there is no default way to hide the keyboard, we have to manually add a handler to hide the keyboard when another view is tapped. Another way we can do this is to add a “Cancel” or a “Done” button accessory to the keyboard:

    // create the toolbar
    UIToolbar numberToolbar = new UIToolbar ();
    numberToolbar.BarStyle = UIBarStyle.Default;
    numberToolbar.Translucent = true;
    // set the items
    numberToolbar.Items = new [] { 
        // the cancel button
        new UIBarButtonItem (UIBarButtonSystemItem.Cancel, delegate {
            // hide the keyboard
            idEntryTextField.ResignFirstResponder ();
        }),
        // the space to separate the buttons
        new UIBarButtonItem (UIBarButtonSystemItem.FlexibleSpace, null),
        // the "continue" button
        new UIBarButtonItem ("Login"), UIBarButtonItemStyle.Done, delegate {
            // hide the keyboard
            idEntryTextField.ResignFirstResponder ();

            // the "return" logic here
        })
    };
    // fill the screen width
    numberToolbar.SizeToFit ();

    // set the accessory
    textField.InputAccessoryView = numberToolbar;