[iOS] Swift 라이브러리 'SideMenu'로 사이드바 구현하기 - 1

사용하는 라이브러리 : https://github.com/jonkykong/SideMenu

GitHub - jonkykong/SideMenu: Simple side/slide menu control for iOS, no code necessary! Lots of customization. Add it to your pr

 

직접 스토리보드 없이 코드로 커스텀하여 만드는 방법, 라이브러리를 사용해서 만드는 방법 등 사이드바 구현하려고 별별 방법들을 찾아보았는데 너무 어렵거나 만든 이후의 화면과 연결을 못하겠어서 좌절하고 있다가 겨우 간단하게 만드는 법을 찾아냈다.

이 게시글은 '스토리보드를 이용한 사이드 메뉴 만들기' 이고, 스토리보드 없이 만드는 법은 유튜브에 좋은 강의가 많으니 그걸 참고하면 될 것 같다..ㅠㅠ

 

예제 완성 미리보기

---

0. 라이브러리 설치

우선 프로젝트를 먼저 생성하고, 프로젝트를 닫고 해당 폴더에 pod 파일을 생성해준다.

해당 파일들이 있는 경로에 설치해주면 된다.

'pod init' 을 치고 나면 위와 같이 Podfile이 생성될텐데, Finder에서 해당 폴더에 들어가 텍스트 편집기로 수정해주건 터미널에서 vi 에디터로 수정해주건 방법은 상관없고, Podfile 내 내용만 다음과 같이 수정해주면 된다.

위와 같은 위치에 pod 'SideMenu' 를 추가해준 뒤 저장하고, 다시 터미널에서 'pod install'을 입력해주면 설치 완료!

그럼 이제 해당 폴더에 위와 같이 .xcodeproj 옆에 추가적으로 .xcworkspace 파일이 생겼을텐데, .xcworkspace 파일에서 작업을 진행해주면 된다.

 

---

1. 스토리보드 설정

1.1 초기 화면 구성

Main.storyboard에서 기본 ViewController를 삭제하고, Navigation Controller를 추가한 뒤, Navigation Controller에 Is Initial View Controller를 체크하여 초기 화면으로 설정해준다.

자유롭게 화면을 구성해주기 위해 기존의 Root View Controller Scene을 지우고, 새 View Controller를 추가한 뒤 네비게이션 컨트롤러에 연결해준다.

네비게이션 컨트롤러가 선택된 상태에서 우클릭 한채로 새로운 뷰 컨트롤러까지 드래그한 뒤, Relationship Segue로 root view controller를 선택해준다.

위와 같은 화면이 나오면 연결성공

누르면 사이드바가 나올 수 있도록 bar button item을 뷰 컨트롤러 안의 네비게이션 바의 원하는 위치(왼쪽/오른쪽)에 추가해준다. 제법 그럴싸해보이게 Image도 설정해준다.

이 상태에서 실행해보면 다음과 같은 화면이 나온다.

 

1.2 사이드메뉴 화면 연결

다시 Navigation Controller를 새로 하나 추가해준 뒤, Class를 'SideMenuNavigationController'로 설정해준다.

여기까지 했으면 다음과 같이 총 4개의 컨트롤러 씬이 존재한다.

 

메인 컨트롤러쪽의 햄버거 버튼을 선택한 뒤, 오른쪽 마우스 버튼을 누른 상태로 Side Menu Navigation Controller까지 드래그하여 연결을 해주고, Action Segue를 show로 선택한다.

여기까지 완료한 후 실행하면 햄버거버튼은 왼쪽에 있는데 테이블 뷰는 오른쪽에서 튀어나오는 광경을 목격할 수 있을텐데, 이 때는 Side Menu Navigation Controller에서 Left Side를 On으로 설정해주면 된다.(오른쪽에서 튀어나오는 것을 의도했을 경우 Off로 설정)

다시 실행시키면 왼쪽에서 잘 나온다.

 

상단에 Root View Controller를 없애고 싶으면 앞서 초기화면 구성 과정과 같이 기존의 Root View Controller를 지운 뒤 View Controller로 대체해도 되고, 단순히 Title을 지워도 된다. 나는 View Controller로 바꾼 다음, 뷰 컨트롤러 내부에 Table View를 추가했다.

 

여기까지 하면 쌩 기본 설정 완료!