Swift3에서 사이드 메뉴 같은 View 만들기

12852 단어 XcodeiOSSwiftSwift3.0

Swift3에서 사이드 메뉴 같은 뷰 만들기



이번 목표



사이드 메뉴 같은 View(오른쪽)를 작성한다.



왼쪽 화면의 버거 버튼 등을 누르면 오른쪽 화면이 나오고,
회색 배경 부분을 탭하면 원래 화면으로 돌아가는 것이 목표입니다.

개발 환경



Xcode: 8.2.1
언어: Swift 3
OS: MacOS

구현 절차


  • 스토리 보드에서 ViewController 준비
  • 사이드 메뉴 만들기
  • 사이드 메뉴 호출

  • 1. Storyboard에서 ViewController 준비


  • 스토리 보드에서 두 개의 ViewController를 준비합니다.
  • 아래 이미지 왼쪽의 ViewController에서 사이드 메뉴에 해당하는 ViewCntroller로 "Ctrl + 드래그"로 Segue를 준비합니다.
  • 사이드 메뉴처럼 하기 위해 모달 표시로 하고 애니메이션을 넣습니다(이번에는 아래와 같은 설정으로 하고 있습니다)
  • Kind: presentModally
  • Presentation: Over Current Context
  • Transition: Cross Dissolve

  • Segue에 Identifier를 설정합니다. 이번에는 (sideMenuSegue)



  • 2. 사이드 메뉴 만들기


  • 메뉴를 표시하는 View와 배경을 표시하는 View를 작성한다
  • 배경을 탭하면 원래 화면으로 돌아갑니다
  • 메뉴를 선택할 때 원래 화면으로 돌아갑니다.

    2-1. 메뉴를 표시하는 View와 배경을 표시하는 View 만들기



    사이드 메뉴를 관리하는 ViewController에서 두 개의 View를 정의합니다.
    그런 다음 두 개의 뷰를 만들 때 각각의 좌표와 크기를 지정하여 만듭니다.
    이 때, 메뉴를 표시하는 View와 배경을 표시하는 View의 색을 바꾸어 작성합니다.

    SideMenuViewController
        var sideMenuView: UITableView!
        var sideBackView: UIView!
    
        override func viewDidLoad() {
            super.viewDidLoad()
            createView()
        }
    
        func createView() {
            var barHeight: CGFloat!
            var displayWidth: CGFloat!
            var displayHeight: CGFloat!
            barHeight = UIApplication.shared.statusBarFrame.size.height // 表示されるステータスバーの高さを取得
            displayWidth = UIScreen.main.bounds.size.width // 表示する画面の幅を取得
            displayHeight = UIScreen.main.bounds.size.height // 表示する画面の高さを取得
    
            self.view.frame = CGRect(x:0, y:0, width:displayWidth, height:displayHeight) // 元々のViewのサイズを指定
    
            // メニューのViewを作成
            sideMenuView = UITableView(frame: CGRect(x:0, y:barHeight, width:displayWidth * 0.7, height:displayHeight - barHeight)) // CGRect(x: x座標, y: y座標, with: 横幅, height:高さ)を指定
            sideMenuView.backgroundColor = UIColor.black // 背景に黒を指定
            sideMenuView.alpha = 0.9 // 透明度を指定
    
            // 下記でメニューをタップしたときのためにセルのIDの指定やdelegateの指定を行っている
            sideMenuView.register(UITableViewCell.self, forCellReuseIdentifier: "SideCell")
            sideMenuView.dataSource = self
            sideMenuView.delegate = self
            sideMenuView.tableFooterView = UIView()
    
            view.addSubview(sideMenuView) // 作成したViewをメインのViewに追加し、表示されるようにする
    
            // 背景viewを作成
            sideBackView = UIView(frame: CGRect(x:displayWidth * 0.7, y:barHeight, width:displayWidth * 0.3, height:displayHeight - barHeight))
            sideBackView.backgroundColor = UIColor(red: 0.0, green: 0.0, blue: 0.0, alpha: 0.5)
            view.addSubview(sideBackView)
        }
    
    

    2-2. 배경을 탭하면 원래 화면으로 돌아갑니다.



    배경을 탭할 때 원본 화면을 표시합니다.
    이 사이드 메뉴는 (Storyboard에서 정의한 대로) 모달로 표시하고 있기 때문에 모든 모달 표시를 닫아 버리면 원래 화면으로 돌아갑니다.

    SideMenuViewController
    
        func createView() {
    /* ~ 中略 ~ */
            // 背景viewタップ時の動きを設定
            singleTap = UITapGestureRecognizer(target: self, action: #selector(SideMenuViewController.tapSingle(sender:))) // タップが行われたときに実行される関数を指定
            singleTap.numberOfTapsRequired = 1
            sideBackview.addGestureRecognizer(singleTap)
        }
    
        // 背景のviewをタップすると呼ばれる
        func tapSingle(sender: UITapGestureRecognizer) {
            self.dismiss(animated: true, completion: nil) // 全てのモーダルを閉じます
        }
    

    2-3. 메뉴를 선택할 때 원래 화면으로 돌아가기



    메뉴의 View는 tableView로 작성하고 있으므로, TableView에 존재하는 Cell을 눌렀을 때에 불리는 함수를 구현해, 그 때 모달 표시를 닫으면 실현할 수 있습니다.

    SideMenuViewController
        // Cellが選択された際に呼び出される.
        func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
            self.dismiss(animated: true, completion: nil)
        }
    

    3. 사이드 메뉴 호출


  • Storyboard에서 만든 Segue의 ID를 지정하여 사이드 메뉴를 호출합니다.

    ViewController
    
        @IBAction func TupMenu(sender: AnyObject) {
            sideMenuCall()
        }
    
        func sideMenuCall() {
            self.performSegue(withIdentifier: "sideMenuSegue", sender: nil)
        }
    
  • 좋은 웹페이지 즐겨찾기