TextField Hide Problem
안녕하세요. 오늘은 TextField가 키보드에 의해 가려지는 상황을 해결하는 방법에 대해 알아보도록 하겠습니다.
상황은 다음과 같을 것입니다.
우리는 TextField를 일정 크기만큼 올려줌으로써 위와 같은 상황의 문제점을 해결할 수 있습니다. 그럼 바로 코드로 작성해보도록 하겠습니다.
1 NotificationCenter
먼저 TextField 하나를 ViewController 위에 올려주고 코드로 연결시켜줍니다. 그리고 우리는 키보드가 나타날 때는 TextField를 올려주고 입력이 끝난 후 키보드가 사라지면 원래의 위치로 돌아오게끔 해야합니다.
즉 키보드가 나타나고 사리지는 행위에 대해 처리를 해줄 필요가 있고 그러기 위해서는 그러한 이벤트가 발생했다는 것을 어플리케이션 내에서 인지할 수 있어야 합니다. 이를 구현하기 위해 저는 NotificationCenter를 이용하도록 하겠습니다.
NotificationCenter에 대한 자세한 사항은 따로 포스팅을 하도록 하겠습니다.
viewDidLoad() 안에 다음처럼 코드를 작성해주세요.
NotificationCenter.default.addObserver(self, selector:
#selector(keyboardWillHide(_:)), name: .UIKeyboardWillHide,
object: nil)
NotificationCenter.default.addObserver(self, selector:
#selector(keyboardWillShow(_:)), name: .UIKeyboardWillShow,
object: nil)
위의 코드는 .UIKeyboardWillHide라는 이름의 이벤트가 발생하면 self가 처리를 할 것인데 처리할 내용은 keyboardWillHide(_:)라는 함수에 담겨져 있습니다.
라는 뜻입니다.
“키보드가 사라질 것”, “키보드가 나타날 것” 이라는 이벤트, 즉 키보드가 사라지기 전, 키보드가 나타나기 전에 해주어야할 행동을 정의한 것입니다.
그럼 이제 이러한 행동들(함수)을 정의해보도록 하겠습니다.
@objc func keyboardWillShow(_ sender:Notification){
self.view.frame.origin.y = -150
}
@objc func keyboardWillHide(_ sender:Notification){
self.view.frame.origin.y = 0
}
keyboardWillShow(_:)view의 원래y좌표를 150만큼 올리는 내용입니다. (–150인 이유는 아래 방향이 양의 방향이기 때문입니다.)keyboardWillHide(_:)키보드가 사라졌으니 원래의
y좌표 위치로 돌아오라는 내용입니다.
이제 실행을 해보시면 정상적으로 작동을 하지 않는 것을 확인하실 수 있습니다. 원인을 알아보도록 하죠!
2. UITextFieldDelegate
키보드를 사라지게 하기 위해서는 입력이 끝났다는 것을 알려야합니다. 이를 알리기 위해서 우리는 우선 UITextFieldDelegate 프로토콜을 준수해야합니다. 그리고 우리가 연결시켜준 textField의 delegate를 설정해주셔야 합니다.
class ViewController: UIViewController, UITextFieldDelegate {
@IBOutlet weak var textField: UITextField!
override func viewDidLoad(){
super.viewDidLoad()
textField.delegate = self
/*
Code
*/
}
}
입력이 끝났다는 것을 알리는 방법에는 크게 두 가지가 존재합니다.
- 키보드상에서
Done버튼 등의 입력 완료 버튼을 클릭 - 스크린 상 키보드를 제외한 아무 곳이나 터치
이 두 가지를 모두 구현해보도록 하겠습니다.
먼저 첫 번째 방법을 구현하기 위해서는 UITextFieldDelegate의 함수 중 하나인 textFieldShouldReturn(_:)를 작성해주는 것입니다. 즉 Done 버튼 등의 입력 완료 버튼이 눌렸을 때 해주어야할 행동들을 정의해주는 함수입니다.
func textFieldShouldReturn(_ textField: UITextField) -> Bool{
textField.resignFirstResponder()
return true
}
이제 Done 버튼 등의 입력 완료 버튼을 클릭하면 키보드가 사라지게 되고 이 키보드가 사라지는 이벤트가 발생하면 위에서 구현한 textFieldWillHide(_:) 함수에 의해 TextField는 제자리로 돌아올 것입니다.
두 번째 방법을 구현하기 위해서는 사용자가 키보드를 제외한 다른 영역, 즉 view를 터치했다는 것을 어플리케이션에 알려야합니다. 해당 코드를 viewDidLoad()안에 구현해줍니다.
self.view.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(endEditing)))
해당 view를 터치하면 endEditing이라는 함수를 실행시키라는 의미이고 이젠 endEditing을 정의해주도록 하겠습니다.
@objc func endEditing(){
textField.resignFirstResponder()
}
이렇게 되면 키보드가 올라왔을 때 사용자가 다른 영역을 터치하면 키보드가 내려가게 되고 이 키보드가 내려가는 이벤트는 역시 textFieldWillHide(_:)에 의해 처리되고TextField는 제자리로 돌아올 것입니다.
단 뷰의 TextField외에 탭 제스처에 대한 액션이 필요한 컴포넌트가 있다면 해당 컴포넌트의 액션은 작동하지 않으니 주의하세요
3. 마무리
그럼 이제 최종 결과물을 확인해보도록 하겠습니다.
이렇게 키보드가 올라오면 TextField가 사라지는 문제를 해결해보았습니다. NotificationCenter에 관한 글을 따로 작성하여 포스팅하도록 하겠습니다. 감사합니다.
Source : github
참고자료
- iOS ) 키보드에 의해 TextField가 가려지는 현상 해결 (Swift) - Zedd0202 님의 블로그
- Best way to dismiss Keyboard in a View Controller iOS (Swift)