美文网首页
Swift - 仿写QQ侧滑菜单

Swift - 仿写QQ侧滑菜单

作者: 付海鹏 | 来源:发表于2016-05-18 16:32 被阅读155次

公司项目一直没有推进, 只能自己写一些Swift代码, 准备全面转向Swift开发.

之前的项目中使用过抽屉效果, 一直都是使用第三方, 准备自己一个抽屉

最终效果

运行效果

1. Storyboard

  1. 本人懒, 就没有搭UI, 使用两张截图
  2. 在 HomeViewController 中添加 UIPanGestureRecognizer, 并进行关联


    屏幕快照 2016-05-18 16.12.41.png

2. MeunViewController

  1. 通过 Storyboard 的 取出 HomeViewController 的 view 添加到subview
  2. 给 HomeViewController 的 UIPanGestureRecognizer 添加响应事件
        // 通过 Storyboard 取出 HomeViewController 的 view, 放在背景上
        homeViewController = UIStoryboard.init(name: "Main", bundle: nil).instantiateViewControllerWithIdentifier("HomeViewController") as! HomeViewController
        self.view.addSubview(homeViewController.view)
        
        // 绑定 UIPanGestureRecognizer
        homeViewController.panGusture.addTarget(self, action: #selector(pan))

3.响应事件

struct Common {
    static let screenWidth = UIScreen.mainScreen().bounds.size.width
    static let screenHeight = UIScreen.mainScreen().bounds.size.height
}
    var homeViewController: HomeViewController!
    var distance: CGFloat = 0
    let Proportion: CGFloat = 0.3
    // 响应 UIPanGestureRecognizer 事件
    @objc private func pan(recongnizer: UIPanGestureRecognizer) {
        
        // 获取实时距离
        let x = recongnizer.translationInView(self.view).x
        let trueDistance = distance + x
        
        // 如果 UIPanGestureRecognizer 结束, 则自动停靠
        if recongnizer.state == UIGestureRecognizerState.Ended {
            print(x)
            // 判断停靠位置
            if trueDistance > Common.screenWidth * Proportion {
                showLeft()
            } else {
                showHome()
            }
            return
        }
        
        // 只添加左抽屉
        if trueDistance < 0 {
            return
        }
        recongnizer.view!.center = CGPointMake(self.view.center.x + trueDistance, self.view.center.y)
    }

4 . 手势响应事件中方法

private func showLeft() {
        distance = self.view.center.x * 1.5
        doAnmation()
    }
    
    private func showHome() {
        distance = 0
        doAnmation()
    }
    
    private func doAnmation() {
        UIView.animateWithDuration(0.3,
                                   delay: 0,
                                   options: .CurveEaseInOut,
                                   animations: { () -> Void in
                                                    self.homeViewController.view.center = CGPointMake(self.view.center.x + self.distance, self.view.center.y)
                                                },
                                   completion: nil)
    }
}

结语

只是实现了一个侧滑的效果, 并没有实现相关的功能, 待完善

相关文章

  • Swift - 仿写QQ侧滑菜单

    公司项目一直没有推进, 只能自己写一些Swift代码, 准备全面转向Swift开发. 之前的项目中使用过抽屉效果,...

  • Flutter-抽屉效果只能拖拽

    flutter_new类似日历的抽屉 仿QQ侧滑菜单

  • 仿QQ侧滑菜单

    一. 实例说明 二. 关键技术    使用自定义类 QQMenu 类中的构造方法,View类中的 onMeasur...

  • Android仿qq侧滑菜单

    我们经常能看到各种app中都有应用侧滑菜单(SlidingMenu),效果很好的一种显示方式,今天我就向大家展示可...

  • iOS仿QQ侧滑菜单

    最近看到QQ上的侧滑菜单特有意思,就自己试着去实现了一下,看上去效果相差不大。最后的效果图: 首先,需要自定义一个...

  • Android仿QQ侧滑菜单

    先上效果图: GIF图有点模糊,源码已上传Github:Android仿QQ侧滑菜单 整体思路: 自定义ItemV...

  • iOS仿QQ侧滑菜单

    第一次在简书上写文章。 今天我要记录下如何拿UITabBarController做QQ侧滑菜单效果: 首先要了解U...

  • Swift之高仿QQ侧滑

    侧滑是App开发中非常常见的功能,目前大部分App都有实现这个功能. 简单介绍一下这个QQ侧滑的实现的步骤添加拖拽...

  • Android FrameLayout+ViewDragHelp

    大家好!这篇介绍FrameLayout+ViewDragHelper实现QQ7.1.0侧滑菜单,在QQ侧滑菜单上我...

  • DrawerLayout

    Android DrawerLayout 高仿QQ5.2双向侧滑菜单 DrawerLayout的使用 直接将Dra...

网友评论

      本文标题:Swift - 仿写QQ侧滑菜单

      本文链接:https://www.haomeiwen.com/subject/xtephttx.html