Как стать автором
Обновить

Keyboard Layout Guide

Время на прочтение3 мин
Количество просмотров3.3K

При разработке приложений для iOS мы часто сталкиваемся с проблемами, когда клавиатура iPhone выдвигается вверх и закрывает UITextField / UITextView

Работа с клавиатурами в iOS всегда была проблемой. Независимо от того, новичок вы или опытный разработчик, вам всегда нужно будет работать с клавиатурой в ваших приложениях.

Управление клавиатурой - это базовый функционал, но Apple вынуждает нас управлять им вручную.

До iOS 15 было несколько способов решить проблему когда клавиатура перекрывает UITextField / UITextView или другие элементы.

Можно было вынести в свойство или аутлет нижний констрейнт перекрываемого элемента. Подписаться на уведомления

  • UIKeyboardWillShowNotification

  • UIKeyboardWillHideNotification

И при наступлении соответствующего события увеличивать или уменьшать констрейнт на высоту клавиатуры.

Либо можно было разместить  UI элементы на scrollview и при появлении и сворачивании клавиатуры задавать соответствующий офсет scrollview.

keyboardLayoutGuide

В iOS 15 появилась новая возможность изменять наш лейоут при появлении клавиатуры: keyboardLayoutGuide. Про эту новую возможность и хочется рассказать в данной статье на примере простого тестового приложения, использующего UITextView.

Для начала в файле ViewController создадим textView и кнопку для сворачивания клавиатуры.

    private let textView: UITextView = {
        let view = UITextView()
        view.isEditable = true
        view.backgroundColor = .secondarySystemFill
        view.translatesAutoresizingMaskIntoConstraints = false
        view.font = .systemFont(ofSize: 22, weight: .regular)
        return view
    }()
    
    private let hideKeyboardButton = {
        let button = UIButton()
        button.translatesAutoresizingMaskIntoConstraints = false
        button.backgroundColor = .systemMint
        button.setTitleColor(.white, for: .normal)
        button.setTitleColor(.gray, for: .highlighted)
        button.setTitle("PRESS ME", for: .normal)
        button.layer.cornerRadius = 22
        return button
    }()

В методе viewDidLoad зададим нашему view цвет фона, добавим textView и кнопку на view и установим соответствующие констрейнты, вызвав метод setupConstaraints (его мы рассмотрим чуть позже).

    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.backgroundColor = .systemBackground
        
        view.addSubview(textView)
        view.addSubview(hideKeyboardButton)
        
        hideKeyboardButton.addTarget(self,
                                action: #selector(buttonDidTap),
                                for: .touchUpInside)
        
        setupConstaraints()
    }

Сделаем так, что при загрузке экрана textView сразу же становиться активным.

 override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        textView.becomeFirstResponder()
    }

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

  @objc private func buttonDidTap() {
        textView.resignFirstResponder()
  }

Теперь перейдем к установке констрейнтов. Именно здесь мы и воспользуемся новыми возможностями iOS 15, использую keyboardLayoutGuide.

    private func setupConstaraints() {
        NSLayoutConstraint.activate([
            textView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 10),
            textView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -10),
            textView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 10),
            textView.bottomAnchor.constraint(equalTo: hideKeyboardButton.topAnchor, constant: -10),
            
            hideKeyboardButton.widthAnchor.constraint(equalToConstant: 300),
            hideKeyboardButton.heightAnchor.constraint(equalToConstant: 50),
            hideKeyboardButton.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            
            // MARK: - KeyboardLayoutGuide
            hideKeyboardButton.bottomAnchor.constraint(equalTo: view.keyboardLayoutGuide.topAnchor, constant: -10),
        ])
    }

В строке 6 мы привязали нижнюю границу textView к верхней границе кнопки. А в строке 14 мы привязываем нижнюю границу кнопки к верхней границе клавиатуры через keyboardLayoutGuide.

Теперь при появлении и скрытии клавиатуры наш UI подстраивается автоматически.

Надеюсь эта статья окажется полезной и поможет упростить обработку событий клавиатуры в ваших приложениях.

Полный код тестового приложения можно найти по ссылке.

Теги:
Хабы:
Рейтинг0
Комментарии7

Публикации

Истории

Работа

iOS разработчик
25 вакансий
Swift разработчик
41 вакансия

Ближайшие события

19 августа – 20 октября
RuCode.Финал. Чемпионат по алгоритмическому программированию и ИИ
МоскваНижний НовгородЕкатеринбургСтавропольНовосибрискКалининградПермьВладивостокЧитаКраснорскТомскИжевскПетрозаводскКазаньКурскТюменьВолгоградУфаМурманскБишкекСочиУльяновскСаратовИркутскДолгопрудныйОнлайн
3 – 18 октября
Kokoc Hackathon 2024
Онлайн
10 – 11 октября
HR IT & Team Lead конференция «Битва за IT-таланты»
МоскваОнлайн
25 октября
Конференция по росту продуктов EGC’24
МоскваОнлайн
7 – 8 ноября
Конференция byteoilgas_conf 2024
МоскваОнлайн
7 – 8 ноября
Конференция «Матемаркетинг»
МоскваОнлайн