[iOS] Side Menu 만들기 (2/2)

 

 

 

이전 글에서 StoryBoard에 Side Menu를 만들기 위한 작업을 했다.

 

앱이 실행되면 Storyboard에서 Initial ViewController로 지정된 RevealViewController가 호출되고

Segue Identifier가 sw_front인 Segue에 의해 ContentsViewController가 최상위에 위치하며

Segue Identifier가 sw_rear인 Segue에 의해 MenuViewController가 그보다 아래로 위치하게 된다.

 

 

이제 각 ViewController들에 기능을 연결할 것이다.

 

1. 각 ViewController.swift 파일 생성

첫 번째 콘텐츠 ViewController로 보이게 될 MainViewController.swift,

메뉴로 사용될 MenuViewController.swift를 생성한다.

 

 

 

2. Storyboard와 .swift 파일 연결

Main.storyboard를 열고 각 ViewController를 클릭하여

Identity Inspecter의 Custom Class란에 생성한 ViewController명을 입력하여 연결한다.

 

 

3. MainViewController.swift에 Gesture 추가

Contents를 보여줄 MainViewController에 revealViewController()의 panGestureRecognizer()를 추가한다.

class MainViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Open Side-Menu with Gesture
        self.view.addGestureRecognizer(revealViewController().panGestureRecognizer())
    }
    
}

 

 

MainViewController에서 self.view에 panGestureRecognizer()를 추가하면 MainViewController의 기본이 되는 View(Storyboard에서 UIViewController를 생성하면 default로 깔려있는 View. Storyboard에서 UIViewController에 화면을 그릴 때 이 View안에 그리게 된다.)에서 panGesture를 인식할 수 있게 되며, 정의된 제스처를 시도했을 때 그에 따른 무언가를 하게 된다.

 

revealViewController().panGestureRecognizer()는 오른쪽으로 swipe시 왼쪽에서 MainViewController 뒤에 숨겨진(RevealViewController에서 sw_rear Segue로 호출됐던) MenuViewController가 보이게 된다.

 

 

 

 

 

이제 SWRevealViewController 사용법을 알게 됐다.

그런데 이대로 사용하자니 메인화면이 메뉴화면을 너무 많이 가린 것 같다. 치워버리고 싶다.

그리고 메인화면에 메뉴버튼을 추가하여 클릭했을 때도 메뉴화면이 보이도록 하고 싶다.

한 번 해보자.

4. rearViewRevealWidth, revealToggle(Bool)

rearViewRevealWidth를 풀어쓰면 rearView(which revealing)'s width이다. 나의 뇌피셜이다. iOS 개발을 하면서 이렇게 뜻이 무엇일까 생각해보는 것도 나름 재미있다.

아무튼 rearVeiwRevealWidth는 rearView의 보이게될 부분의 width를 가리키는 것 일 것이다. 이제 무엇을 지칭하는 변수인지 대충 감이 왔으니 이 값을 이용해서 변화를 줘보자.

 

화면의 오른쪽 끝에서 50pt만큼 줄어든 값으로 설정했다. 이렇게 설정하면 메인화면은 50만큼만 빼꼼히 보이게 되고 나머지는 메뉴화면이 보인다.

class MainViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Open Side-Menu with Gesture
        self.view.addGestureRecognizer(revealViewController().panGestureRecognizer())
        // MenuViewController Width
        revealViewController().rearViewRevealWidth = UIScreen.main.bounds.width - 50
    }
}​

 

 

이제 메인화면에 메뉴버튼을 만들어 버튼을 누르면 메뉴화면이 나오게 해 보자.

버튼을 눌러 revealViewController().revealToggle(self)를 호출하니 메뉴화면이 열렸다.

class MainViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Open Side-Menu with Gesture
        self.view.addGestureRecognizer(revealViewController().panGestureRecognizer())
        // MenuViewController Width
        revealViewController().rearViewRevealWidth = UIScreen.main.bounds.width - 50
    }
    
    func openSideMenu() {
        revealViewController().revealToggle(self)
    }
    
    @IBAction func menuButtonClicked(_ sender: Any) {
        self.openSideMenu()
    }
    
}

 

 

 

 

 

지금까지 SWRevealViewController에 대한 아주 간단한 포스팅이었다.

메뉴화면을 오른쪽에서 나오게 하거나 본래 Obj-C로 만들어진 SWRevealViewController의 기능을 오픈소스가 아닌 Swift로 직접 만들어보는 등, SWRevealViewController가 작동하는 원리를 더 파헤쳐 보려고 했지만 귀찮다.

아니, 귀찮다기보다 Swift로 만들어진 소스를 보고 공부하다 원하는 대로 되지 않아 질려버렸다.

나중에 또 생각이 나면 그때 다시 해보려고 한다.

 

 

 

 

끝.