现在很多的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

转载于:https://www.cnblogs.com/iOS-mt/p/4328435.html

iOS 两种方法实现左右滑动出现侧边菜单栏 slide view相关推荐

  1. iOS: JS和Native交互的两种方法，iosjsnative交互

    iOS: JS和Native交互的两种方法,iosjsnative交互 背景: UIWebView: iOS 用来展示 web 端内容的控件. 1. 核心方法: - (NSString*)string ...

  2. 【VUE】vue实现登录滑动拼图验证的两种方法，纯前端组件验证以及前后端同时验证

    vue实现登录滑动拼图验证的两种方法: 第一种是纯前端组件验证,只能区分是人为操作还是机器操作. 第二种是前后端同时验证,这种方法加上后端校验相对会更安全一些.(注:在最底部加上了同时兼容移动端的方法 ...

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

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

  4. iOS 两种预览使用详解（配Demo下载）（ Quicklook UIDocumentInteractionController）

    文章目录 二. 使用 1. 首先,引入框架 2. 将QLPreviewController设置为属性 3. 初始化 4. 设置代理和数据源 5. 编码问题 个人小结 QLPreviewControll ...

  5. C++/C++11中用于定义类型别名的两种方法：typedef和using

    类型别名(type alias)是一个名字,它是某种类型的同义词.使用类型别名有很多好处,它让复杂的类型名字变得简单明了.易于理解和使用,还有助于程序员清楚地知道使用该类型的真实目的.在C++中,任何 ...

  6. mysql php gpl_MySQL_MySQL数据库远程访问权限如何打开(两种方法)，下载GPL版本安装MySQL Community - phpStudy...

    MySQL数据库远程访问权限如何打开(两种方法) 下载GPL版本安装 MySQL Community Edition(GPL) Community (GPL) Downloads » 在我们使用mys ...

  7. android自动隐藏虚拟键,Android 隐藏底部虚拟键的两种方法

    方法一  滑动屏幕 可重新显示出来 protected void hideBottomUIMenu() { //隐藏虚拟按键,并且全屏 if (Build.VERSION.SDK_INT > 1 ...

  8. iCloud照片怎么恢复到相册？两种方法轻松解决

    iCloud照片怎么恢复到相册?iCloud顾名思义就是云备份,备份到手机iCloud里的数据,手机里的数据可以用电脑进行查看,除了电脑版iCloud可以查看,使用专业的恢复软件也可以,小编为大家介绍 ...

  9. Mixly第三方库开发的两种方法——U8g2库二次开发

    Mixly第三方库开发的两种方法--U8g2库二次开发 前言 方法一:自定义库 1.创建库文件夹 2.开始编程 2.1.定义图形块的基本信息 2.2.定义图形块的外观样式 2.3.定义图形块与C语言的 ...

最新文章

  1. MySQL必知必会读书笔记
  2. mysql1040_mysql Error 1040 too many connection解决办法
  3. 百度Create大会：百度AI安全研究的进展与愿景
  4. 官方 STM32F303ZE Nucleo-144开发板 按键使用
  5. idea自动导包_IDEA已经世界第一了，听说你还不会？
  6. Hibernate 一对多连接表单向关联
  7. struts2文件下载及文件名中文问题
  8. 在虚拟机中安装Linux系统
  9. hart协议c语言,简述HART协议命令和语言
  10. TcaplusDB君 · 行业新闻汇编（7月2日）
  11. 【图的表示】：如何存储微博、微信等社交网络中的好友关系？
  12. python 三维数据绘制等高线_python密度与等高线绘制,Python,和,轮廓图,Matplotlib,详解...
  13. apachecn归档下载
  14. 应急灯电源驱动方案：OC5205 30V/1.5A ，可完美替代PT4205/PT4115
  15. 爬虫----request简介（以及urllib模块和request模块保存图片区别）
  16. 极性电容为什么具有单向导电性（阀金属与氧化膜）
  17. 王者英雄胜率用计算机怎么算,巅峰赛计算英雄胜率吗
  18. 【转】前端——实用UI组件库
  19. 中国最大的500家外商投资企业
  20. 【作品展示】双向热电偶热电阻分度表软件

热门文章

  1. 三、PHP基础——HTTP协议 文件编程
  2. Chapter7-5_Multilingual BERT
  3. 04.卷积神经网络 W2.深度卷积网络：实例探究（作业：Keras教程+ResNets残差网络）
  4. LeetCode 1136. 平行课程（拓扑排序）
  5. Feature Engineering 特征工程 1. Baseline Model
  6. LeetCode 1071. 字符串的最大公因子（字符串的最大公约数）
  7. LeetCode 841. 钥匙和房间（DFS/BFS）
  8. vue弹出alert_vue+webpack 实现简单的弹窗(alert)组件
  9. python语言画心_python语言还是java如何用python画爱心
  10. nrf52832芯片手册_nRF52832低功耗问题不完全总结