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

时间:2021-05-02

导读

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

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

效果

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,实现动画效果

  • 首先通过pan.translation(in: pan.view).x方法获取偏移量,通过偏移量的正负确定拖动的方向
  • 当手指松开后需要根据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简介

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

    ? 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#

    声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

    相关文章