SwipeMenuDemo like as iOS Facebook App.

제목 그대로 Path와 Facebook에서 사용하고 있는 SwipeMenu를 만들어보았습니다.

구조는 아주 간단합니다.
YBSwipeViewController가 Controller 역할을 하며, 이 인스턴스에는 Menu로 사용될 View Controller와 Content 영역에 사용될 View Controller가 정의되어 있습니다. Touch move될 때 Content View도 함께 움직이며 ended 되었을 때 Menu를 보여줄지 Content를 보여줄지 판단이 되어 애니메이션 블락으로 구현되었습니다.

다른 개발자분들이 만든 예제들도 있었지만 한 번 만들어보자는 생각에 만들어 본 녀석이라 참고만 하셔도 좋습니다. 구조는 데모 코드를 보면 쉽게 이해되시리라 믿습니다.

여기에서 배운 교훈은

1. 하나의 View Controller에 여러 view가 subview 되었을 때는 상단 StatusBar를 터치해도 scroll to top이 되질 않습니다. 따라서 YBSwipeViewController 코드에서 볼 수 있듯이 메뉴 view는 나타나기 전에는 addSubview, 사라졌을 때는 removeFromSuperview가 수행되어야 합니다. iOS5만 지원할 경우에는 childViewController로 쉽게 해결 할 수 있는데 iOS4 지원을 위해서는 삽질(?)을 해야했습니다.

2. Swipe를 위한 GestureRecognizer는 쉽게 생각해서 UISwipeGestureRecognizer를 이용한다고 할 수 있으나, touch move가 되어야 한다면 UIPanGestureRecognizer를 이용하여야 합니다. 즉, Swipe의 요구사항에 따라 적절히 사용해야 합니다.

3. iPhone에서는 메뉴가 나타났을 때 오른쪽으로 걸쳐있는(?) content view의 동작이 되지 않아야 하며, iPad의 경우는 요구사항에 따라 달라질 수 있다는 것을 생각해야 합니다. 이 부분은 간단히 userInteractionEnabled 값으로 조정가능합니다.

4. UI를 쉽게 보면 안된다는 점은 항상 느끼고 있습니다. UI/UX에 대한 관심도가 집중하니만큼 단순 코딩실력보다는 UI/UX를 고민해야 한다는 점을 다시 한 번 상기하는 계기가 되었습니다.

해당 코드는 github에 공개되어 있으며,
https://github.com/YoonBongKim/SwipeMenuDemo 에서 clone 및 다운로드 할 수 있습니다.

Leave a Comment

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