[ios] 슬라이드 메뉴 만들기
안녕하세요. 오랜만에 iOS 포스팅으로 찾아뵙습니다. 오랜만에 글을 쓰는만큼 오늘은 좀 더 실용적이지만 생각보다 간편하게 만들 수 있는 슬라이드 메뉴 바를 만들어 보는 시간을 갖도록 하겠습니다.
iOS 슬라이드 메뉴바를 구글에 검색해보면 대표적인 라이브러리가 하나 있습니다. 바로 SWRevealViewController 입니다. 저도 처음에는 이것을 이용해서 슬라이드 메뉴를 만들어보았습니다. 하지만 스토리보드를 이제 사용하지 않는 저에게는 그다지 메리트 있는 라이브러리는 아니였습니다. 그리고 사용법을 익히는 것도 저에게는 부담스럽더라구요.
그래서 저는 제가 직접 만들어보기로 했고 생각보다 쉽게 원하는 기능을 구현하여셔 공유하고자 이렇게 포스팅으로 남기려 합니다. 먼저 이번 포스팅을 보다 명확히 이해하시려면 코드로 뷰를 짜고 Auto Layout을 작성하는 법을 아셔야 합니다. 제가 작성한 관련 포스팅도 있으니 먼저 읽고 이 글을 읽어주시면 이해하는데 큰 도움이 되실겁니다.
그럼 바로 시작해보도록 하겠습니다.
1. Setting
최근 저의 포스팅들을 보시면 스토리보드를 사용하지 않는 것을 확인하실 수 있습니다. 스토리보드를 사용하지 않고 프로젝트를 진행하기 위해서는 몇가지 단계가 있습니다.
Main.storyboard 파일 삭제Info.plist에서 Main storyboard file Key-Value 삭제- 새로운
ViewController를 xib파일과 함께 만들기 (New file -> Cococa Touch Class -> UIViewController -> xib check)
AppDelegate.swift에 코드 작성
이렇게 기본적인 스토리보드 없이 프로젝트를 시작하기 위한 세팅이 끝났습니다. 이제 본격적으로 코드를 작성해보도록 하겠습니다.
2. Implementation
먼저 저는 MainVC 뷰 컨트롤러를 UINavigationController의 rootViewController로 설정해주었기 때문에 기본적으로 navigationItem을 추가할 수 있습니다. 이를 이용해서 슬라이드 메뉴가 나오도록 하는 버튼을 만들어보도록 하겠습니다.
메뉴 버튼에 대한 액션의 메소드를 구현해주기전에 앞서 먼저 메뉴에 해당하는 뷰와 메인 화면이 될 뷰를 만들어보도록 하겠습니다.
- 슬라이드 메뉴가 될 뷰의 너비를 150으로 정해놓도록 하겠습니다.
- 제가 만들 메뉴가 될 뷰입니다.
- 그리고 현재 보고 있는 메뉴의 화면이 될 뷰, 즉 어플리케이션의 메인 뷰가 됩니다.
navigationBar의 최대 Y 좌표를 통해 메뉴 뷰와 메인 뷰가 상단에서 얼마나 떨어져있어야 하는지를 알 수 있습니다.- 메뉴 바의 너비는 이후 애니메이션 효과를 주기 위해서 다른 범위의 메소드에서도 사용되어야 하기 때문에 이를 클래스 프로퍼티 변수로 뽑아서 사용하였습니다.
- 5번과 동일한 이유로 이후 애니메이션 효과를 주는 다른 범위의 메소드에서 사용될 예정입니다.
현재 슈퍼 뷰위에는 총 세 개의 뷰가 올라와 있는 상태입니다. navigationBar, mainView, menuView. 현재 상태를 간단한 그림으로 표현하자면 다음과 같습니다.
즉 현재 menuView는 좌표상 스크린에 나타나지 않게 됩니다. frame의 좌표의 원리가 이해가 안되신다면 제가 작성한 글을 참고해주세요. [ios] bounds vs frame?
그럼 이제 남은 것은 숨어있는 menuView가 메뉴 버튼이 눌렸을 때 왼쪽에서 오른쪽으로 나오면 됩니다. 해당 작업은 위에서 작성한 menuBtnTapped 메소드에서 구현해줍니다.
이렇게 다른 메소드에서도 해당 NSLayoutConstraint의 값을 변경시켜주어야 하기 때문에 위에서 클래스 프로퍼티로 뽑아낸 것입니다. 이제 위에서 작성한 setupMenuView 메소드를 viewDidLoad에서 호출합니다. 그럼 viewDidLoad의 최종 모습은 다음과 같을 것입니다.
이제 프로젝트를 실행시켜보면 메뉴 뷰가 옆에서 등장하는 것을 확인할 수 있습니다. 하지만 뭔가 많이 어색하죠!? 이를 해결하기 위해 저는 애니메이션을 사용하였습니다.
이렇게 NSLayoutConstraint의 constant값을 바꾸고 밑에 해당 코드들을 작성해주면 애니메이션 효과가 일어나게 됩니다. 이에 대한 자세한 내용들은 추후에 더욱 공부를 한 후 다뤄보도록 하겠습니다.
3. Advanced
기본적인 슬라이드 메뉴는 완성했습니다. 하지만 아직은 뭔가 부족하죠!? 이제 menuView에 UITableView를 넣어주고 셀을 클릭했을 때 추가적인 애니메이션을 거쳐 메뉴가 사라지는 코드를 작성해보도록 하겠습니다.
UITableView에 익숙하신 분이라면 UITableViewDelegate나 UITableViewDataSource에 대해서는 잘 아실겁니다. 위의 예제에서는 임의로 5개의 셀과 빈 셀을 생성하였습니다.- 그리고
UITableView를 생성하고 menuView에 붙이는 과정 또한 위의 뷰를 작성하는 것을 이해하셨다면 크게 어렵지 않을 것이라 생각됩니다.
이제 셀을 클릭하면 특정 애니메이션 효과와 함께 메뉴가 들어가는 코드를 작성해보도록 하겠습니다.
- 셀이 클릭 된다면 메뉴의 너비가 증가되었다가 사라지는 애니메이션 효과를 줄 것이기 때문에 먼저 너비 제약의 상수를 기존 값에 +20을 해줍니다.
- 그리고 너비가 늘어나는 효과를 줄 것이고 해당 효과가 끝나면 차례로 후행 클로져에 해당하는 애니메이션 코드가 실행됩니다.
- 너비가 늘어났기 때문에 줄어들 사라질 때는 늘어난 너비만큼 더 들어가야 합니다.
- 그리고 해당 애니메이션이 끝난 후에는 반드시 너비 제약과 왼쪽 제약을 모두 원상 복귀 시켜주어야 다음에 클릭했을 때도 동일한 효과를 볼 수 있습니다.
그럼 이제 결과물을 확인해보도록 하겠습니다.
마무리
오늘은 이렇게 간단하게 슬라이드 메뉴를 만들어보았습니다. 애니메이션을 완벽하진 않지만 직접 다뤘다는 것에서 재밌었던 예제였고 스토리보드보다 직접 코드를 작성하는 것이 더욱 편리할 수 있다는 것을 보여준 예제이지 않을까 싶습니다. 감사합니다.
