美文网首页iOS
【iOS】一种简易侧边栏的实现

【iOS】一种简易侧边栏的实现

作者: 刘大帅 | 来源:发表于2015-11-06 16:09 被阅读6394次

参考文章

SlideMenuControllerSwift

实现原理

本文几乎以最简化的方式来实现一种侧边栏效果,方便理解其原理,所以,只有tap手势过渡效果,并未实现pan的侧滑效果.

实现这种效果,要用容器控制器的概念.通过容器控制器中不同容器视图的切换,来实现.

实现的难点在于容器视图切换中,动画效果平缓自然.

SlideMenuDemo.gif

容器视图切换的核心代码:

    func setUpViewController(targetView: UIView, targetViewController: UIViewController?) {
        
        if let viewController = targetViewController {
            
            addChildViewController(viewController)
            
            viewController.view.frame = targetView.bounds
            
            targetView.addSubview(viewController.view)
            
            viewController.didMoveToParentViewController(self)
            
        }
    }
    
    func removeViewController(viewController: UIViewController?) {
        
        if let _viewController = viewController {
            
            _viewController.willMoveToParentViewController(nil)
            _viewController.view.removeFromSuperview()
            _viewController.removeFromParentViewController()
        }
    }  

过渡动画的核心代码:

    override func openLeft() {
    
        leftVC?.beginAppearanceTransition(isLeftHidden(), animated: true)
        openLeftWithVelocity(0)
    }
    
    func openLeftWithVelocity(velocity: CGFloat) {
    
        let xOrigin: CGFloat = leftContainerView.frame.origin.x
        let finalXOrigin: CGFloat = 0
        
        var frame: CGRect = leftContainerView.frame
        
        frame.origin.x = finalXOrigin
        
        var duration: NSTimeInterval = Double(SlideMenuOptions.animationDuration)
        
        if velocity != 0 {
        
            duration = Double(fabs(xOrigin - finalXOrigin)/velocity)
            
            duration = Double(fmax(0.1, fmin(1, duration)))
        }
        
        UIView.animateWithDuration(duration, delay: 0, options: UIViewAnimationOptions.CurveEaseIn, animations: { [weak self]() -> Void in
            
            if let strongSelf = self {
            
                strongSelf.leftContainerView.frame = frame

                strongSelf.mainContainerView.transform = CGAffineTransformMakeScale(SlideMenuOptions.contentViewScale, SlideMenuOptions.contentViewScale)
            }
            
            }) { [weak self](Bool) -> Void in
                
                if let strongSelf = self {
                
                    strongSelf.leftVC?.endAppearanceTransition()
                }
        }
    }
    
    override func closeLeft() {
    
        leftVC?.beginAppearanceTransition(isLeftHidden(), animated: true)
        closeLeftWithVelocity(0)
    }
    
    func closeLeftWithVelocity(velocity: CGFloat) {
    
        let xOrigin: CGFloat = leftContainerView.frame.origin.x
        let finalXOrigin: CGFloat = leftMinOrigin()
        
        var frame: CGRect = leftContainerView.frame
        frame.origin.x = finalXOrigin
        
        var duration: NSTimeInterval = Double(SlideMenuOptions.animationDuration)
        
        if velocity != 0 {
        
            duration = Double(fabs(xOrigin - finalXOrigin)/velocity)
            
            duration = Double(fmax(0.1, fmin(1, duration)))
        }
        
        UIView.animateWithDuration(duration, delay: 0, options: UIViewAnimationOptions.CurveEaseIn, animations: { [weak self]() -> Void in
            
            if let strongSelf = self {
            
                strongSelf.leftContainerView.frame = frame
                strongSelf.mainContainerView.transform = CGAffineTransformMakeScale(1, 1)
            }
            
            }) { [weak self](Bool) -> Void in
                
                if let strongSelf = self {
                    
                    strongSelf.leftVC?.endAppearanceTransition()
                }
                
        }
    }
    
    func isPointContainedWithinLeftRect(point: CGPoint) -> Bool {
        
        return CGRectContainsPoint(leftContainerView.frame, point)
    }  

下载源码

下载地址

相关文章

  • 【iOS】一种简易侧边栏的实现

    参考文章 SlideMenuControllerSwift 实现原理 本文几乎以最简化的方式来实现一种侧边栏效果,...

  • 简易的iOS导航栏颜色渐变方案

    简易的iOS导航栏颜色渐变方案 简易的iOS导航栏颜色渐变方案

  • iOS开发-iPad侧边栏Tab选项卡切换(转)

    Android中习惯了叫侧边栏,iOS中如果不习惯侧边栏称呼的话可以叫dock,侧边栏的切换,类似于Android...

  • js+css实现简单侧边栏

    在web端,侧边栏经常会出现,代码展示如何实现侧边栏的定位实现侧边栏定位最简单的就是使用固定定位,但是固定定位在i...

  • iOS QQ侧边栏的实现

    简单的写了一个Demo iOS_仿QQ侧边栏,实现的过程还蛮简单效果如下: Demo地址

  • ion-menu 根据屏幕的宽度进行显示或者隐藏

    做项目做到了电视版本,需要实现由侧边栏的效果。需求为 窄屏不出现侧边栏 宽屏出现侧边栏。 解决如下: 在app.h...

  • 用Bootstrap实现折叠侧边栏

    首先实现一个普通侧边栏 上面的代码实现了最基本的侧边栏导航。 接下来我们利用Bootstrap Collapse实...

  • iOS侧边栏

    有时候项目需求TabBar在侧边,不在底部,当需要的时候显示出来,不需要的时候隐藏 基于这种需求,自定义一个侧边栏...

  • iOS侧边栏

    代码:https://www.jianshu.com/p/6515f66d8d01 原理: 借鉴了其他demo,用...

  • 【总结】2017.02.07

    2017.02.07 - 计划 公众号自定义菜单栏 小程序侧边栏菜单效果实现 小程序侧边栏菜单模板 - 实际完成 ...

网友评论

    本文标题:【iOS】一种简易侧边栏的实现

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