现在很多的APP中都有slide view，左右滑动出现侧边菜单栏的功能，Weico这个应用就有。

网上有很多第三方的类库实现了这种效果，其实自己代码写的话也是很简单的，下面我将介绍两种方法实现slide view。---- 一种是用第三方类库IIViewDeckController这个类库实现的效果比起其他的都好，另一种是自己代码实现这种效果，效果还ok。

实现方法一（使用第三方库IIViewDeckController）：

https://github.com/Inferis/ViewDeck 这个是类库的下载地址，上面有介绍具体如何使用。不过大都不是用storyboard实现的，那么这里我介绍的是如何用storyboard实现。

（1 ）方法①

首先注意要导入相关的头文件，并且Link the QuartzCore.framework

然后在storyboard中添加三个navigation视图，分别表示中间，左边和右边的视图，并且创建相应的controller。

我的处理是初始化一个IIViewDeckController 实例然后作为子视图添加到最左边的视图中，而用右边的三个navigation视图 作为IIViewDeckController 实例对象的初始参数。

其中要注意的是，要分别在三个navigation视图添加identifier，注意是添加到的是navigation controller对应的视图（即第一个）。

下面看看代码：

[cpp] view plaincopyprint?

  1. - (void)viewDidLoad
  2. {
  3. [super viewDidLoad];
  4. // Do any additional setup after loading the view, typically from a nib.
  5. UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"MainStoryboard" bundle:nil];
  6. CenterViewController *centerController = (CenterViewController *)[storyboard instantiateViewControllerWithIdentifier:@"CenterViewController"];
  7. LeftViewController *leftController = (LeftViewController *)[storyboard instantiateViewControllerWithIdentifier:@"LeftViewController"];
  8. RightViewController *rightController = (RightViewController *)[storyboard instantiateViewControllerWithIdentifier:@"RightViewController"];
  9. self.containerController = [[IIViewDeckController alloc] initWithCenterViewController:centerController leftViewController:leftController rightViewController:rightController];
  10. self.containerController.leftSize = 100;
  11. self.containerController.rightSize = 200;
  12. self.containerController.view.frame = self.view.bounds;
  13. [self.view addSubview:self.containerController.view];
  14. }
  15. - (void)viewDidLoad
  16. {
  17. [super viewDidLoad];
  18. // Do any additional setup after loading the view, typically from a nib.
  19. UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"MainStoryboard" bundle:nil];
  20. CenterViewController *centerController = (CenterViewController *)[storyboard instantiateViewControllerWithIdentifier:@"CenterViewController"];
  21. LeftViewController *leftController = (LeftViewController *)[storyboard instantiateViewControllerWithIdentifier:@"LeftViewController"];
  22. RightViewController *rightController = (RightViewController *)[storyboard instantiateViewControllerWithIdentifier:@"RightViewController"];
  23. self.containerController = [[IIViewDeckController alloc] initWithCenterViewController:centerController leftViewController:leftController rightViewController:rightController];
  24. self.containerController.leftSize = 100;
  25. self.containerController.rightSize = 200;
  26. self.containerController.view.frame = self.view.bounds;
  27. [self.view addSubview:self.containerController.view];
  28. }

复制代码

这里创建一个IIViewDeckController实例，然后把这个实例对象的视图作为子视图添加到这个view中，这样就实现了跳转到我们需要的IIViewDeckController那里了，让我们创建的IIViewDeckController实例处理左右滑动出现侧边栏的任务了。

（2 ）方法②

这里再介绍一种实现方式：让最左边这个视图继承自IIViewDeckController然后在实现文件添加这个方法：

[cpp] view plaincopyprint?

  1. - (id)initWithCoder:(NSCoder *)aDecoder
  2. {
  3. self = [super initWithCoder:aDecoder];
  4. UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"MainStoryboard" bundle:nil];
  5. self = [super initWithCenterViewController:[storyboard instantiateViewControllerWithIdentifier:@"CenterViewController"]
  6. leftViewController:[storyboard instantiateViewControllerWithIdentifier:@"LeftViewController"]
  7. rightViewController:[storyboard instantiateViewControllerWithIdentifier:@"RightViewController"]];
  8. if (self) {
  9. // Add any extra init code here
  10. }
  11. return self;
  12. }
  13. - (id)initWithCoder:(NSCoder *)aDecoder
  14. {
  15. self = [super initWithCoder:aDecoder];
  16. UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"MainStoryboard" bundle:nil];
  17. self = [super initWithCenterViewController:[storyboard instantiateViewControllerWithIdentifier:@"CenterViewController"]
  18. leftViewController:[storyboard instantiateViewControllerWithIdentifier:@"LeftViewController"]
  19. rightViewController:[storyboard instantiateViewControllerWithIdentifier:@"RightViewController"]];
  20. if (self) {
  21. // Add any extra init code here
  22. }
  23. return self;
  24. }

复制代码

实现的效果是：

实现方式二（不使用第三方库）：

下面简单说说这种滑动出现侧边栏是怎么回事，明显这就是一个视图层叠，那么简单点的话，就是往一个视图里面添加几个视图，然后添加swipe手势，左右滑动时，响应事件处理，在事件处理中让最上面的视图的位置发生变化，也就是视图移动，这样就可以显示出下面的视图，这样大致就可以解决了。

这里同样也是使用storyboard。而且storyboard里面的内容和上面的一样（其实解决方式借鉴了上面的方法①）。

首先分别创建对应的中间，左边，右边视图的controller（tableview controller）。

然后创建三个对应的属性

[cpp] view plaincopyprint?

  1. @property(nonatomic, strong) MainViewController *centerController;
  2. @property(nonatomic, strong) RightViewController *rightController;
  3. @property(nonatomic, strong) LeftViewController *leftController;
  4. @property(nonatomic, strong) MainViewController *centerController;
  5. @property(nonatomic, strong) RightViewController *rightController;
  6. @property(nonatomic, strong) LeftViewController *leftController;

复制代码

接着作为subview添加到视图中并添加swipe手势。处理的代码如下：

[cpp] view plaincopyprint?

  1. - (void)viewDidLoad
  2. {
  3. [super viewDidLoad];
  4. // Do any additional setup after loading the view.
  5. UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"MainStoryboard" bundle:nil];
  6. _centerController = (MainViewController *)[storyboard instantiateViewControllerWithIdentifier:@"MainViewController"];
  7. _leftController = (LeftViewController *)[storyboard instantiateViewControllerWithIdentifier:@"LeftViewController"];
  8. _rightController = (RightViewController *)[storyboard instantiateViewControllerWithIdentifier:@"RightViewController"];
  9. [self.view addSubview:_centerController.view];
  10. [_centerController.view setTag:1];
  11. [_centerController.view setFrame:self.view.bounds];
  12. [self.view addSubview:_leftController.view];
  13. [_leftController.view setTag:2];
  14. [_leftController.view setFrame:self.view.bounds];
  15. [self.view addSubview:_rightController.view];
  16. [_rightController.view setTag:3];
  17. [_rightController.view setFrame:self.view.bounds];
  18. [self.view bringSubviewToFront:_centerController.view];
  19. //add swipe gesture
  20. UISwipeGestureRecognizer *swipeGestureRight = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(swipeGesture:)];
  21. [swipeGestureRight setDirection:UISwipeGestureRecognizerDirectionRight];
  22. [_centerController.view addGestureRecognizer:swipeGestureRight];
  23. UISwipeGestureRecognizer *swipeGestureLeft = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(swipeGesture:)];
  24. [swipeGestureLeft setDirection:UISwipeGestureRecognizerDirectionLeft];
  25. [_centerController.view addGestureRecognizer:swipeGestureLeft];
  26. }
  27. -(void) swipeGesture:(UISwipeGestureRecognizer *)swipeGestureRecognizer {
  28. CALayer *layer = [_centerController.view layer];
  29. layer.shadowColor = [UIColor blackColor].CGColor;
  30. layer.shadowOffset = CGSizeMake(1, 1);
  31. layer.shadowOpacity = 1;
  32. layer.shadowRadius = 20.0;
  33. if (swipeGestureRecognizer.direction == UISwipeGestureRecognizerDirectionRight) {
  34. [_leftController.view setHidden:NO];
  35. [_rightController.view setHidden:YES];
  36. [UIView beginAnimations:nil context:nil];
  37. [UIView setAnimationCurve:UIViewAnimationCurveEaseIn];
  38. if (_centerController.view.frame.origin.x == self.view.frame.origin.x || _centerController.view.frame.origin.x == -100) {
  39. [_centerController.view setFrame:CGRectMake(_centerController.view.frame.origin.x+100, _centerController.view.frame.origin.y, _centerController.view.frame.size.width, _centerController.view.frame.size.height)];
  40. }
  41. [UIView commitAnimations];
  42. }
  43. if (swipeGestureRecognizer.direction == UISwipeGestureRecognizerDirectionLeft) {
  44. [_rightController.view setHidden:NO];
  45. [_leftController.view setHidden:YES];
  46. [UIView beginAnimations:nil context:nil];
  47. [UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
  48. if (_centerController.view.frame.origin.x == self.view.frame.origin.x || _centerController.view.frame.origin.x == 100) {
  49. [_centerController.view setFrame:CGRectMake(_centerController.view.frame.origin.x-100, _centerController.view.frame.origin.y, _centerController.view.frame.size.width, _centerController.view.frame.size.height)];
  50. }
  51. [UIView commitAnimations];
  52. }
  53. }
  54. - (void)viewDidLoad
  55. {
  56. [super viewDidLoad];
  57. // Do any additional setup after loading the view.
  58. UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"MainStoryboard" bundle:nil];
  59. _centerController = (MainViewController *)[storyboard instantiateViewControllerWithIdentifier:@"MainViewController"];
  60. _leftController = (LeftViewController *)[storyboard instantiateViewControllerWithIdentifier:@"LeftViewController"];
  61. _rightController = (RightViewController *)[storyboard instantiateViewControllerWithIdentifier:@"RightViewController"];
  62. [self.view addSubview:_centerController.view];
  63. [_centerController.view setTag:1];
  64. [_centerController.view setFrame:self.view.bounds];
  65. [self.view addSubview:_leftController.view];
  66. [_leftController.view setTag:2];
  67. [_leftController.view setFrame:self.view.bounds];
  68. [self.view addSubview:_rightController.view];
  69. [_rightController.view setTag:3];
  70. [_rightController.view setFrame:self.view.bounds];
  71. [self.view bringSubviewToFront:_centerController.view];
  72. //add swipe gesture
  73. UISwipeGestureRecognizer *swipeGestureRight = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(swipeGesture:)];
  74. [swipeGestureRight setDirection:UISwipeGestureRecognizerDirectionRight];
  75. [_centerController.view addGestureRecognizer:swipeGestureRight];
  76. UISwipeGestureRecognizer *swipeGestureLeft = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(swipeGesture:)];
  77. [swipeGestureLeft setDirection:UISwipeGestureRecognizerDirectionLeft];
  78. [_centerController.view addGestureRecognizer:swipeGestureLeft];
  79. }
  80. -(void) swipeGesture:(UISwipeGestureRecognizer *)swipeGestureRecognizer {
  81. CALayer *layer = [_centerController.view layer];
  82. layer.shadowColor = [UIColor blackColor].CGColor;
  83. layer.shadowOffset = CGSizeMake(1, 1);
  84. layer.shadowOpacity = 1;
  85. layer.shadowRadius = 20.0;
  86. if (swipeGestureRecognizer.direction == UISwipeGestureRecognizerDirectionRight) {
  87. [_leftController.view setHidden:NO];
  88. [_rightController.view setHidden:YES];
  89. [UIView beginAnimations:nil context:nil];
  90. [UIView setAnimationCurve:UIViewAnimationCurveEaseIn];
  91. if (_centerController.view.frame.origin.x == self.view.frame.origin.x || _centerController.view.frame.origin.x == -100) {
  92. [_centerController.view setFrame:CGRectMake(_centerController.view.frame.origin.x+100, _centerController.view.frame.origin.y, _centerController.view.frame.size.width, _centerController.view.frame.size.height)];
  93. }
  94. [UIView commitAnimations];
  95. }
  96. if (swipeGestureRecognizer.direction == UISwipeGestureRecognizerDirectionLeft) {
  97. [_rightController.view setHidden:NO];
  98. [_leftController.view setHidden:YES];
  99. [UIView beginAnimations:nil context:nil];
  100. [UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
  101. if (_centerController.view.frame.origin.x == self.view.frame.origin.x || _centerController.view.frame.origin.x == 100) {
  102. [_centerController.view setFrame:CGRectMake(_centerController.view.frame.origin.x-100, _centerController.view.frame.origin.y, _centerController.view.frame.size.width, _centerController.view.frame.size.height)];
  103. }
  104. [UIView commitAnimations];
  105. }
  106. }

复制代码

下面稍稍解说一下在swipe手势的事件处理中的一些处理：

①为center视图添加阴影边框

②这里swipe手势响应的是左右滑动，右滑动时是要出现左视图，所以要隐藏右视图，同理就知道如何处理左滑动了。

③cente 视图移动时添加了动画

说明：我这样处理大致还是可以实现这种效果的。下面附上一张在我应用在sina weibo demo中的效果图：

还不错吧！

下面进行一点点补充：上面我们实现的都是通过swipe滑动最上层的view来实现左右侧移，那么这样就太局限了，那么如何实现例如点击下面view中的LEFT按键来移动上层的view呢？其实也很简单，我这里的处理是用notification通知，就是在button那里发送一个通知，在上层的view监听。当然呢，也可以用delegate和kvo实现，但是这个。。。暂时没有研究，就算了，有空再了解一下。

下面附加一下代码：

在下面那层view的controller添加这个方法：

[cpp] view plaincopyprint?

  1. - (IBAction)BackButton:(id)sender {
  2. NSString *myString = @"back";
  3. [[NSNotificationCenter defaultCenter] postNotificationName: @"back" object:myString userInfo: nil];
  4. }
  5. - (IBAction)BackButton:(id)sender {
  6. NSString *myString = @"back";
  7. [[NSNotificationCenter defaultCenter] postNotificationName: @"back" object:myString userInfo: nil];
  8. }

复制代码

在上面这个层的view的controller添加下面的代码：

[cpp] view plaincopyprint?

  1. [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(BackFunc:) name: @"back" object:nil];
  2. id) BackFunc:(NSNotification*) notification {
  3. NSString *get = [notification object];
  4. if ([get isEqualToString:@"back"]) {
  5. [UIView beginAnimations:nil context:nil];
  6. [UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
  7. [_centerController.view setFrame:CGRectMake(0, _centerController.view.frame.origin.y, _centerController.view.frame.size.width, _centerController.view.frame.size.height)];
  8. [UIView commitAnimations];
  9. }
  10. [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(BackFunc:) name: @"back" object:nil];
  11. -(void) BackFunc:(NSNotification*) notification {
  12. NSString *get = [notification object];
  13. if ([get isEqualToString:@"back"]) {
  14. [UIView beginAnimations:nil context:nil];
  15. [UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
  16. [_centerController.view setFrame:CGRectMake(0, _centerController.view.frame.origin.y, _centerController.view.frame.size.width, _centerController.view.frame.size.height)];
  17. [UIView commitAnimations];
  18. }
  19. }

复制代码

这样就ok啦啦！

原文链接：http://blog.csdn.net/crayon_dys/article/details/9057637
<ignore_js_op>

la

iOS 两种方法实现左右滑动出现侧边菜单栏 slide view的更多相关文章

  1. 【转】 iOS 两种方法实现左右滑动出现侧边菜单栏 slide view

      原文: http://blog.csdn.net/crayondeng/article/details/9057637 --- 关于评论中,很多网友都是需要这部分的相关源码,其实在我上传的新浪微博 ...

  2. Cisco设备IOS的恢复方法 两种方法

    如果不小心把Router或者Switch的IOS删除了,特别是Flash中的IOS和ROM中的Mini IOS都没有了的话,连启动都不行的话,有什么方法恢复它呢?答案是方法不只一种,而是两种.其实是我 ...

  3. ios开发——实用技术OC篇》倒计时实现的两种方法

    倒计时实现的两种方法 timeFireMethod函数,timeFireMethod进行倒计时的一些操作,完成时把timer给invalidate掉就ok了,代码如下: secondsCountDow ...

  4. iOS 关于退出键盘两种方法和避免遮挡

    退出键盘: 方法1:不使用代理,直接使用: -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { [self.textFi ...

  5. iOS 两种不同的图片无限轮播

    代码地址如下:http://www.demodashi.com/demo/11608.html 前记 其实想写这个关于无限轮播的记录已经很久很久了,只是没什么时间,这只是一个借口,正如:时间就像海绵, ...

  6. UIImage加载图片的两种方法区别

    Apple官方的文档为生成一个UIImage对象提供了两种方法加载图片: 1. imageNamed,其参数为图片的名字: 2. imageWithContentsOfFile,其参数也是图片文件的路 ...

  7. JAVA 集合 List 分组的两种方法

    CSDN日报20170219--<程序员的沟通之痛> [技术直播]揭开人工智能神秘的面纱 程序员1月书讯 云端应用征文大赛,秀绝招,赢无人机! JAVA 集合 List 分组的两种方法 2 ...

  8. windows下获取IP地址的两种方法

    windows下获取IP地址的两种方法: 一种可以获取IPv4和IPv6,但是需要WSAStartup: 一种只能取到IPv4,但是不需要WSAStartup: 如下: 方法一:(可以获取IPv4和I ...

  9. android 之 启动画面的两种方法

    现在,当我们打开任意的一个app时,其中的大部分都会显示一个启动界面,展示本公司的logo和当前的版本,有的则直接把广告放到了上面.启动画面的可以分为两种设置方式:一种是两个Activity实现,和一 ...

随机推荐

  1. MYSQL正式环境主从复制（不锁表，不停服务）

    参考URL: http://rfyiamcool.blog.51cto.com/1030776/1016636/ 原因源于其实以前环境是有MYSQL主从复制的,且最开始主从复制之间是OK的. 但由于日 ...

  2. 电磁兼容性设计学习笔记--PCB中地的布局

    http://bbs.ednchina.com/BLOG_ARTICLE_3010439.HTM PCB上元器件的布局对整个PCB板的电磁兼容性影响很大,所以从事硬件电路设计的工程师很有必要学习PCB ...

  3. 小公司生存，一般活过第一年，就能撑3年（读书笔记：成败关键，关键是你是否拥有现金流客户）good

    小公司生存,一般活过第一年,就能撑3年,一般能撑过3年,到第7年遇到坎,如果第7年突破,能活过10年,是想死也不容易,等到第二个七年,可以搞搞人事地震了,因为要二次创业. -------------- ...

  4. 深入理解linux网络技术内幕读书笔记(十)--帧的接收

    Table of Contents 1 概述 1.1 帧接收的中断处理 2 设备的开启与关闭 3 队列 4 通知内核帧已接收:NAPI和netif_rx 4.1 NAPI简介 4.1.1 NAPI优点 ...

  5. Uber明年在中国将继续补贴，并大举进军100个城市！

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  6. css样式-表格优化

    1.表格的初步优化 index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  7. (转)20 个大大节省你时间的 HTML5 开发工具

    Rendera 如果你希望有个环境可以测试.浏览和体验各种不同的 CSS/HTML 和 JavaScript 代码,Rendera 为你提供了实时的运行结果.类似 RunJS. Patternizer ...

  8. hadoop权威指南 chapter2 MapReduce

    MapReduce MapReduce is a programming model for data processing. The model is simple, yet not too sim ...

  9. IT English Collection(16) of Message

    1 前言 本文介绍了关于Objective-C中的消息机制,详情如下. 转载请注明出处:http://blog.csdn.net/developer_zhang 2 详述 2.1 原文 A messa ...

  10. 关于material和sharedMaterial的问题

    在unity3d中,Renderer组件有两个属性:material和sharedMaterial,它们都可以用来获取Renderer的材质属性.但是它们之间却又很大的区别,下面通过示例来讲解一下. ...