"Swift開源：WLDrawerView －Swift-QQ最新版側滑菜單以及彈框視圖"

導讀

• 簡單用Swift寫了一個抽屜效果,可以直接使用并且簡單;
• 很多軟件都運了抽屜效果，比如qq的左抽屜，英雄聯盟,滴滴打車，和uber等等都運用了抽屜;
• GitHub上有代表性的是MMDrawerController.

效果

image.gif

iOS抽屜式結構實現分析

• 主要是在控制器的View上添加了兩個View,一個左側leftView和一個mainView。這里我們自定義一個DrawerViewController， init(mainVC: UIViewController, leftMenuVC: UIViewController, leftWidth: CGFloat) 設置，一個mainVC，一個leftMenuVC，和一個寬度,將mainVC和leftMenuVC的view添加到controller的view上（menuVC的view在下面）。

  view.addSubview(leftMenuVC.view)
        view.addSubview(mainVC.view)
  
  
    addChildViewController(leftMenuVC)
    addChildViewController(mainVC)</code></pre> </li> 
  
  然后首先實現點擊方法openLeftMenu和closeLeftMenu（這兩個方法主要是計算mainVC的view的位置）方便以后調用。
   
    </ul> 
    
  //MARK: - 打開左側菜單
      func openLeftMenu() {
  
  
      UIView.animate(withDuration: 0.25, delay: 0, options: UIViewAnimationOptions.curveLinear, animations: {
  
          self.leftVC?.view.transform = CGAffineTransform.identity
          self.mainVC?.view.transform = CGAffineTransform(translationX: self.maxWidth, y: 0)
  
  
      }, completion: {
  
          (finish: Bool) -> () in
  
          self.mainVC?.view.addSubview(self.coverBtn)
  
      })
  
  }
  
  //MARK: - 關閉左側菜單
  func closeLeftMenu() {
  
      UIView.animate(withDuration: 0.25, delay: 0, options: UIViewAnimationOptions.curveLinear, animations: {
  
          self.leftVC?.view.transform = CGAffineTransform(translationX: -self.maxWidth, y: 0)
          self.mainVC?.view.transform = CGAffineTransform.identity
  
  
      }, completion: {
  
          (finish: Bool) -> () in
  
          self.coverBtn.removeFromSuperview()
  
      })
  
  
  }</code></pre> 
  
   
     
   
  最后給mainVC的view添加屏幕邊緣手勢，實現mainVC的view跟隨手指移動。
   
  循環遍歷view給每一個一級視圖添加手勢
   
  for childViewController in (mainVC?.childViewControllers)! {
  
  
        addScreenEdgePanGestureRecognizerToView(view: childViewController.view)
  
    }</code></pre> </li> 
  
  </ul> 
    
  //MARK: - 添加屏幕邊緣手勢
      private func addScreenEdgePanGestureRecognizerToView(view: UIView) {
  
  
      let pan = UIScreenEdgePanGestureRecognizer(target: self, action: #selector(edgPanGesture(_:)))
      pan.edges = UIRectEdge.left
      view.addGestureRecognizer(pan)
  
  }</code></pre> 
  
   
     
   
  在平移手勢調用的方法中，通過偏移量來確定mainView的frame，實現動畫效果
   
      
   
       
  首先通過 pan.translation(in: pan.view).x 方法獲取偏移量,通過偏移量的正負確定拖動的方向
   
       
  當手指松開后需要根據mainView的x值確定其視圖是定位到原始位置還是其縮放的位置
   
      
   </li> 
     
   
  打開手勢
   
   
    </ul> 
    
  //MARK: - 屏幕左邊緣手勢
      func edgPanGesture(_ pan: UIScreenEdgePanGestureRecognizer) {
  
  
      let offsetX = pan.translation(in: pan.view).x
  
      if pan.state == UIGestureRecognizerState.changed && offsetX <= maxWidth {
  
          mainVC?.view.transform = CGAffineTransform(translationX: max(offsetX, 0), y: 0)
          leftVC?.view.transform = CGAffineTransform(translationX: -maxWidth + offsetX, y: 0)
  
      } else if pan.state == UIGestureRecognizerState.ended || pan.state == UIGestureRecognizerState.cancelled || pan.state == UIGestureRecognizerState.failed {
  
          if offsetX > screenW * 0.5 {
  
              openLeftMenu()
  
          } else {
  
              closeLeftMenu()
          }
  
      }
  
  }</code></pre> 
  
   
     
  關閉遮蓋手勢
   
    
   
    
  //MARK: - 遮蓋按鈕手勢
      func panCloseLeftMenu(_ pan: UIPanGestureRecognizer) {
  
  
      let offsetX = pan.translation(in: pan.view).x
      if offsetX > 0 {return}
  
      if pan.state == UIGestureRecognizerState.changed && offsetX >= -maxWidth {
  
          let distace = maxWidth + offsetX
  
          mainVC?.view.transform = CGAffineTransform(translationX: distace, y: 0)
          leftVC?.view.transform = CGAffineTransform(translationX: offsetX, y: 0)
  
      } else if pan.state == UIGestureRecognizerState.ended || pan.state == UIGestureRecognizerState.cancelled || pan.state == UIGestureRecognizerState.failed {
  
          if offsetX > screenW * 0.5 {
  
              openLeftMenu()
  
          } else {
  
              closeLeftMenu()
          }
  
      }
  
  }</code></pre> 
  
  UIPresentationController簡介
   
    
   
     
  UIPresentationController 是 iOS8 新增的一個API，蘋果的官方定義是：對象為所呈現的視圖控制器提供高級視圖的轉換管理（從呈現視圖控制器的時間直到它被消除期間）;
   
     
  iOS 8以前就是自定義view,去畫一個三角和長方形;
   
     
  簡單直接的方法用圖片
   
    
   
    
  直接貼代碼不講廢話
   
    
  @IBAction func showAlert(_ sender: UIBarButtonItem) {
  
  
      let popVC = PopViewController()
      popVC.modalPresentationStyle = UIModalPresentationStyle.popover
      popVC.popoverPresentationController?.barButtonItem = sender
      popVC.popoverPresentationController?.delegate = self
      //可控制三角顏色
      popVC.popoverPresentationController?.backgroundColor = UIColor.white
      present(popVC, animated: true, completion: nil)
  
  }
  
  
  func adaptivePresentationStyle(for controller: UIPresentationController) -> UIModalPresentationStyle {
      return UIModalPresentationStyle.none
  }
  
  func popoverPresentationControllerShouldDismissPopover(_ popoverPresentationController: UIPopoverPresentationController) -> Bool {
      return true
  }</code></pre>