[Swift][UI] 로그인화면 만들기! part.1

거의 모든 서비스에서 사용되는 로그인 기능입니다.

 

목표

1. 사용자가 이메일 값을 입력할 때 마다 이의 유효성을 검사하여 알려준다. [RxSwift]

2. 키보드의 유무에 따라 다음 버튼의 크기, 위치가 애니메이션으로 바뀐다. [UI]

MVVM을 적용시켰습니다.

 

개발과정

MVVM의 틀을 잡은 후, (https://github.com/sergdort/CleanArchitectureRxSwift#application-1 를 참고하여 설계하였습니다.)

 

UI편

1. UI그리기.

2. 키보드의 유무에 따라 다음 버튼의 크기, 위치 애니메이션으로 변경시키기.

3. 이메일값의 유무에 따라 UI를 변경하여 사용자에게 해당 메일의 유효성을 확인시키기.

 

기능편

1. EmailTextField를 구독하여 실시간으로 변경되는 값을 ViewModel로 보내기.

2. View에서 전달된 이메일값의 유효성을 확인한 후 이를 다시 View로 내보내기.

 

pod 'RxSwift'

pod 'RxGesture'

pod 'RxViewController'

pod 'SnapKit'

 

SnapKit을 이용하여 코드로 UI를 그렸습니다.

 

'이제 버튼에니메이션 설정만 하면 UI는 끝나겠군!'

https://stackoverflow.com/questions/41460754/how-to-add-buttons-above-keyboard

이렇게 하면 의도한대로 버튼에 키보드 위로 버튼이!

음..? 여기서 문제점이..

바로 키보드가 사라지면 버튼도 사라진다는 것..!!

이 문제를 해결 하기 위해 약 4일을 검색하고 찾아보았습니다...

인터넷 강의도 찾아보고 갖가지 사이트들을 모두 찾아보니

 

"키보드가 나타나고 사라지는 이벤트를 감지"하는 NotificationCenter 클래스를 알게 되었습니다.

키보드가 나타났을때 키보드의 height까지 알 수 있었습니다!

 

그렇기에 바로 

키보드 이벤트를 등록한 후, 

키보드가 나타났을 시 : 키보드의 높이만큼 버튼의 y값을 올리고, width를 화면에 맞게 채운다!

키보드가 사라졌을 시 : 키보드가 나타나기 전의 크기로 다시 돌아온다.

 

그 결과!

키보드가 사라질 시 버튼이 사라지지 않고 다시 돌아오는 애니메이션을 적용시킬 수 있었습니다!