"Swift开源:WLDrawerView -Swift-QQ最新版侧滑菜单以及弹框视图"

LemuelEarnh 7年前
   <h2>导读</h2>    <ul>     <li>简单用Swift写了一个抽屉效果,可以直接使用并且简单;</li>     <li>很多软件都运了抽屉效果,比如qq的左抽屉,英雄联盟,滴滴打车,和uber等等都运用了抽屉;</li>     <li>GitHub上有代表性的是MMDrawerController.</li>    </ul>    <p> </p>    <h3>效果</h3>    <p style="text-align:center"><img src="https://simg.open-open.com/show/ff565d3974101334fc34e0b6fbe443de.gif"></p>    <p style="text-align:center">image.gif</p>    <h2>iOS抽屉式结构实现分析</h2>    <ul>     <li> <p>主要是在控制器的View上添加了两个View,一个左侧leftView和一个mainView。这里我们自定义一个DrawerViewController, init(mainVC: UIViewController, leftMenuVC: UIViewController, leftWidth: CGFloat) 设置,一个mainVC,一个leftMenuVC,和一个宽度,将mainVC和leftMenuVC的view添加到controller的view上(menuVC的view在下面)。</p> <pre>  <code class="language-swift">view.addSubview(leftMenuVC.view)        view.addSubview(mainVC.view)          addChildViewController(leftMenuVC)        addChildViewController(mainVC)</code></pre> </li>     <li>然后首先实现点击方法openLeftMenu和closeLeftMenu(这两个方法主要是计算mainVC的view的位置)方便以后调用。</li>    </ul>    <pre>  <code class="language-swift">//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>    <ul>     <li> <p>最后给mainVC的view添加屏幕边缘手势,实现mainVC的view跟随手指移动。</p> <p>循环遍历view给每一个一级视图添加手势</p> <pre>  <code class="language-swift">for childViewController in (mainVC?.childViewControllers)! {              addScreenEdgePanGestureRecognizerToView(view: childViewController.view)          }</code></pre> </li>    </ul>    <pre>  <code class="language-swift">//MARK: - 添加屏幕边缘手势      private func addScreenEdgePanGestureRecognizerToView(view: UIView) {            let pan = UIScreenEdgePanGestureRecognizer(target: self, action: #selector(edgPanGesture(_:)))          pan.edges = UIRectEdge.left          view.addGestureRecognizer(pan)        }</code></pre>    <ul>     <li> <p>在平移手势调用的方法中,通过偏移量来确定mainView的frame,实现动画效果</p>      <ul>       <li>首先通过 pan.translation(in: pan.view).x 方法获取偏移量,通过偏移量的正负确定拖动的方向</li>       <li>当手指松开后需要根据mainView的x值确定其视图是定位到原始位置还是其缩放的位置</li>      </ul> </li>     <li> <p>打开手势</p> </li>    </ul>    <pre>  <code class="language-swift">//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>    <ul>     <li>关闭遮盖手势</li>    </ul>    <pre>  <code class="language-swift">//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>    <h2>UIPresentationController简介</h2>    <ul>     <li>UIPresentationController 是 iOS8 新增的一个API,苹果的官方定义是:对象为所呈现的视图控制器提供高级视图的转换管理(从呈现视图控制器的时间直到它被消除期间);</li>     <li>iOS 8以前就是自定义view,去画一个三角和长方形;</li>     <li>简单直接的方法用图片</li>    </ul>    <p>直接贴代码不讲废话</p>    <pre>  <code class="language-swift">@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>    <p> </p>    <p> </p>