Multiple UITextFields with UIPicker and UIKeyboard

As a developer, you’ve likely encountered situations where you need to use multiple text fields with different input views. In this scenario, one of the text fields should display a UIPicker instead of a standard keyboard. However, when the keyboard is open on one of the other text fields and the picker field is touched, the keyboard won’t dismiss and the picker appears under it. This issue can be challenging to resolve, but we’ll explore possible solutions and provide code examples to help you tackle this problem.

Understanding the Problem

To grasp the underlying issues, let’s break down the scenario:

We have multiple UITextFields in our app, with 6 of them using a keyboard and the other using a UIPicker.
When the keyboard is open on one of the text fields linked to the picker, it doesn’t dismiss when we touch the picker field.
The picker appears under the keyboard instead of displaying properly.

Solution Overview

To resolve this issue, we need to rethink our approach to handling the input views for our text fields. Instead of adding the UIPicker as a subview of our main window, we should set it as the input view for the relevant text field. This will allow the picker to display and hide correctly in response to keyboard events.

Solution

Let’s dive into the modified code that sets up the UIPicker as an input view for our desired text field:

- (void)textFieldDidBeginEditing:(UITextField *)textField {
    if ([textField isEqual:state]) {
        [state resignFirstResponder];
        [self textFieldFirstResponderOnDelay1];

        // Hide the picker when the keyboard is open on another text field
        pickerView.hidden = YES;
    } else {
        pickerView.hidden = NO; // Show the picker for this text field
    }
}

- (void)textFieldDidEndEditing:(UITextField *)textField {
    if ([textField isEqual:state]) {
        [state resignFirstResponder];
    } else {
        CGRect textFieldRect =
            [self.view.window convertRect:textField.bounds fromView:textField];

        // Calculate the position of the picker based on the keyboard's height
        CGFloat midline = textFieldRect.origin.y + 0.5 * textFieldRect.size.height;
        CGFloat numerator = midline - self.view.window.convertRect(self.view.bounds).origin.y
            - MINIMUM_SCROLL_FRACTION * self.view.window.convertRect(self.view.bounds).size.height;

        // Adjust the picker's position to align with the text field's frame
        UIInterfaceOrientation orientation =
            [[UIApplication sharedApplication] statusBarOrientation];

        CGFloat animatedDistance = 0.0;
        if (orientation == UIInterfaceOrientationPortrait ||
            orientation == UIInterfaceOrientationPortraitUpsideDown) {
            animatedDistance = floor(PORTRAIT_KEYBOARD_HEIGHT * numerator / self.view.window.convertRect(self.view.bounds).size.height);
        } else {
            animatedDistance = floor(LANDSCAPE_KEYBOARD_HEIGHT * numerator / self.view.window.convertRect(self.view.bounds).size.height);
        }

        [UIView beginAnimations:nil context:NULL];
        [UIView setAnimationBeginsFromCurrentState:YES];
        [UIView setAnimationDuration:KEYBOARD_ANIMATION_DURATION];

        [self.view setFrame:self.view.frame]; // Move the view up by animatedDistance
        [self.view setFrame:[self.view frame]; // No animation needed here]

        [UIView commitAnimations];
    }
}

Explanation

In this solution, we’ve modified our code to set the UIPicker as an input view for the relevant text field. We also added code to hide and display the picker based on keyboard events.

- (void)textFieldDidBeginEditing:(UITextField *)textField {
    // Hide the picker when the keyboard is open on another text field
    if ([self.view.window convertRect:textField.bounds fromView:textField].origin.y < MINIMUM_SCROLL_FRACTION * self.view.window.convertRect(self.view.bounds).size.height)
        pickerView.hidden = YES;
    else
        pickerView.hidden = NO; // Show the picker for this text field
}

-(void)textFieldDidEndEditing:(UITextField *)textField {
    // Hide or show the picker based on keyboard events

    // Move the view up by animatedDistance when the keyboard appears
    if ([self.view.window convertRect:textField.bounds fromView:textField].origin.y < MINIMUM_SCROLL_FRACTION * self.view.window.convertRect(self.view.bounds).size.height)
        [UIView beginAnimations:nil context:NULL];
        [UIView setAnimationBeginsFromCurrentState:YES];
        [UIView setAnimationDuration:KEYBOARD_ANIMATION_DURATION];

        [self.view setFrame:[self.view frame]]; // No animation needed here

        [UIView commitAnimations];
}

Example Use Cases

To illustrate the benefits of this solution, consider a real-world scenario where you’re building an app for users to create and edit custom lists. You want each list item to have multiple options (e.g., colors, sizes). By using a UIPicker as the input view for some text fields, you can provide users with an interactive and intuitive way to select options without having to leave their current task.

- (void)viewDidLoad {
    // Set up the picker for relevant text fields

    textField.inputView = pickerView; // Use the picker instead of a keyboard
}

In this revised code snippet, we’ve replaced the keyboard with a pickerView as an input view for our desired text field. When the user selects an option from the picker, the corresponding value is displayed in the text field.

- (void)textFieldDidBeginEditing:(UITextField *)textField {
    // Hide or show the picker based on keyboard events

    if ([self.view.window convertRect:textField.bounds fromView:textField].origin.y < MINIMUM_SCROLL_FRACTION * self.view.window.convertRect(self.view.bounds).size.height)
        pickerView.hidden = YES;
    else
        pickerView.hidden = NO; // Show the picker for this text field
}

By setting up your app to use a UIPicker as an input view, you can provide users with a smoother and more engaging experience when working with multiple fields.

Last modified on 2023-05-16