[Swift] UIKit 로 사이드 메뉴 구현하기

사이드 메뉴 구현 동작

안녕하세요, 오늘은 앱 개발을 하다 보면 자주 사용하는 UI 중 하나인 사이드 메뉴를 Swift의 UIkit로 어떻게 구현하는지 알아보도록 하겠습니다.
오늘 구현할 사이드메뉴는 위의 구현 동작처럼 오른쪽에서 나타나는 사이드메뉴를 만들어보려고 합니다.

구현 코드

import UIKit

class ViewController: UIViewController {
    let sideMenuWidth: CGFloat = UIScreen.main.bounds.width * 0.8  // 사이드 메뉴의 너비
    var sideMenuView: UIView!  // 사이드 메뉴를 표현하는 뷰
    var overlayView: UIView!   // 사이드 메뉴가 열릴 때 화면 뒤에 표시하는 오버레이 뷰

    // 사이드 메뉴를 표시하는 버튼
    private let sideMenuButton: UIButton = {
        let button = UIButton(type: .system)
        button.setTitle("사이드메뉴", for: .normal)
        button.translatesAutoresizingMaskIntoConstraints = false
        return button
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()

        // 버튼이 클릭되었을 때 openSideMenu() 메서드가 호출되도록 설정
        self.sideMenuButton.addTarget(self, action: #selector(buttonTapped), for: .touchUpInside)
        
        view.addSubview(sideMenuButton)
        
        // 오버레이 뷰와 사이드 메뉴를 설정
        setupOverlayView()
        setupSideMenu()
        
        // 제스처 인식기를 추가
        addGestureRecognizers()
        
        NSLayoutConstraint.activate([
            sideMenuButton.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
            sideMenuButton.centerYAnchor.constraint(equalTo: self.view.centerYAnchor)
        ])
    }
    
    // 사이드 메뉴를 설정하는 메서드
    func setupSideMenu() {
        sideMenuView = UIView(frame: CGRect(x: view.frame.width, y: 0, width: sideMenuWidth, height: view.frame.height))
        sideMenuView.backgroundColor = .yellow
        view.addSubview(sideMenuView)
    }
    
    // 오버레이 뷰를 설정하는 메서드
    func setupOverlayView() {
        overlayView = UIView(frame: view.bounds)
        overlayView.backgroundColor = UIColor.black.withAlphaComponent(0.2)
        overlayView.alpha = 0
        overlayView.isHidden = true
        view.addSubview(overlayView)
    }
    
    // 제스처 인식기를 추가하는 메서드
    func addGestureRecognizers() {
    	// 화면 탭 제스처
        let tapGesture = UITapGestureRecognizer(target: self, action: #selector(handleOverlayTap(_:)))
        overlayView.addGestureRecognizer(tapGesture)
		// 드래그 동작 제스처
        let panGestureRecognizer = UIPanGestureRecognizer(target: self, action: #selector(handlePanGesture(_:)))
        sideMenuView.addGestureRecognizer(panGestureRecognizer)
    }
    
    // 사이드 메뉴를 열어주는 메서드
    func openSideMenu() {
       self.overlayView.isHidden = false
       UIView.animate(withDuration: 0.3) {
           self.sideMenuView.frame.origin.x = self.view.frame.width - self.sideMenuWidth
           self.overlayView.alpha = 1
       }
        
    }
    
    // 사이드 메뉴를 닫아주는 메서드
    func closeSideMenu() {
        UIView.animate(withDuration: 0.3, animations: {
            self.sideMenuView.frame.origin.x = self.view.frame.width
            self.overlayView.alpha = 0 
        }, completion: { _ in
            self.overlayView.isHidden = true // 이부분은 alpha값을 0로만해도 기대하는 동작이 가능하지만 메모리관리면에서 사용하는게 좋을듯하다 ㅎ
        })
    }
    
    // 버튼이 클릭됐을 때 호출되는 메서드
    @objc func buttonTapped() {
        openSideMenu()
    }
    
    // 오버레이 뷰를 탭했을 때 호출되는 메서드
    @objc func handleOverlayTap(_ gesture: UITapGestureRecognizer) {
       closeSideMenu()
    }
    
    // 사이드 메뉴를 드래그했을 때 호출되는 메서드
    @objc func handlePanGesture(_ recognizer: UIPanGestureRecognizer) {
        let translation = recognizer.translation(in: view)

        switch recognizer.state {
        case .changed: // 드래그중일때
            if translation.x > 0 { 
                recognizer.view!.frame.origin.x = (UIScreen.main.bounds.width - sideMenuWidth) + translation.x
            } else {
                recognizer.view!.frame.origin.x = UIScreen.main.bounds.width - sideMenuWidth
            }
        case .ended: // 드래그가 끝났을때
            if translation.x > 0 { 
                closeSideMenu()
            }
            
        default:
            break
        }
    }
}

해당 코드는 오른쪽에서 나오는 메뉴이지만 조금만 응용하면 왼쪽에서 나오는 사이드메뉴 구현도 손쉽게 가능하다고 생각합니다.
따로 사이드메뉴를 닫는 버튼을 사용하지 않고 메뉴를 드래그하여 닫거나 화면 뒤에 추가한 오버레이뷰를 탭 하는 걸로 닫게 하는 기능을 구현하였습니다. 이후에는 자신의 취향에 알맞게 사이드메뉴를 꾸며주면 되겠습니다.

 

이것으로 사이드 메뉴를 Swift로 구현하는 방법에 대해 알아보았습니다. 이번 포스트가 여러분들에게 도움이 되었길 바라며, 언제든지 질문이 있으시다면 댓글로 남겨주세요. 다음 포스트에서 뵙겠습니다. 감사합니다!