zoukankan      html  css  js  c++  java

  • 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. { 
    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
  • 相关阅读:
    javascript如何实现图片隐藏？
    TypeScript数字分隔符和更严格的类属性检查
    JS 原生闭包模块化开发总结
    详解浏览器储存
    对象扩展运算符和 rest 运算符及 keyof 和查找类型
    Js实现动态轮播图效果
    javascript选择器有哪些？
    javascript的事件流模型都有什么？
    理解JavaScript中的语法和代码结构
    14. Cantor表
  • 原文地址：https://www.cnblogs.com/itlover2013/p/4304315.html
Copyright © 2011-2022 走看看