핀터레스트에 올라온 UI/UX 관련 자료를 들여다보다가 문득 이런 것이 있으면 어떨까하고 구현하기 시작했습니다.
제목은 Horizontal Timeline Indicator 로 적었는게 이름만 거창하지 단순한 컨셉입니다.
간단히 그려본 기능 정의서입니다. (영문이 다소 잘못 쓰이거나 틀렸더라도 양해부탁드립니다 ㅠㅠ)
화면의 각 섹션은 편의상 색상으로 구분했으며 구성 목적상 세션이라고 표현하겠습니다. (몸담고 있는 회사의 H3 2012 iOS Client 에 적용해볼까해서 만들기 시작했습니다.)
전체는 첫 번째 세션의 시작시간부터 마지막 세션의 끝나는 시간까지를 나타냅니다.
타임라인 위에는 전체 시간 중에서 현재 시간을 나타내는 인디케이터(Indicator A)와 사용자가 터치한 곳의 정보를 보여줄 인디케이터(Indicator B)가 존재합니다.
사용자가 터치를 시작했을 경우에는 터치 후(touchedBegan) 손가락의 움직임(touchedChanged)에 따라 따라 Indicator B가 움직이며 위치한 시간을 알려주는 인디케이터가 나타납니다.
(최종적으로는 세션 제목을 보여줄 생각입니다.)
터치가 끝나면(touchedEnded) 움직이던 Indicator B가 Indicator A로 이동하면서 사라집니다.
이 컨트롤러는 drawRect:를 사용해서 각 세션에 색상을 입히는 코드와 UIPanGestureRecognizer를 이용하여 터치 시작/변화/끝을 정의하였고
아날로그 시계 역시 drawRect:를 이용하였으며 drawRect:를 호출하기 위해 [self setNeedsDisplay] 메소드 호출 방법을 사용하였습니다.
현재는 인디케이터에 아날로그 시계만 배치하였지만 여기에는 위치한 시간의 세션 제목을 알려주거나 기타 정보를 보여줄 수도 있겠네요.
코드는 조금 더 정리가 된 후에 github에 오픈하겠습니다.
아래는 데모 영상입니다.
