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

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

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

(2 )方法②

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

[cpp] view plaincopyprint?

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

实现的效果是:

实现方式二(不使用第三方库):

下面简单说说这种滑动出现侧边栏是怎么回事,明显这就是一个视图层叠,那么简单点的话,就是往一个视图里面添加几个视图,然后添加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. [super viewDidLoad]; 
  3. // Do any additional setup after loading the view. 
  4. UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"MainStoryboard" bundle:nil]; 
  5. _centerController = (MainViewController *)[storyboard instantiateViewControllerWithIdentifier:@"MainViewController"]; 
  6. _leftController = (LeftViewController *)[storyboard instantiateViewControllerWithIdentifier:@"LeftViewController"]; 
  7. _rightController = (RightViewController *)[storyboard instantiateViewControllerWithIdentifier:@"RightViewController"]; 
  8. [self.view addSubview:_centerController.view]; 
  9. [_centerController.view setTag:1]; 
  10. [_centerController.view setFrame:self.view.bounds]; 
  11. [self.view addSubview:_leftController.view]; 
  12. [_leftController.view setTag:2]; 
  13. [_leftController.view setFrame:self.view.bounds]; 
  14. [self.view addSubview:_rightController.view]; 
  15. [_rightController.view setTag:3]; 
  16. [_rightController.view setFrame:self.view.bounds]; 
  17. [self.view bringSubviewToFront:_centerController.view]; 
  18. //add swipe gesture 
  19. UISwipeGestureRecognizer *swipeGestureRight = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(swipeGesture:)]; 
  20. [swipeGestureRight setDirection:UISwipeGestureRecognizerDirectionRight]; 
  21. [_centerController.view addGestureRecognizer:swipeGestureRight]; 
  22. UISwipeGestureRecognizer *swipeGestureLeft = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(swipeGesture:)]; 
  23. [swipeGestureLeft setDirection:UISwipeGestureRecognizerDirectionLeft]; 
  24. [_centerController.view addGestureRecognizer:swipeGestureLeft]; 
  25. -(void) swipeGesture:(UISwipeGestureRecognizer *)swipeGestureRecognizer { 
  26. CALayer *layer = [_centerController.view layer]; 
  27. layer.shadowColor = [UIColor blackColor].CGColor; 
  28. layer.shadowOffset = CGSizeMake(1, 1); 
  29. layer.shadowOpacity = 1; 
  30. layer.shadowRadius = 20.0; 
  31. if (swipeGestureRecognizer.direction == UISwipeGestureRecognizerDirectionRight) { 
  32. [_leftController.view setHidden:NO]; 
  33. [_rightController.view setHidden:YES]; 
  34. [UIView beginAnimations:nil context:nil]; 
  35. [UIView setAnimationCurve:UIViewAnimationCurveEaseIn]; 
  36. if (_centerController.view.frame.origin.x == self.view.frame.origin.x || _centerController.view.frame.origin.x == -100) { 
  37. [_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)]; 
  38. [UIView commitAnimations]; 
  39. if (swipeGestureRecognizer.direction == UISwipeGestureRecognizerDirectionLeft) { 
  40. [_rightController.view setHidden:NO]; 
  41. [_leftController.view setHidden:YES]; 
  42. [UIView beginAnimations:nil context:nil]; 
  43. [UIView setAnimationCurve:UIViewAnimationCurveEaseOut]; 
  44. if (_centerController.view.frame.origin.x == self.view.frame.origin.x || _centerController.view.frame.origin.x == 100) { 
  45. [_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)]; 
  46. [UIView commitAnimations]; 
  47. - (void)viewDidLoad
  48. {
  49. [super viewDidLoad];
  50. // Do any additional setup after loading the view.
  51. UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"MainStoryboard" bundle:nil];
  52. _centerController = (MainViewController *)[storyboard instantiateViewControllerWithIdentifier:@"MainViewController"];
  53. _leftController = (LeftViewController *)[storyboard instantiateViewControllerWithIdentifier:@"LeftViewController"];
  54. _rightController = (RightViewController *)[storyboard instantiateViewControllerWithIdentifier:@"RightViewController"]; 
  55. [self.view addSubview:_centerController.view];
  56. [_centerController.view setTag:1];
  57. [_centerController.view setFrame:self.view.bounds];
  58. [self.view addSubview:_leftController.view];
  59. [_leftController.view setTag:2];
  60. [_leftController.view setFrame:self.view.bounds];
  61. [self.view addSubview:_rightController.view];
  62. [_rightController.view setTag:3];
  63. [_rightController.view setFrame:self.view.bounds];
  64. [self.view bringSubviewToFront:_centerController.view];
  65. //add swipe gesture
  66. UISwipeGestureRecognizer *swipeGestureRight = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(swipeGesture:)];
  67. [swipeGestureRight setDirection:UISwipeGestureRecognizerDirectionRight];
  68. [_centerController.view addGestureRecognizer:swipeGestureRight];
  69. UISwipeGestureRecognizer *swipeGestureLeft = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(swipeGesture:)];
  70. [swipeGestureLeft setDirection:UISwipeGestureRecognizerDirectionLeft];
  71. [_centerController.view addGestureRecognizer:swipeGestureLeft];
  72. }
  73. -(void) swipeGesture:(UISwipeGestureRecognizer *)swipeGestureRecognizer {
  74. CALayer *layer = [_centerController.view layer];
  75. layer.shadowColor = [UIColor blackColor].CGColor;
  76. layer.shadowOffset = CGSizeMake(1, 1);
  77. layer.shadowOpacity = 1;
  78. layer.shadowRadius = 20.0;
  79. if (swipeGestureRecognizer.direction == UISwipeGestureRecognizerDirectionRight) {
  80. [_leftController.view setHidden:NO];
  81. [_rightController.view setHidden:YES];
  82. [UIView beginAnimations:nil context:nil];
  83. [UIView setAnimationCurve:UIViewAnimationCurveEaseIn];
  84. if (_centerController.view.frame.origin.x == self.view.frame.origin.x || _centerController.view.frame.origin.x == -100) {
  85. [_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)];
  86. }
  87. [UIView commitAnimations];
  88. }
  89. if (swipeGestureRecognizer.direction == UISwipeGestureRecognizerDirectionLeft) {
  90. [_rightController.view setHidden:NO];
  91. [_leftController.view setHidden:YES];
  92. [UIView beginAnimations:nil context:nil];
  93. [UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
  94. if (_centerController.view.frame.origin.x == self.view.frame.origin.x || _centerController.view.frame.origin.x == 100) {
  95. [_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)];
  96. }
  97. [UIView commitAnimations];
  98. }
  99. }
复制代码

下面稍稍解说一下在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. - (IBAction)BackButton:(id)sender {
  5. NSString *myString = @"back";
  6. [[NSNotificationCenter defaultCenter] postNotificationName: @"back" object:myString userInfo: nil];
  7. }
复制代码

在上面这个层的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. [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(BackFunc:) name: @"back" object:nil];
  10. -(void) BackFunc:(NSNotification*) notification {
  11. NSString *get = [notification object];
  12. if ([get isEqualToString:@"back"]) {
  13. [UIView beginAnimations:nil context:nil];
  14. [UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
  15. [_centerController.view setFrame:CGRectMake(0, _centerController.view.frame.origin.y, _centerController.view.frame.size.width, _centerController.view.frame.size.height)];
  16. [UIView commitAnimations];
  17. }
  18. }
复制代码

这样就ok啦啦! 

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

 

技术分享

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。