Swift Side Menu UI 만들기 (with SideMenu)

이번 글은 아래 포스트와 연관되는 포스트입니다. 

2023.02.06 - [iOS개발/Swift 기본] - Swift Side Menu UI 만들기 (with Code)

Swift Side Menu UI 만들기 (with Code)

지난 포스트에서는 애니메이션 효과부터 시작해서 전부 수동으로 만들었다면 

이번에는 GitHub 에 있는 SideMenu 라는 걸 이용해 표현해보도록 하겠습니다. 

(라이브러리 활용이기때문에 기능으로 분류했습니다.)

 

사용 조건

Xcode 11 이상

Swift 5 이상

iOS 10 이상

 

Git 주소 

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

설치 (CocoaPods, 위 사이트를 참고해서 다른 방법으로도 설치 가능)

// Podfile 에 추가 
source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '10.0'
use_frameworks!

pod 'SideMenu'

// 추가한 후 아래 실행
pod install

- 설치 하시고 나서 아래처럼 초록 글씨로 설치되었다고 나와야 제대로 된겁니다. 

이거 실패하면 Fail 이라고 뜹니다.

- 아래 코드를 추가해도 오류가 안나는지 확인해주세요. (이거 해주셔야 코드 쓸때 에러 안나요!)

import SideMenu

 

사용 준비 

- Git 주소로 들어가시면 설명이 매우 자세히 있습니다. 참고해주세요.

- 이 포스트에서는 자주 다루는 속성만 몇가지 골라서 설명드리겠습니다. 

 

1. 모양 만들기 

- 좀 특이하게 일반 뷰나 컨트롤러가 아닌 Navigation Controller 를 사용합니다.

- 해당 컨트롤러는 이제 메뉴창이 될 뷰입니다. 추가해주세요.

 

이걸로 추가해주세요.

- 추가하신 후 상속 받는 Class 를 SideMenuNavigationController 로 변경해주세요.

안되시는 분들은 pod 설치 여부를 확인해주세요.

- 어느 버튼을 기준으로 나오게 할지 정한후 연결해주세요. 

저는 이렇게 연결했습니다.

- 여기까지 제대로 되셨으면 아래처럼 보이게 됩니다.

여기까지 잘 되시나요?

- 코드를 통해 연결하고 싶으신 분들은 아래를 참고 바랍니다. 

- 메뉴바 열기 

func openRightMenu(){
    // SideMenuNavigationController 에 연결된 보여지는 메뉴 뷰의 이름을 적어주세요!
    let menuController = storyboard!.instantiateViewController(withIdentifier: "OpenMenuViewController")
    let menu = SideMenuNavigationController(rootViewController: menuController)
    present(menu, animated: true, completion: nil)
}

- 메뉴바 닫기

dismiss(animated: true, completion: nil)

- 응용하면 이런 것도 가능합니다. 

override public func viewDidLoad() {
    super.viewDidLoad()
    let swipeRecognizer = UISwipeGestureRecognizer(target: self, action: #selector(swipeAction(_:)))
    swipeRecognizer.direction = .left
    menu.presentationStyle = .menuSlideIn // 여기서 효과를 변경하는것도 가능합니다.
    self.view.addGestureRecognizer(swipeRecognizer)
}

@objc func swipeAction(_ sender :UISwipeGestureRecognizer){
    if sender.direction == .left{ // 왼쪽으로 스와이프시 오른쪽 열리게 
        self.openRightMenu()
    }
    // 닫히는거는 Enable Swipe To Dismiss Gesture 로 설정하면됩니다.
}

- 이걸 사용하시면 여는것도 스와이프를 통해 열 수 있게 됩니다.

화면에 손가락은 안보이지만 스와이프로 작동합니다.

* 지금 헷갈리실 분들을 위한 각 뷰들 정리

- 뷰가 헷갈리시는 분들을 위해 잠깐 보여드리면 대략 이런 식입니다.

설정할때 주의하세요.

 

2. 보여줄 화면 만들기 및 설정하기 

- 화면의 경우 일반 뷰 컨트롤러 다루듯이 사용하시면 됩니다. (일반 뷰 컨트롤러를 네비게이션 뷰에 연결해서 사용가능)

- 당연한 이야기지만 이 부분은 코드로 나중에 설정하실 수 있습니다.

설정 가능한게 생각보다 많습니다.

자주 쓰이는 부분 

- Menu Width : 메뉴 창의 가로 길이를 조절합니다. (기본 240)

- Left Side : 창이 왼쪽에서 나올지 오른쪽에서 나올지 선택합니다. 

- Status Bar Enable : 창이 나왔을때 상태 표시바가 보이게 할지 말지를 결정합니다.(0 or 1)

 

알아두면 편한 속성 

- Presentation Style : 창이 나올때 사용되는 애니메이션 스타일을 정합니다.

- Presentation Duration : 창이 나올때 걸리는 시간을 조절합니다. (기본 0.35)

- Dismiss Duration : 창이 사라질때 걸리는 시간을 조절합니다. (기본 0.35)

- Initial Spring Velocity : 애니메이션에 스프링 효과 강도를 조절합니다. 

- Dismiss On Rotation : 화면이 회전 했을때 창이 계속 열려있을지를 설정합니다. 

- Enable Swipe To Dismiss Gesture : 스와이프를 통해 창을 닫을 수 있게 설정합니다. (열기 아님)

- Enable Tap To Dismiss Gesture : 탭(클릭)을 통해 창을 닫을 수 있게 설정합니다.

 

* 스타일같이 스토리보드에 안보이는 애들은 코드로 정의해주세요.

- 종류가 굉장히 다양하니 원하시는걸로 선택해주시면 됩니다. 

// 이런식으로 넣어주시면 됩니다. self = SideMenuNavigationController
self.presentationStyle = .menuDissolveIn

 

3. 기타 설정하기 

- 만약 해당 메뉴에 관련된 이벤트 처리가 필요하신 분들은 아래 함수들을 참고 바랍니다. 

extension MyViewController: 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))")
    }
}

 

이번에 소개드린 SideMenu 라이브러리의 경우 

GitHub 에 굉장히 자세히 설명이 되어있으니 한번 보시는 걸 추천드립니다. 

 

제가 작성한 것 외에도 상당히 다양한 부분을 조절할 수 있어요!

그럼 오늘도 파이팅입니다.