码迷，mamicode.com
首页 > 移动开发 > 详细

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

时间：2015-05-05 18:35:07      阅读：201      评论：0      收藏：0      [点我收藏+]

标签：

现在很多的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. 
  7. UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"MainStoryboard" bundle:nil]; 
  9. CenterViewController *centerController = (CenterViewController *)[storyboard instantiateViewControllerWithIdentifier:@"CenterViewController"]; 
  11. LeftViewController *leftController = (LeftViewController *)[storyboard instantiateViewControllerWithIdentifier:@"LeftViewController"]; 
  13. RightViewController *rightController = (RightViewController *)[storyboard instantiateViewControllerWithIdentifier:@"RightViewController"]; 
  15. self.containerController = [[IIViewDeckController alloc] initWithCenterViewController:centerController leftViewController:leftController rightViewController:rightController]; 
  17. self.containerController.leftSize = 100; 
  18. self.containerController.rightSize = 200; 
  20. self.containerController.view.frame = self.view.bounds; 
  21. [self.view addSubview:self.containerController.view]; 
  23. } 
  24. - (void)viewDidLoad
  25. {
  26. [super viewDidLoad];
  27. // Do any additional setup after loading the view, typically from a nib.
  30. UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"MainStoryboard" bundle:nil];
  32. CenterViewController *centerController = (CenterViewController *)[storyboard instantiateViewControllerWithIdentifier:@"CenterViewController"];
  34. LeftViewController *leftController = (LeftViewController *)[storyboard instantiateViewControllerWithIdentifier:@"LeftViewController"];
  36. RightViewController *rightController = (RightViewController *)[storyboard instantiateViewControllerWithIdentifier:@"RightViewController"];
  38. self.containerController = [[IIViewDeckController alloc] initWithCenterViewController:centerController leftViewController:leftController rightViewController:rightController];
  40. self.containerController.leftSize = 100;
  41. self.containerController.rightSize = 200;
  43. self.containerController.view.frame = self.view.bounds; 
  44. [self.view addSubview:self.containerController.view];
  46. }
复制代码

这里创建一个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 
  3. { 
  4. [super viewDidLoad]; 
  5. // Do any additional setup after loading the view. 
  7. UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"MainStoryboard" bundle:nil]; 
  9. _centerController = (MainViewController *)[storyboard instantiateViewControllerWithIdentifier:@"MainViewController"]; 
  11. _leftController = (LeftViewController *)[storyboard instantiateViewControllerWithIdentifier:@"LeftViewController"]; 
  13. _rightController = (RightViewController *)[storyboard instantiateViewControllerWithIdentifier:@"RightViewController"]; 
  15. [self.view addSubview:_centerController.view]; 
  16. [_centerController.view setTag:1]; 
  17. [_centerController.view setFrame:self.view.bounds]; 
  19. [self.view addSubview:_leftController.view]; 
  20. [_leftController.view setTag:2]; 
  21. [_leftController.view setFrame:self.view.bounds]; 
  23. [self.view addSubview:_rightController.view]; 
  24. [_rightController.view setTag:3]; 
  25. [_rightController.view setFrame:self.view.bounds]; 
  27. [self.view bringSubviewToFront:_centerController.view]; 
  29. //add swipe gesture 
  30. UISwipeGestureRecognizer *swipeGestureRight = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(swipeGesture:)]; 
  31. [swipeGestureRight setDirection:UISwipeGestureRecognizerDirectionRight]; 
  32. [_centerController.view addGestureRecognizer:swipeGestureRight]; 
  34. UISwipeGestureRecognizer *swipeGestureLeft = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(swipeGesture:)]; 
  35. [swipeGestureLeft setDirection:UISwipeGestureRecognizerDirectionLeft]; 
  36. [_centerController.view addGestureRecognizer:swipeGestureLeft]; 
  37. } 
  38. -(void) swipeGesture:(UISwipeGestureRecognizer *)swipeGestureRecognizer { 
  40. CALayer *layer = [_centerController.view layer]; 
  41. layer.shadowColor = [UIColor blackColor].CGColor; 
  42. layer.shadowOffset = CGSizeMake(1, 1); 
  43. layer.shadowOpacity = 1; 
  44. layer.shadowRadius = 20.0; 
  45. if (swipeGestureRecognizer.direction == UISwipeGestureRecognizerDirectionRight) { 
  46. [_leftController.view setHidden:NO]; 
  47. [_rightController.view setHidden:YES]; 
  49. [UIView beginAnimations:nil context:nil]; 
  50. [UIView setAnimationCurve:UIViewAnimationCurveEaseIn]; 
  51. if (_centerController.view.frame.origin.x == self.view.frame.origin.x || _centerController.view.frame.origin.x == -100) { 
  52. [_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)]; 
  53. } 
  55. [UIView commitAnimations]; 
  56. } 
  57. if (swipeGestureRecognizer.direction == UISwipeGestureRecognizerDirectionLeft) { 
  58. [_rightController.view setHidden:NO]; 
  59. [_leftController.view setHidden:YES]; 
  61. [UIView beginAnimations:nil context:nil]; 
  62. [UIView setAnimationCurve:UIViewAnimationCurveEaseOut]; 
  63. if (_centerController.view.frame.origin.x == self.view.frame.origin.x || _centerController.view.frame.origin.x == 100) { 
  64. [_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)]; 
  65. } 
  67. [UIView commitAnimations]; 
  68. } 
  69. } 
  70. - (void)viewDidLoad
  71. {
  72. [super viewDidLoad];
  73. // Do any additional setup after loading the view.
  75. UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"MainStoryboard" bundle:nil];
  77. _centerController = (MainViewController *)[storyboard instantiateViewControllerWithIdentifier:@"MainViewController"];
  79. _leftController = (LeftViewController *)[storyboard instantiateViewControllerWithIdentifier:@"LeftViewController"];
  81. _rightController = (RightViewController *)[storyboard instantiateViewControllerWithIdentifier:@"RightViewController"]; 
  83. [self.view addSubview:_centerController.view];
  84. [_centerController.view setTag:1];
  85. [_centerController.view setFrame:self.view.bounds];
  87. [self.view addSubview:_leftController.view];
  88. [_leftController.view setTag:2];
  89. [_leftController.view setFrame:self.view.bounds];
  91. [self.view addSubview:_rightController.view];
  92. [_rightController.view setTag:3];
  93. [_rightController.view setFrame:self.view.bounds];
  95. [self.view bringSubviewToFront:_centerController.view];
  97. //add swipe gesture
  98. UISwipeGestureRecognizer *swipeGestureRight = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(swipeGesture:)];
  99. [swipeGestureRight setDirection:UISwipeGestureRecognizerDirectionRight];
  100. [_centerController.view addGestureRecognizer:swipeGestureRight];
  102. UISwipeGestureRecognizer *swipeGestureLeft = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(swipeGesture:)];
  103. [swipeGestureLeft setDirection:UISwipeGestureRecognizerDirectionLeft];
  104. [_centerController.view addGestureRecognizer:swipeGestureLeft];
  105. }
  106. -(void) swipeGesture:(UISwipeGestureRecognizer *)swipeGestureRecognizer {
  108. CALayer *layer = [_centerController.view layer];
  109. layer.shadowColor = [UIColor blackColor].CGColor;
  110. layer.shadowOffset = CGSizeMake(1, 1);
  111. layer.shadowOpacity = 1;
  112. layer.shadowRadius = 20.0;
  113. if (swipeGestureRecognizer.direction == UISwipeGestureRecognizerDirectionRight) {
  114. [_leftController.view setHidden:NO];
  115. [_rightController.view setHidden:YES];
  117. [UIView beginAnimations:nil context:nil];
  118. [UIView setAnimationCurve:UIViewAnimationCurveEaseIn];
  119. if (_centerController.view.frame.origin.x == self.view.frame.origin.x || _centerController.view.frame.origin.x == -100) {
  120. [_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)];
  121. }
  123. [UIView commitAnimations];
  124. }
  125. if (swipeGestureRecognizer.direction == UISwipeGestureRecognizerDirectionLeft) {
  126. [_rightController.view setHidden:NO];
  127. [_leftController.view setHidden:YES];
  129. [UIView beginAnimations:nil context:nil];
  130. [UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
  131. if (_centerController.view.frame.origin.x == self.view.frame.origin.x || _centerController.view.frame.origin.x == 100) {
  132. [_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)];
  133. }
  135. [UIView commitAnimations];
  136. }
  137. }
复制代码

下面稍稍解说一下在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]; 
  4. id) BackFunc:(NSNotification*) notification { 
  5. NSString *get = [notification object]; 
  6. if ([get isEqualToString:@"back"]) { 
  8. [UIView beginAnimations:nil context:nil]; 
  9. [UIView setAnimationCurve:UIViewAnimationCurveEaseOut]; 
  10. [_centerController.view setFrame:CGRectMake(0, _centerController.view.frame.origin.y, _centerController.view.frame.size.width, _centerController.view.frame.size.height)]; 
  11. [UIView commitAnimations]; 
  12. } 
  13. [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(BackFunc:) name: @"back" object:nil];
  16. -(void) BackFunc:(NSNotification*) notification {
  17. NSString *get = [notification object];
  18. if ([get isEqualToString:@"back"]) {
  20. [UIView beginAnimations:nil context:nil];
  21. [UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
  22. [_centerController.view setFrame:CGRectMake(0, _centerController.view.frame.origin.y, _centerController.view.frame.size.width, _centerController.view.frame.size.height)];
  23. [UIView commitAnimations];
  24. }
  25. }
复制代码

这样就ok啦啦！ 

原文链接：http://blog.csdn.net/crayon_dys/article/details/9057637
<ignore_js_op>laugh.gif (1.7 KB, 下载次数: 491)

 

技术分享

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

标签：

原文地址：http://www.cnblogs.com/itlover2013/p/4479400.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！