UITextField의 Placeholder에 animation 효과를 적용한 것처럼 보이게 구현하기

음.. 제목 정하기가 참 힘드네요. UITextField는 보통 로그인과 회원가입 시 유저에게 문자열을 입력받기 위해서 많이 사용합니다.
로그인 페이지에 대해서 이런저런 고민이 있어 pinterest를 검색하던 와중에 아래의 UI 컨셉을 발견했습니다.

부연 설명을 하자면,
UITextField에 특정값 입력을 유도하는 placeholder는 입력이 시작되면 사라지게 되어 있습니다. 이 때 위 화면과 같이 타이틀이 별도로 없는 UI구성일 때는 좀 애매한 경우가 생기기도 하는데 재치있게 풀었더군요. 그래서 구현을 해봤습니다! (사실 다 아시는 건데 기록은 남겨야겠기에..)

아래 영상은 위 컨셉과 유사하게 컴포넌트를 적용한 화면입니다.

똑같진 않지만 비슷한가요…? 원리는 UITextField를 상속받은 클래스에 UILabel을 임의로 하나 더 addSubview 합니다.
사실 가장 효율적인 방법은 placeholder를 보여주는 view를 조작하는 것인데 쉽게하기로 맘먹고 UILabel을 배치했습니다.

이 코드에서 가장 중요한 포인트는 changeStatus입니다. enum으로 정의된 status에 따라 UILabel의 animation이 수행되도록 했습니다.

!! 아래 노출되는 코드들은 Swift 2.0 기준입니다.

그 다음은 UITextField delegate의 각 이벤트 메소드에 상황에 따른 status 변경을 합니다. 위 코드에서 정의한 changeStatus를 적절하게 호출합니다.

비교적 쉽게 concept 디자인의 UITextField를 완성했습니다. (팁이나 될려나 몰겠네요..)

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.