服务器之家

服务器之家 > 正文

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

时间:2021-03-09 15:51     来源/作者:coderLiu

导读

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

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

效果

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

ios抽屉式结构实现分析

主要是在控制器的view上添加了两个view,一个左侧leftview和一个mainview。这里我们自定义一个drawerviewcontroller,init(mainvc: uiviewcontroller, leftmenuvc: uiviewcontroller, leftwidth: cgfloat)设置,一个mainvc,一个leftmenuvc,和一个宽度,将mainvc和leftmenuvc的view添加到controller的view上(menuvc的view在下面)。

?
1
2
3
4
5
view.addsubview(leftmenuvc.view)
view.addsubview(mainvc.view)
 
addchildviewcontroller(leftmenuvc)
addchildviewcontroller(mainvc)

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
//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给每一个一级视图添加手势

?
1
2
3
4
5
for childviewcontroller in (mainvc?.childviewcontrollers)! {
 
     addscreenedgepangesturerecognizertoview(view: childviewcontroller.view)
 
   }
?
1
2
3
4
5
6
7
8
//mark: - 添加屏幕边缘手势
  private func addscreenedgepangesturerecognizertoview(view: uiview) {
 
    let pan = uiscreenedgepangesturerecognizer(target: self, action: #selector(edgpangesture(_:)))
    pan.edges = uirectedge.left
    view.addgesturerecognizer(pan)
 
  }

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

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

打开手势

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//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()
      }
 
    }
 
  }

关闭遮盖手势

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//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()
      }
 
    }
 
  }

uipresentationcontroller简介

  1. uipresentationcontroller是 ios8 新增的一个api,苹果的官方定义是:对象为所呈现的视图控制器提供高级视图的转换管理(从呈现视图控制器的时间直到它被消除期间);
  2. ios 8以前就是自定义view,去画一个三角和长方形;
  3. 简单直接的方法用图片

直接贴代码不讲废话

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@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.rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。

原文链接:http://www.jianshu.com/p/679b94639765#

标签:

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
Intellij idea2020永久破解,亲测可用!!!
Intellij idea2020永久破解,亲测可用!!! 2020-07-29
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
返回顶部