IOS中Swift仿QQ最新版抽屜側(cè)滑和彈框視圖

更新時(shí)間：2017年03月14日 10:26:03 作者：coderLiu

本篇文章主要介紹了IOS中Swift仿QQ最新版抽屜側(cè)滑和彈框視圖，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。

導(dǎo)讀

簡(jiǎn)單用Swift寫了一個(gè)抽屜效果,可以直接使用并且簡(jiǎn)單;

很多軟件都運(yùn)了抽屜效果，比如qq的左抽屜，英雄聯(lián)盟,滴滴打車，和uber等等都運(yùn)用了抽屜;

效果

iOS抽屜式結(jié)構(gòu)實(shí)現(xiàn)分析

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

   view.addSubview(leftMenuVC.view)
   view.addSubview(mainVC.view)

   addChildViewController(leftMenuVC)
   addChildViewController(mainVC)

然后首先實(shí)現(xiàn)點(diǎn)擊方法openLeftMenu和closeLeftMenu（這兩個(gè)方法主要是計(jì)算mainVC的view的位置）方便以后調(diào)用。

//MARK: - 打開左側(cè)菜單
  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: - 關(guān)閉左側(cè)菜單
  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添加屏幕邊緣手勢(shì)，實(shí)現(xiàn)mainVC的view跟隨手指移動(dòng)。循環(huán)遍歷view給每一個(gè)一級(jí)視圖添加手勢(shì)

for childViewController in (mainVC?.childViewControllers)! {

     addScreenEdgePanGestureRecognizerToView(view: childViewController.view)

   }

//MARK: - 添加屏幕邊緣手勢(shì)
  private func addScreenEdgePanGestureRecognizerToView(view: UIView) {

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

  }

在平移手勢(shì)調(diào)用的方法中，通過偏移量來確定mainView的frame，實(shí)現(xiàn)動(dòng)畫效果

首先通過pan.translation(in: pan.view).x方法獲取偏移量,通過偏移量的正負(fù)確定拖動(dòng)的方向
當(dāng)手指松開后需要根據(jù)mainView的x值確定其視圖是定位到原始位置還是其縮放的位置

打開手勢(shì)

//MARK: - 屏幕左邊緣手勢(shì)
  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()
      }

    }

  }

關(guān)閉遮蓋手勢(shì)

//MARK: - 遮蓋按鈕手勢(shì)
  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()
      }

    }

  }

UIPresentationController簡(jiǎn)介

UIPresentationController是 iOS8 新增的一個(gè)API，蘋果的官方定義是：對(duì)象為所呈現(xiàn)的視圖控制器提供高級(jí)視圖的轉(zhuǎn)換管理（從呈現(xiàn)視圖控制器的時(shí)間直到它被消除期間）;
iOS 8以前就是自定義view,去畫一個(gè)三角和長(zhǎng)方形;
簡(jiǎn)單直接的方法用圖片

直接貼代碼不講廢話

@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
  }

具體代碼可以從這里下載：WLDrawerView_jb51.rar

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: