[Object-c] 3. 슬라이드 메뉴 만들기

안녕하세요 이번 포스팅은 슬라이드 메뉴 만들기 입니다. 슬라이딩 메뉴는 주로 좌측이나 우측에 위치해 , 슬라이딩 모션이나 메뉴 버튼을 눌렀을때 나타나는 메뉴로 앱의 부가적인 정보나  회원 정보등을 주로 담고 있습니다.

슬라이딩 메뉴 라이브러리 찾기

슬라이딩 메뉴는 이미 많은 라이브러리가 존재하기 때문에 직접 구현하기 보다는 원하는 종류를 찾아 쓰시는 것을 추천합니다. 코코아 컨트롤에서 주로들 찾는다고 하시더라구요.  저는 LGSideMenuController를 선택했습니다. 특별한 이유는 없습니다. LGSideMenuController 링크로 이동하시면 Preview를 통해 어떤 종류의 슬라이드 메뉴를 제공하는지 알 수 있습니다. 이처럼 대부분의 라이브러리가 Preview를 통해 제공하기 때문에 라이브러리를 선택하는 시간을 줄여줍니다. 라이브러리 설치 방법으로  'With source code', 'With CocoaPods', 'With Carthage'  3가지를 제공하는데 저는 2번째인 'With CocoaPods' 를 선택하겠습니다. 설치 방법은 제 포스팅을 참고해주세요 상단 링크의 포스팅을 참고하셨으면 설치는 완료입니다. 이어서 사용방법을 알아보겠습니다. 사용 방법 또한 코드 및 스토리보드를 이용한 방법 2가지를 제공합니다. 여기서 저는 스토리보드 방법을 선택했습니다. 가능하다면 코드를 이용한 방법도 업데이트 하도록 하겠습니다

LGSideMenuController 연결

스토리 보드에 View Controller 를 생성해 LGSideMenuController클래스와 연결 시킵니다. [ 아래그림 참조 ]

Root View 와 SlideMenuController 연결

root View는 기존에 생성된 View Controller 나 새로 생성해 SlideMenuController와 연결 시켜줍니다. slideMenuController[좌측] 상단에서 우클릭 드래그로 rootViewController[우측] 에 놓고 'slide menu'를 선택합니다.

Story board Segue 설정

전단계에 연결한 segue에 identifier를 root로 설정합니다.

좌측 메뉴 설정

슬라이드 메뉴로 기존에 있는 View Controller를 사용하거나, 새로 생성합니다. 라이브러리가 제공하는 예제에는 좌우 메뉴가 존재하지만 저는 좌측 메뉴만 사용할 예정이라 하나만 사용하겠습니다. 생성후 전단계와 동일하게 SlideMenuController 와 연결 시킨후 segue에 identifier를 left로 설정합니다.

버튼 이벤트 연결

전단계까지 모두 완료 하시고 빌드하시면 좌측 슬라이딩시 메뉴가 나오는 걸 확인할 수 있습니다. 이제 버튼 터치를 통해 메뉴가 나오도록 하겠습니다. 스토리보드에서 rootview Controller에 버튼을 생성하고 우클릭후 버튼 이벤트를 연결합니다. 버튼이 눌렀을때 메뉴가 나오도록 해야하기 때문에 'showLeftViewAnimated'를 선택합니다.

옵션 설정

슬라이드 메뉴 크기와 같은 옵션들을 설정할 수 있습니다. 저는 넓이와 애니메이션 효과만 설정 했습니다. 애니메이션 효과는 현재 1번인데 예시로 나와있는 순서에 맞게 번호를 적용후 간단하게 테스트 해보시면 확인 하실 수 있습니다.

여기까지 완료하시면 간단한 슬라이드 메뉴가 완성 됐습니다.

다음은 뷰 전환을 주제로 포스팅 하겠습니다.  감사합니다.

※해당 포스팅은 지극히 주관적인 내용으로 저자의 복기 목적으로 작성된 것이고, 내용에대해 수정이나 추가 요청은 언제든 환영합니다.