[iOS] 키보드가 텍스트필드를 가릴때 해결법(When the keyboard covers text field)

안녕하세요 Foma 👟 입니다!

 

오늘은 텍스트필드를 만들다보면 정말 자주 만나는 키보드 문제에 대해서 다뤄보려고 해요.

 

시뮬레이터로 개발하다보면 키보드의 위치를 고려하지 않고 짜다가 키보드가 올라오는 순간 

 

키보드 아래에 있는 텍스트필드나 버튼들이 가려지곤 하는데요.

 

오늘은 이것에 대한 해결법을 정리하도록 하겠습니다.

 

바로 시작할게요!

---

Preview

 

 

---

Storyboard

 

아래 화면과 같이 텍스트필드와 버튼이 비교적 아래에 있도록 만들어 주겠습니다.

 

 

View에는 Tap Gesture Recognizer를 달아놓겠습니다.

 

 

---

ViewController

 

스토리보드에서 만들어준 텍스트필드와 버튼을 연결해줍니다.

    @IBOutlet weak var textField: UITextField!
    @IBOutlet weak var button: UIButton!

Tap Gesture Recognizer도 연결시켜주어 뷰를 탭했을 때 키보드가 내려가도록 설정해줍니다.

  @IBAction func tapBackgroundView(_ sender: Any) {
        view.endEditing(true)
    }

 

그리고 실행을 시켜서 키보드를 올려보면 (cmd + k를 누르면 됩니다.)

 

아래와 같이 화면을 덮죠?

---

해결법

 

제가 생각한 해결법은 아래와 같습니다.

 

1. 키보드가 사용될 때를 감지한다

 

2. 키보드 높이를 측정한다.

 

3. 키보드 높이만큼 뷰의 y를 올려준다.

 

4. 키보드가 내려갈 때를 감지한다.

 

5. 키보드 높이만큼 뷰의 y를 내려준다.

 

---

1. 키보드가 사용될 때를 감지한다

 

UIViewController + Extension.swift

 

모든 뷰컨트롤러에 적용하기 위해서 UIViewController + Extension.swift를 만들어주었습니다.

 

아래와 같이 키보드 옵저버를 세팅하는 메소드를 만들어줍니다.

 

NotificationCenter와 UIResponder를 활용해서 키보드가 올라올 때를 감지할 수 있도록 합니다. 

 

import UIKit

extension UIViewController {
    
    func setKeyboardObserver() {
        NotificationCenter.default.addObserver(self, selector: #selector(UIViewController.keyboardWillShow), name: UIResponder.keyboardWillShowNotification, object: nil)
    }
}

 

2. 키보드 높이를 측정한다.

 

아래와 같이 키보드가 보일때 키보드의 높이를 계산해줍니다.

 @objc func keyboardWillShow(notification: NSNotification) {
        if let keyboardFrame: NSValue = notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? NSValue {
                let keyboardRectangle = keyboardFrame.cgRectValue
                let keyboardHeight = keyboardRectangle.height
        }
    }

 

3. 키보드 높이만큼 뷰의 y를 올려준다.

 

아래와 같이 현재 뷰의 origin.y에 키보드 높이만큼 빼줍니다.

  @objc func keyboardWillShow(notification: NSNotification) {
        if let keyboardFrame: NSValue = notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? NSValue {
                let keyboardRectangle = keyboardFrame.cgRectValue
                let keyboardHeight = keyboardRectangle.height
            UIView.animate(withDuration: 1) {
                self.view.window?.frame.origin.y -= keyboardHeight
            }
        }
    }

 

4. 키보드가 내려갈 때를 감지한다.

 

setKeyboardObserver에 아래와 같이 내려갈 때를 감지하는 코드를 추가해줍니다.

 

   func setKeyboardNotification() {
      
        NotificationCenter.default.addObserver(self, selector: #selector(UIViewController.keyboardWillShow), name: UIResponder.keyboardWillShowNotification, object: nil)
        
        NotificationCenter.default.addObserver(self, selector: #selector(UIViewController.keyboardWillHide), name: UIResponder.keyboardWillHideNotification, object:nil)
        
    }

 

5. 키보드의 높이만큼 y를 내려준다.

 

키보드를 높힐 때와 마찬가지로 높이를 구해서 현재 뷰의 origin.y에 키보드 높이만큼을 더해줍니다.

 

 @objc func keyboardWillHide(notification: NSNotification) {
        if self.view.window?.frame.origin.y != 0 {
            if let keyboardFrame: NSValue = notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? NSValue {
                    let keyboardRectangle = keyboardFrame.cgRectValue
                    let keyboardHeight = keyboardRectangle.height
                UIView.animate(withDuration: 1) {
                    self.view.window?.frame.origin.y += keyboardHeight
                }
            }
        }
    }

---

ViewController

 

뷰컨트롤러에 키보드 옵저버를 세팅해서 실행해보면 

 

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var textField: UITextField!
    @IBOutlet weak var button: UIButton!
    
    override func viewDidLoad() {
        setKeyboardObserver()
    }
    @IBAction func tapBackgroundView(_ sender: Any) {
        view.endEditing(true)
    }
}

 

아래와 같이 키보드가 올라올 때 뷰가 그만큼 올라가고 내려갈 때 그만큼 내려가게 됩니다!

 

 

---

---

Source Code

 

---

오늘은 간단하게 키보드가 텍스트필드나 다른 것들을 덮어버릴 때의 문제점을 해결해보았습니다!

혹시라도 도움이 되셨거나 궁금하신 점이 있으면 언제든 댓글로 달아주세요!