iOS Swift 텍스트필드 키보드 가림 현상 해결 ( Android와 똑같게 )

안녕하세요 Gons 입니다.

오늘은 키보드가 텍스트필드를 가릴 때 조치방법을 알아보겠습니다.

안드로이드에 plain text 는 자동으로 키보드가 가리지 않게 해주는데

아이폰은 그런게 없습니다.

그래서 해결해보겠습니다.

 

단순히 가리지 않도록 키보드 높이만큼 뷰를 올려주는게 아니라

Android랑 똑같이 스크롤도 되도록 해보겠습니다.

시작하겠습니다.

 

 

 

 

 

 

 

 

먼저 스토리보드에서 스크롤뷰로 화면을 꾸며주세요.

 

이런식으로 키보드가 텍스트뷰를 가릴 수 있도록 텍스트뷰만 하단으로 배치해서 원하시는대로 화면을 만들어주세요.

 

 

 

 

 

 

확인하기 좋게 이미지도 넣어줍니다.

스크롤뷰 안의 내용물들은

텍스트 필드와 버튼은 높이를 안줬고

이미지뷰는 높이를 줬습니다.

100, 200 이런 수치 아니고,

가로 1 일 때 세로 2 이런식으로 비율로 줬습니다.

(오늘 우리가 하려는 기능 "키보드 올라갔을 때 텍스트필드 가리지 않고, 윗부분 스크롤 되게 하기" 에 필요합니다.

내용물 높이 안주고 그냥 제약만 주면 키보드 보일 때 스크롤 안됩니다. ) 

 

 

 

 

 

 

텍스트 필드를 아울렛 변수로 등록해주세요.

@IBOutlet var myTextField: UITextField!

 

 

 

키보드 높이를 저장할 변수 하나 만들어주시고요.

var keyHeight: CGFloat?

 

 

 

 

키보드가 나타날 때 실행할 매서드를 생성해주세요.

    @objc func keyboardWillShow(_ sender: Notification) {
        let userInfo:NSDictionary = sender.userInfo! as NSDictionary
        let keyboardFrame:NSValue = userInfo.value(forKey: UIResponder.keyboardFrameEndUserInfoKey) as! NSValue
        let keyboardRectangle = keyboardFrame.cgRectValue
        let keyboardHeight = keyboardRectangle.height
        keyHeight = keyboardHeight

        self.view.frame.size.height -= keyboardHeight
    }

뷰의 높이를 키보드 높이만큼 빼줍니다.

 

 

 

 

키보드가 사라질 때 실행할 매서드를 생성해주세요.

    @objc func keyboardWillHide(_ sender: Notification) {
        
        self.view.frame.size.height += keyHeight!
    }

다시 뷰 높이를 원래대로 해줍니다.

 

 

 

 

키보드 사라지는거 테스트할 수 있도록 버튼 누를 때 없애보도록 하고요.

    @IBAction func btnClicked(_ sender: Any) {
        myTextField.resignFirstResponder()
    }
    

 

 

 

키보드 보일 때 , 사라질 때 옵져버를 통해 우리가 만든 매서드를 등록해주겠습니다.

    override func viewDidLoad() {
        super.viewDidLoad()

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

 

 

 

 

 

 

바로 실행해보겠습니다.

잘 실행되네요.

키보드가 텍스트 필드를 가리지 않고,

안드로이드와 같이 윗부분을 스크롤할 수도 있습니다.

 

이번 글은 스크롤뷰를 할줄 아신다는 전제하에 작성하였습니다.

단순히 키보드 높이만큼 self.view 의 origin.y 값만 들어올린다면 

스크롤뷰가 필요없지만 그렇게 되면 윗부분이 화면 위로 올라가서

키보드가 보이는 상태에선 윗부분 내용을 확인할 수 없겠죠.

 

 

도움이 되셨길 바랍니다.

잘 안되는 부분이 있다면 댓글로 알려주세요.

저는 또 다음에 유용한 기능으로 찾아오겠습니다.

감사합니다.