Используем новый keyboardLayoutGuide, чтобы защитить View от перекрытия клавиатурой

Сегодня я очень счастлив. Эта статья принесла мне радость, и вы поймете почему после небольшого рассказа. Мы рассмотрим новый способ решения очень старой проблемы, появившийся в iOS 15. Заключается она в положении UITextField при появлении клавиатуры.

После долгого изучения iOS-разработки я начал претендовать на junior-позиции в этой области. Я помню, что разослал много резюме, но безуспешно. Однажды я попал на собеседование в известный банк в моей стране, я был так взволнован. На первом этапе все шло хорошо, а затем я перешел к той части, когда мне нужно было сделать небольшой проект, демонстрирующий, как я буду решать задачу.

Для меня это было большим вызовом, потому что были ограничения по времени, и у меня был один уик-энд, чтобы все сделать. Все было хорошо, пока я не застрял в чем-то, с чем, держу пари, у многих iOS-разработчиков тоже есть проблемы. В моем дизайне я поместил UITextField в нижнюю часть экрана, и когда появлялась клавиатура, она перекрывала все поле. Единственное, что я помню, это то, что я провел больше времени, пытаясь решить эту проблему, чем выполняя остальную часть самой задачи.

Проблема

У вас есть экран, на котором появляющаяся клавиатура закрывает соответствующее поле UITextField.

Наша цель – добиться следующего результата:

Новый API называется keyboardLayoutGuide. Это способ ограничить View клавиатурой, а это означает, что вам больше не нужно беспокоиться, если ваш UITextField будет закрыт ею. Вам не нужно беспокоиться о том, будет ли какое-либо из ваших представлений закрыто клавиатурой, потому что вы можете установить ограничения для всех своих View, если хотите.

Давайте настроим минимальную конфигурацию для вашего UIViewController после того, как я объясню новые API:

class ViewController: UIViewController {

    private let textField = UITextField()

    init() {
        super.init(nibName: nil, bundle: nil)
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        view.keyboardLayoutGuide.followsUndockedKeyboard = true // Mark 1
        configureView()
    }

    private func configureView() {
        [textField].forEach {
            view.addSubview($0)
            $0.translatesAutoresizingMaskIntoConstraints = false
        }

        textField.borderStyle = .bezel

        NSLayoutConstraint.activate([
            textField.widthAnchor.constraint(equalToConstant: 200),
            textField.heightAnchor.constraint(equalToConstant: 20),
            textField.centerXAnchor.constraint(equalTo: view.centerXAnchor)
        ])

        let textFieldOnKeyboard = view.keyboardLayoutGuide.topAnchor.constraint(equalTo: textField.bottomAnchor, constant: 100) // Mark 2
        view.keyboardLayoutGuide.setConstraints([textFieldOnKeyboard], activeWhenAwayFrom: .top) // Mark 3
    }
}

Как вы можете видеть, это минимальная конфигурация для UITextField. Единственное, на что более важно обратить внимание, это на то, что ограничения установлены без нижнего параметра, потому что мы установим нижнее ограничение относительно keyboardLayoutGuide. Кроме этого, все довольно стандартно.

Объясним все отметки.

1. Mark 1 — разрешить установку constraint для keyboardLayoutGuide. Это важно, потому что мы говорим представлению: «Эй, может быть, что-то изменится, когда клавиатура вылезет из нижней части экрана!».
2. Mark 2 — это место, где мы создаем ограничение. Это ограничение сообщает макету, как далеко вы всегда хотите оставаться от клавиатуры. Так iOS узнает, как изменить положение UITextField относительно клавиатуры.
3. А в Mark 3 вы можете активировать ограничение, созданное в Mark 2.

Важно отметить, что часть activeWhenAwayFrom имеет решающее значение для правильного поведения ограничений UI. Например, если вы измените аргумент на activeWhenNearEdge, вы также должны изменить его с top на bottom.

Результат, который вы должны увидеть, тот, что в начале статьи.

Вот и все!

Резюме

Сегодня мы проверили новый API ограничений и то, как он может облегчить вашу разработку. Имейте ввиду, что этот пост является лишь введением, и воспринимайте его как пищу для размышлений. Существует множество способов решить проблему, и всегда держите свой разум открытым.

Надеюсь, вам понравилось, как мне понравилось писать эту статью. Если вы хотите поддержать этот блог, вы можете купить мне кофе или просто оставить комментарий.