IOS中Swift仿QQ最新版抽屉侧滑和弹框视图

2020-01-18 21:38:38刘景俊

导读

简单用Swift写了一个抽屉效果,可以直接使用并且简单;

很多软件都运了抽屉效果,比如qq的左抽屉,英雄联盟,滴滴打车,和uber等等都运用了抽屉;

效果

ios,抽屉式侧滑,抽屉侧滑菜单,swift,侧滑菜单

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)

然后首先实现点击方法openLeftMenu和closeLeftMenu(这两个方法主要是计算mainVC的view的位置)方便以后调用。


//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()

    })


  }

最后给mainVC的view添加屏幕边缘手势,实现mainVC的view跟随手指移动。循环遍历view给每一个一级视图添加手势


for childViewController in (mainVC?.childViewControllers)! {

     addScreenEdgePanGestureRecognizerToView(view: childViewController.view)

   }

//MARK: - 添加屏幕边缘手势
  private func addScreenEdgePanGestureRecognizerToView(view: UIView) {

    let pan = UIScreenEdgePanGestureRecognizer(target: self, action: #selector(edgPanGesture(_:)))
    pan.edges = UIRectEdge.left
    view.addGestureRecognizer(pan)

  }

在平移手势调用的方法中,通过偏移量来确定mainView的frame,实现动画效果

    首先通过pan.translation(in: pan.view).x方法获取偏移量,通过偏移量的正负确定拖动的方向 当手指松开后需要根据mainView的x值确定其视图是定位到原始位置还是其缩放的位置