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

转载 2013年12月04日 18:05:24

转自:http://blog.csdn.net/crayondeng/article/details/9057637

--- 关于评论中,很多网友都是需要这部分的相关源码,其实在我上传的新浪微博小程序中,就用到了这个内容,而且是采用自己代码实现的方式,有需要的朋友自己点击这个链接进行下载吧!点击打开链接 大笑


现在很多的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对应的视图(即第一个)。

下面看看代码:

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

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

(2 )方法②

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


  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. }  


实现的效果是:



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

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

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

首先分别创建对应的中间,左边,右边视图的controller(tableview controller)。

然后创建三个对应的属性

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

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

  1. - (void)viewDidLoad  
  2. {  
  3.     [super viewDidLoad];  
  4.     // Do any additional setup after loading the view.  
  5.       
  6.     UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"MainStoryboard" bundle:nil];  
  7.       
  8.     _centerController = (MainViewController *)[storyboard instantiateViewControllerWithIdentifier:@"MainViewController"];  
  9.       
  10.     _leftController = (LeftViewController *)[storyboard instantiateViewControllerWithIdentifier:@"LeftViewController"];  
  11.       
  12.     _rightController = (RightViewController *)[storyboard instantiateViewControllerWithIdentifier:@"RightViewController"];      
  13.       
  14.     [self.view addSubview:_centerController.view];  
  15.     [_centerController.view setTag:1];  
  16.     [_centerController.view setFrame:self.view.bounds];  
  17.       
  18.     [self.view addSubview:_leftController.view];  
  19.     [_leftController.view setTag:2];  
  20.     [_leftController.view setFrame:self.view.bounds];  
  21.       
  22.     [self.view addSubview:_rightController.view];  
  23.     [_rightController.view setTag:3];  
  24.     [_rightController.view setFrame:self.view.bounds];  
  25.       
  26.     [self.view bringSubviewToFront:_centerController.view];  
  27.       
  28.     //add swipe gesture  
  29.     UISwipeGestureRecognizer *swipeGestureRight = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(swipeGesture:)];  
  30.     [swipeGestureRight setDirection:UISwipeGestureRecognizerDirectionRight];  
  31.     [_centerController.view addGestureRecognizer:swipeGestureRight];  
  32.       
  33.     UISwipeGestureRecognizer *swipeGestureLeft = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(swipeGesture:)];  
  34.     [swipeGestureLeft setDirection:UISwipeGestureRecognizerDirectionLeft];  
  35.     [_centerController.view addGestureRecognizer:swipeGestureLeft];  
  36. }  
  37. -(void) swipeGesture:(UISwipeGestureRecognizer *)swipeGestureRecognizer {  
  38.       
  39.     CALayer *layer = [_centerController.view layer];  
  40.     layer.shadowColor = [UIColor blackColor].CGColor;  
  41.     layer.shadowOffset = CGSizeMake(1, 1);  
  42.     layer.shadowOpacity = 1;  
  43.     layer.shadowRadius = 20.0;  
  44.     if (swipeGestureRecognizer.direction == UISwipeGestureRecognizerDirectionRight) {  
  45.         [_leftController.view setHidden:NO];  
  46.         [_rightController.view setHidden:YES];  
  47.           
  48.         [UIView beginAnimations:nil context:nil];  
  49.         [UIView setAnimationCurve:UIViewAnimationCurveEaseIn];  
  50.         if (_centerController.view.frame.origin.x == self.view.frame.origin.x || _centerController.view.frame.origin.x == -100) {  
  51.             [_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)];  
  52.         }  
  53.           
  54.         [UIView commitAnimations];  
  55.     }  
  56.     if (swipeGestureRecognizer.direction == UISwipeGestureRecognizerDirectionLeft) {  
  57.         [_rightController.view setHidden:NO];  
  58.         [_leftController.view setHidden:YES];  
  59.           
  60.         [UIView beginAnimations:nil context:nil];  
  61.         [UIView setAnimationCurve:UIViewAnimationCurveEaseOut];  
  62.         if (_centerController.view.frame.origin.x == self.view.frame.origin.x || _centerController.view.frame.origin.x == 100) {  
  63.             [_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)];  
  64.         }  
  65.           
  66.         [UIView commitAnimations];  
  67.     }  
  68. }  


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

①为center视图添加阴影边框

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

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


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



还不错吧!大笑


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


下面附加一下代码:

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

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

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


  1. [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(BackFunc:) name: @"back" object:nil];  
  2.   
  3.   
  4. id) BackFunc:(NSNotification*) notification  {  
  5. NSString *get = [notification object];  
  6. if ([get isEqualToString:@"back"]) {  
  7.       
  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. }  

这样就ok啦啦!


iOS左滑弹出右侧抽屉

// // ViewController.m // RightDrawerSample // // Created by amber on 16/8/2. // Copyright © 201...
  • Mayday550
  • Mayday550
  • 2016年08月04日 10:01
  • 939

ios-侧滑-侧边栏 核心代码

#import #import "MainViewController.h" #import "LeftViewController.h" #import "RightViewController....
  • u012701023
  • u012701023
  • 2015年09月11日 22:13
  • 799

iOS swift3.0 抽屉式侧滑布局的实现

(ios swift)今天给大家讲解的这个东西呢,就是模仿手机QQ的侧滑抽屉式布局,如下图所示:         首先我们的实现思路是用两层叠在一起的UIView来实现,当点击表层vi...
  • u010872455
  • u010872455
  • 2016年09月02日 23:30
  • 2236

IOS开发UI篇--一个侧滑菜单SlidingMenu

一、简介侧滑菜单已经成为app一个极常用的设计,不管是事务类,效率类还是生活类app。侧滑菜单因Path 2.0和Facebook为开发者熟知,国内目前也有很多流行app用到了侧滑菜单,比如QQ、网易...
  • yixiangboy
  • yixiangboy
  • 2015年07月14日 20:47
  • 8613

JS实现侧部菜单栏的滑动

最近的网站越来越流行侧部菜单栏,所以今天自己实现了一下: //背景图片 //这张图片点击后调用菜单栏scrol...
  • hjkle987
  • hjkle987
  • 2015年09月14日 10:28
  • 1365

iOS UI设计: 仿QQ左边抽屉侧栏侧拉效果

tips:  实现原理:   1.  了解整个ui层次组成, 主视图控制器是一个viewcontroller嵌入的一个navicontroller. 为了使它能整体移动缩放(包括tabbar), ...
  • cq361106306
  • cq361106306
  • 2015年11月27日 20:10
  • 4660

iOS开发侧边栏

突然间,在智能手机上,一种界面设计已经风靡全球,这就是侧边栏,不管是iOS还是Android,程序员总喜欢加入这个设计,以期让用户获得更好的体验(吐槽下侧边栏已经到了滥用的地步)。   实际上侧边栏的...
  • Duchch
  • Duchch
  • 2016年01月08日 18:04
  • 1114

iOS侧拉栏抽屉效果Demo

项目研发过程中...常用的效果---侧拉栏抽屉效果...方便开发者使用
  • yjf123546
  • yjf123546
  • 2014年10月31日 09:10
  • 3647

仿QQ侧滑菜单效果

之前使用过SlideMenu,感觉是一个不错的UI交互方式,在最新的QQ6.1里看到最新的侧滑菜单,滑动主屏幕菜单才显示出来,因此就参考SlideMenu模拟了一个侧滑菜单,同时实现了底部设置按钮的点...
  • TOYOTA11
  • TOYOTA11
  • 2016年01月05日 08:17
  • 1668

iOS自定义tabBar手势侧滑返回(仿系统)

iOS自定义tabBar手势侧滑返回(仿系统) 当我们自己创建了一个自定义的tabBar,通过push跳转页面的时候,会发现tabBar没有像我们所希望的那样隐藏起来。 然后,我们通过hide来隐藏我...
  • u010255464
  • u010255464
  • 2015年11月19日 18:06
  • 1081
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:iOS 两种方法实现左右滑动出现侧边菜单栏 slide view
举报原因:
原因补充:

(最多只允许输入30个字)