RxSwift KeyBoard (RxKeyBoard) 간단한 사용법

먼저 view 백그라운드 컬러를 잘보이게 핑크로 지정하고

textField (흰색) 의 bottom constraint 를 safeAreaLayoutGuide 로 설정했습니다.

func configureUI() {
	view.backgroundColor = .systemPink
	view.addSubviews([textField])

	textField.snp.makeConstraints {
		$0.height.equalTo(50)
		$0.leading.trailing.bottom.equalTo(view.safeAreaLayoutGuide)
	}
}

 

import RxKeyboard

// 중략

 func subscribe() {
 	RxKeyboard.instance.visibleHeight
 		.drive(onNext: { [unowned self] keyboardHeight in
 			print("keyBoard 높이는 \(keyboardHeight) 입니다.")
 		})
 		.disposed(by: disposeBag)
 }

 

먼저 이렇게 keyboardHeight 를 출력해보면

 

이런 식으로 keyBoard 의 높이를 알 수 있습니다.

 

 func subscribe() {
 	RxKeyboard.instance.visibleHeight
 		.drive(onNext: { [unowned self] keyboardHeight in
 			textField.snp.updateConstraints {
 				$0.bottom.equalTo(view.safeAreaLayoutGuide).offset(-keyboardHeight)
			 }
 			view.layoutIfNeeded()
 		})
 		.disposed(by: disposeBag)
 }

여기서 이렇게 textField 의 bottom constraint 에 offset -keyboardHeight 를 주게 되면

이런 식으로 textField 의 위치를 update 할 수 있습니다.

 

그러나 bottom 의 safeArea 때문에 시각적으로 좋아보이지 않습니다.

 

RxKeyboard.instance.visibleHeight
	.drive(onNext: { [unowned self] keyboardHeight in
		let height = keyboardHeight > 0 ? -keyboardHeight + view.safeAreaInsets.bottom : 0

		textField.snp.updateConstraints {
			$0.bottom.equalTo(view.safeAreaLayoutGuide).offset(height)
		}

		view.layoutIfNeeded()
	})
.disposed(by: disposeBag)

이렇게 keyboardHeight 가 0 일 때는 0으로 설정하고

그렇지 않을 때는 -keyboardHeight + view.safeAreaInsets.bottom 으로 설정하면

이렇게 깔끔하게 나오게 됩니다.