iOS Swift 라이브러리 SideMenu 사용하기

안녕하세요 Gons 입니다.

오늘은 많이들 필요한 기능일겁니다.

바로 SideMenu 입니다.

SideBar , SlideMenu , SlideBar 라고도 하죠.

직접 만들 수도 있겠지만 스와이프 하는 부분이 만들기 어려워서

이 라이브러리를 사용하는게 좋은 것 같습니다.

이번편은 조금 어려울 수도 있습니다.

바로 시작하겠습니다.

잘 따라오세요.

 

 

 

 

 

 

 

오늘 사용할 라이브러리 입니다.

https://github.com/jonkykong/SideMenu

↑↑ 여기 주소입니다.

 

 

 

 

 

이 설치 코드를 podfile 에 넣어서 pod install 해주세요.

pod 'SideMenu'

※ 설치방법을 모르시면 이전 포스팅 코코아팟 설치 방법을 보고 와주세요.

 

 

 

 

 

 

 

 

먼저 Swift 파일을 만들어주세요.

 

 

1. 사이드메뉴 네비게이션 파일 생성 (커스텀하기 위해 필요)

import UIKit
import SideMenu

class CustomSideMenuNavigation: SideMenuNavigationController {

    override func viewDidLoad() {
        super.viewDidLoad()

    }
    
}

※ 여기서 import 에 SideMenu가 안뜨시는분은 커맨드⌘ + B 를 눌러서 한번 빌드하신 후에 진행해주세요.

 

 

 

2. 사이드메뉴 뷰컨트롤러 파일 생성 (사이드메뉴 안에 내용물을 위해 필요)

import UIKit

class SideMenuViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

    }
    

}

 

 

 

 

이제 스토리보드에서 세팅을 해주겠습니다.

 

 

3. 사이드메뉴 불러올 ViewController 생성, 실행 Button 추가

사이드메뉴 불러올 ViewController 생성

 

 

4. Navigation Controller 추가

스토리보드에서 커맨드⌘ + 쉬프트⇧ + L 누르면 라이브러리 추가창이 나옴

 

 

5. 기본으로 생성된 Root View Controller 삭제

이렇게 2개가 생길텐데 빨간표시 선택 후 ⌫ (백스페이스) 눌러서 삭제, 윈도우키보드면 Delete 키 눌러도 삭제됨.

 

 

 

 

6. Custom Class 입력 ( Navigation )

Navigation 에 Swift 파일 연결

네비게이션 뷰컨트롤러를 선택하고

Identity inspector 탭에 

Custom Class 에

Class 란에

1번에서 만든 Swift 파일 CustomSideMenuNavigation 을 넣어줍니다.

 

 

7. Custom Class 입력 ( ViewController )

ViewController 에 Swift 파일 연결

사이드 메뉴 뷰컨트롤러는 이런식으로 만들어줬습니다.

Identity inspector 탭에 Custom Class 에 Class 란에

2번에서 만든 Swift 파일 SideMenuViewController 을 넣어줍니다.

Identity 에 Storyboard ID 에 SideMenuViewController 입력

Use Storyboard ID 체크

버튼 4개를 스택뷰에 넣고 스택뷰를 Horizontally in Container 했습니다.

사이드메뉴는 가로로 조금만 보이기 때문에 특정 수치로 넣는 것보다 가운데 정렬을 하는게 좋습니다.

 

 

 

8.  네비게이션과 사이드메뉴 연결

Navigation - ViewController 연결

네비게이션이 선택된 상태에서 Connections inspector 탭에

root view controller 우측 + 버튼을

드래그 앤 드랍으로 사이드메뉴 뷰컨트롤러에 놓습니다.

 

 

 

 

9.  연결 확인

Segue 모양이 딱 저렇게 생겨야함

잘 따라했다면 이런식으로 연결된 모양이 생겼을겁니다.

 

 

 

 

 

 

10. 사이드메뉴 실행버튼과 네비게이션 연결

이 부분은 밑에서 코드로도 작성해볼 예정

버튼을 마우스 오른쪽 버튼 누른채로 드래그앤드롭으로 네비게이션에 내려놓습니다.

(맥북 트랙패드 사용자는 control버튼⌃ 누른채로 클릭해서 드래그앤드롭 하면 됩니다.)

 

 

11.  Show 선택

Action Segue - Show

 

 

 

 

 

 

12.  자 한번 실행해 보겠습니다.

기본 사용법 완료

아주 잘 나오네요.

이제 사이드메뉴에 홈이나 커피, 매장찾기 버튼을 누를때에 맞는 액션을

SideMenuViewController 여기서 구현해주시면 됩니다.

 

 

 

기본 사용법은 알았으니

설정을 좀 수정해보겠습니다.

 

 

 

 

 

 

 

CustomSideMenuNavigation 에서

import UIKit
import SideMenu

class CustomSideMenuNavigation: SideMenuNavigationController {

    override func viewDidLoad() {
        super.viewDidLoad()

        self.presentationStyle = .menuSlideIn
        
    }
    
}

presentationStyle 을 .menuSlideIn 로 바꾸면 이렇게 나옵니다.

self.presentationStyle = . menuSlideIn

presentationStyle 은 종류가 많으니 마음에 드시는 걸로 설정하면 됩니다.

 

 

 

 

. 찍으면 나오는 메뉴들을 enum (열거형) 이라고 합니다.

self.presentationStyle =  여기까지만 작성하고 점을 찍으면 사용할 수 있는 메뉴들이 나옵니다. 고르시면 됩니다.

 

 

 

 

 

 

가로 길이를 view 에 50퍼센트만 보여주려면 이렇게 작성하면 되고요.

self.menuWidth = self.view.frame.width * 0.5

self.menuWidth = self.view.frame.width * 0.5

 

 

 

 

 

 

왼쪽에서 나오게 하려면 이렇게 써주세요.

self.leftSide = true

self.leftSide = true

 

 

 

 

 

 

상태바가 보이는게 좋다면 alpha 값을 0 으로 ( default 1 )

self.statusBarEndAlpha = 0.0

self.statusBarEndAlpha = 0.0

 

 

 

 

 

 

속도를 조절하고 싶다면

//보여지는 속도
self.presentDuration = 1.0
//사라지는 속도
self.dismissDuration = 1.0

self.presentDuration = 1.0 , self.dismissDuration = 1.0

 

 

 

 

네비게이션 코드 전체입니다.

import UIKit
import SideMenu

class CustomSideMenuNavigation: SideMenuNavigationController {

    override func viewDidLoad() {
        super.viewDidLoad()

        //메뉴 나오는 스타일
        self.presentationStyle = .menuSlideIn
        
        //가로 크기 50퍼
        self.menuWidth = self.view.frame.width * 0.5
        
        //메뉴 왼쪽에서 나오기
        self.leftSide = true
        
        //상단 상태바 보이도록 설정 0 ( 0~1 default 1 )
        self.statusBarEndAlpha = 0.0
        
        
        //보여지는 속도
        self.presentDuration = 1.0
        //사라지는 속도
        self.dismissDuration = 1.0
        
    }
    
}

 

 

 

 

 

 

이번에는 사이드 메뉴 여는 ViewController 로 와서 코드로 한번 메뉴를 열어보겠습니다.

10번 에서 스토리보드로 메뉴를 연결했던 부분인데요

코드로 버튼을 만들거나 했을 때 이렇게 해주시면 사이드메뉴가 나옵니다.

뷰컨트롤러 코드 전체입니다.

import UIKit
import SideMenu

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        
        
        
    }
    
    @IBAction func buttonClicked(_ sender: Any) {
        //스토리보드
        let storyboard = UIStoryboard(name: "Main", bundle: nil)
        
        //사이드메뉴 뷰컨트롤러 객체 생성
        let sideMenuViewController: SideMenuViewController = storyboard.instantiateViewController(withIdentifier: "SideMenuViewController") as! SideMenuViewController
        
        //커스텀 네비게이션이랑 사이드메뉴 뷰컨트롤러 연결
        let menu = CustomSideMenuNavigation(rootViewController: sideMenuViewController)
        
        //보여주기
        present(menu, animated: true, completion: nil)
    }
    

}

extension ViewController: SideMenuNavigationControllerDelegate {
    
    func sideMenuWillAppear(menu: SideMenuNavigationController, animated: Bool) {
        print("SideMenu Appearing! (animated: \(animated))")
    }

    func sideMenuDidAppear(menu: SideMenuNavigationController, animated: Bool) {
        print("SideMenu Appeared! (animated: \(animated))")
    }

    func sideMenuWillDisappear(menu: SideMenuNavigationController, animated: Bool) {
        print("SideMenu Disappearing! (animated: \(animated))")
    }

    func sideMenuDidDisappear(menu: SideMenuNavigationController, animated: Bool) {
        print("SideMenu Disappeared! (animated: \(animated))")
    }
}

델리게이트를 받아서 메뉴가 보여질 때 , 보여졌을 때 , 사라질 때 , 사라졌을 때 원하는 코드를 넣을 수도 있겠고요

 

 

 

 

 

 

 

사이드메뉴 코드 전체입니다.

import UIKit

class SideMenuViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        self.navigationController?.setNavigationBarHidden(true, animated: false)
    }
    
    @IBAction func buttonClicked(_ sender: UIButton) {
        // 홈, 커피, 매장찾기 중에 어떤게 눌렸는지 확인
        print("\(sender.currentTitle!) 클릭됨.")
        
        // 사이드메뉴 닫기
        dismiss(animated: true, completion: nil)
    }
    
}

여기는 그냥 ViewController 니까 자유롭게 꾸며주시면 됩니다.

dismiss 하면 사이드 메뉴가 닫힙니다.

 

 

 

 

 

 

 

 

끝.

글이 좀 길어졌는데요.

천천히 읽어보시면 복잡하지 않을겁니다.

이외에도 스와이프해서 닫을 수도 있고

여러가지 기능들이 있습니다.

좋은 라이브러리고요,

저는 다음에 더 필요한 기능으로 찾아오겠습니다.

감사합니다.