[iOS] UIKeyboardLayoutGuide를 사용한 키보드 대응

요즘 회사에서 여러 신규 화면을 개발하면서 키보드 대응을 할 일이 많아졌음(힘들다)

예전에는 NotificationCenter를 사용해서 키보드의 나타나고 사라지는 시점을 알아내서 처리했다면, iOS 15이상에서는 UIKeyboardLayoutGuide라는 친구를 사용할 수 있음.

iOS15이상에서 사용이 가능하기 때문에 낮은 버전에서는 사용이 불가능 하다는 단점이 있지만 그 이상에서 UIKit으로 개발할 때 유용하다고 생각이 듬. 

기본적인 사용방법은 매우 간단하지만 상황에 따라서 레이아웃을 조금 다르게 잡아주어야 하는 부분이 있어서 그 부분을 포스팅 해보려고 함. 

썸네일용 오늘도 코딩하는 루피

 

1. 텍스트 필드와 같은 컴포넌트들이 키보드에 가려지지 않고, 버튼만 키보드에 가려지는 경우

   nextButton.snp.makeConstraints { make in
       make.horizontalEdges.equalTo(view.safeAreaLayoutGuide).inset(20)
       make.bottom.equalTo(view.keyboardLayoutGuide.snp.top).offset(-20)
}

 

button.bottom = view.keyboardLayoutGuide.top 으로 맞추고 필요한 만큼 offset을 주면 됨.

이렇게 하면 키보드가 움직일 때 버튼이 그에 따라 20만큼의 간격을 유지한 채 움직이게 됨.

키보드가 내려가 있을 때는 safeArea의 bottom에 20만큼의 간격을 유지하게 됨.

 

2. 텍스트 필드와 같은 컴포넌트들이 키보드에 가려지는 경우

이렇게 화면에 텍스트필드가 많은 화면이라면 아무리 버튼에 키보드 레이아웃을 적용해도 화면이 그에 맞춰 올라가지지 않음.

이럴 때는 스크롤뷰를 활용해서 버튼과 함께 컴포넌트들도 올라가도록 할 수 있음.

 

뷰의 계층 관계는 아래와 같음

1. view에 scrollView, nextButton을 각각 추가(매우 중요⭐️)

2. scrollView하위에 contentView를 추가

3. contentView 하위에 TextField들을 추가

 

 

가장 주된 레이아웃은 아래와 같음

1. scrollView의 bottom과 nextButton의 top을 연결

2. nextButton의 bottom을 keyboardLayout의 top과 연결

3. scrollView 내부의 크기를 잡아주기 위해 마지막 컴포넌트인 fifthTextField의 bottom 연결

 

   override func viewDidLoad() {
        super.viewDidLoad()
        
        scrollView.snp.makeConstraints { make in
            make.top.horizontalEdges.equalTo(view.safeAreaLayoutGuide)
            make.bottom.equalTo(nextButton.snp.top).offset(-20)
        }
        
        contentView.snp.makeConstraints { make in
            make.edges.equalToSuperview()
            make.width.equalTo(scrollView)
        }
        
     	 // 생략
        
        fifthTextField.snp.makeConstraints { make in
            make.top.equalTo(forthTextField.snp.bottom).offset(40)
            make.horizontalEdges.equalToSuperview().inset(30)
            make.bottom.equalToSuperview().inset(30)
        }
        
        
        nextButton.snp.makeConstraints { make in
            make.horizontalEdges.equalTo(view.safeAreaLayoutGuide).inset(20)
            make.bottom.equalTo(view.keyboardLayoutGuide.snp.top).offset(-20)
        }
    }

 

이렇게 레이아웃을 잡으면 포커스된 텍스트 필드에 맞춰 스크롤링 되도록 만들 수 있음.

 

 

참고자료

WWDC 
https://developer.apple.com/kr/videos/play/wwdc2021/10259/

공식문서
https://developer.apple.com/documentation/UIKit/adjusting-your-layout-with-keyboard-layout-guide