【转】 iOS 两种方法实现左右滑动出现侧边菜单栏 slide view
原文: 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对应的视图(即第一个)。
下面看看代码:
- - (void)viewDidLoad
- {
- [super viewDidLoad];
- // Do any additional setup after loading the view, typically from a nib.
- UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"MainStoryboard" bundle:nil];
- CenterViewController *centerController = (CenterViewController *)[storyboard instantiateViewControllerWithIdentifier:@"CenterViewController"];
- LeftViewController *leftController = (LeftViewController *)[storyboard instantiateViewControllerWithIdentifier:@"LeftViewController"];
- RightViewController *rightController = (RightViewController *)[storyboard instantiateViewControllerWithIdentifier:@"RightViewController"];
- self.containerController = [[IIViewDeckController alloc] initWithCenterViewController:centerController leftViewController:leftController rightViewController:rightController];
- self.containerController.leftSize = 100;
- self.containerController.rightSize = 200;
- self.containerController.view.frame = self.view.bounds;
- [self.view addSubview:self.containerController.view];
- }
这里创建一个IIViewDeckController实例,然后把这个实例对象的视图作为子视图添加到这个view中,这样就实现了跳转到我们需要的IIViewDeckController那里了,让我们创建的IIViewDeckController实例处理左右滑动出现侧边栏的任务了。
(2 )方法②
这里再介绍一种实现方式:让最左边这个视图继承自 IIViewDeckController然后在实现文件添加这个方法:
- - (id)initWithCoder:(NSCoder *)aDecoder
- {
- self = [super initWithCoder:aDecoder];
- UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"MainStoryboard" bundle:nil];
- self = [super initWithCenterViewController:[storyboard instantiateViewControllerWithIdentifier:@"CenterViewController"]
- leftViewController:[storyboard instantiateViewControllerWithIdentifier:@"LeftViewController"]
- rightViewController:[storyboard instantiateViewControllerWithIdentifier:@"RightViewController"]];
- if (self) {
- // Add any extra init code here
- }
- return self;
- }
实现的效果是:
实现方式二(不使用第三方库):
下面简单说说这种滑动出现侧边栏是怎么回事,明显这就是一个视图层叠,那么简单点的话,就是往一个视图里面添加几个视图,然后添加swipe手势,左右滑动时,响应事件处理,在事件处理中让最上面的视图的位置发生变化,也就是视图移动,这样就可以显示出下面的视图,这样大致就可以解决了。
这里同样也是使用storyboard。而且storyboard里面的内容和上面的一样(其实解决方式借鉴了上面的方法①)。
首先分别创建对应的中间,左边,右边视图的controller(tableview controller)。
然后创建三个对应的属性
- @property(nonatomic, strong) MainViewController *centerController;
- @property(nonatomic, strong) RightViewController *rightController;
- @property(nonatomic, strong) LeftViewController *leftController;
接着作为subview添加到视图中并添加swipe手势。处理的代码如下:
- - (void)viewDidLoad
- {
- [super viewDidLoad];
- // Do any additional setup after loading the view.
- UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"MainStoryboard" bundle:nil];
- _centerController = (MainViewController *)[storyboard instantiateViewControllerWithIdentifier:@"MainViewController"];
- _leftController = (LeftViewController *)[storyboard instantiateViewControllerWithIdentifier:@"LeftViewController"];
- _rightController = (RightViewController *)[storyboard instantiateViewControllerWithIdentifier:@"RightViewController"];
- [self.view addSubview:_centerController.view];
- [_centerController.view setTag:1];
- [_centerController.view setFrame:self.view.bounds];
- [self.view addSubview:_leftController.view];
- [_leftController.view setTag:2];
- [_leftController.view setFrame:self.view.bounds];
- [self.view addSubview:_rightController.view];
- [_rightController.view setTag:3];
- [_rightController.view setFrame:self.view.bounds];
- [self.view bringSubviewToFront:_centerController.view];
- //add swipe gesture
- UISwipeGestureRecognizer *swipeGestureRight = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(swipeGesture:)];
- [swipeGestureRight setDirection:UISwipeGestureRecognizerDirectionRight];
- [_centerController.view addGestureRecognizer:swipeGestureRight];
- UISwipeGestureRecognizer *swipeGestureLeft = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(swipeGesture:)];
- [swipeGestureLeft setDirection:UISwipeGestureRecognizerDirectionLeft];
- [_centerController.view addGestureRecognizer:swipeGestureLeft];
- }
- -(void) swipeGesture:(UISwipeGestureRecognizer *)swipeGestureRecognizer {
- CALayer *layer = [_centerController.view layer];
- layer.shadowColor = [UIColor blackColor].CGColor;
- layer.shadowOffset = CGSizeMake(1, 1);
- layer.shadowOpacity = 1;
- layer.shadowRadius = 20.0;
- if (swipeGestureRecognizer.direction == UISwipeGestureRecognizerDirectionRight) {
- [_leftController.view setHidden:NO];
- [_rightController.view setHidden:YES];
- [UIView beginAnimations:nil context:nil];
- [UIView setAnimationCurve:UIViewAnimationCurveEaseIn];
- if (_centerController.view.frame.origin.x == self.view.frame.origin.x || _centerController.view.frame.origin.x == -100) {
- [_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)];
- }
- [UIView commitAnimations];
- }
- if (swipeGestureRecognizer.direction == UISwipeGestureRecognizerDirectionLeft) {
- [_rightController.view setHidden:NO];
- [_leftController.view setHidden:YES];
- [UIView beginAnimations:nil context:nil];
- [UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
- if (_centerController.view.frame.origin.x == self.view.frame.origin.x || _centerController.view.frame.origin.x == 100) {
- [_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)];
- }
- [UIView commitAnimations];
- }
- }
下面稍稍解说一下在swipe手势的事件处理中的一些处理:
①为center视图添加阴影边框
②这里swipe手势响应的是左右滑动,右滑动时是要出现左视图,所以要隐藏右视图,同理就知道如何处理左滑动了。
③cente 视图移动时添加了动画
说明:我这样处理大致还是可以实现这种效果的。下面附上一张在我应用在sina weibo demo中的效果图:
还不错吧!
下面进行一点点补充:上面我们实现的都是通过swipe滑动最上层的view来实现左右侧移,那么这样就太局限了,那么如何实现例如点击下面view中的LEFT按键来移动上层的view呢?其实也很简单,我这里的处理是用notification通知,就是在button那里发送一个通知,在上层的view监听。当然呢,也可以用delegate和kvo实现,但是这个。。。暂时没有研究,就算了,有空再了解一下。
下面附加一下代码:
在下面那层view的controller添加这个方法:
- - (IBAction)BackButton:(id)sender {
- NSString *myString = @"back";
- [[NSNotificationCenter defaultCenter] postNotificationName: @"back" object:myString userInfo: nil];
- }
在上面这个层的view的controller添加下面的代码:
- [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(BackFunc:) name: @"back" object:nil];
- id) BackFunc:(NSNotification*) notification {
- NSString *get = [notification object];
- if ([get isEqualToString:@"back"]) {
- [UIView beginAnimations:nil context:nil];
- [UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
- [_centerController.view setFrame:CGRectMake(0, _centerController.view.frame.origin.y, _centerController.view.frame.size.width, _centerController.view.frame.size.height)];
- [UIView commitAnimations];
- }
这样就ok啦啦!
【转】 iOS 两种方法实现左右滑动出现侧边菜单栏 slide view的更多相关文章
- iOS 两种方法实现左右滑动出现侧边菜单栏 slide view
现在很多的APP中都有slide view,左右滑动出现侧边菜单栏的功能,Weico这个应用就有. 网上有很多第三方的类库实现了这种效果,其实自己代码写的话也是很简单的,下面我将介绍两种方法实现s ...
- Cisco设备IOS的恢复方法 两种方法
如果不小心把Router或者Switch的IOS删除了,特别是Flash中的IOS和ROM中的Mini IOS都没有了的话,连启动都不行的话,有什么方法恢复它呢?答案是方法不只一种,而是两种.其实是我 ...
- ios开发——实用技术OC篇》倒计时实现的两种方法
倒计时实现的两种方法 timeFireMethod函数,timeFireMethod进行倒计时的一些操作,完成时把timer给invalidate掉就ok了,代码如下: secondsCountDow ...
- iOS 关于退出键盘两种方法和避免遮挡
退出键盘: 方法1:不使用代理,直接使用: -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { [self.textFi ...
- iOS 两种不同的图片无限轮播
代码地址如下:http://www.demodashi.com/demo/11608.html 前记 其实想写这个关于无限轮播的记录已经很久很久了,只是没什么时间,这只是一个借口,正如:时间就像海绵, ...
- UIImage加载图片的两种方法区别
Apple官方的文档为生成一个UIImage对象提供了两种方法加载图片: 1. imageNamed,其参数为图片的名字: 2. imageWithContentsOfFile,其参数也是图片文件的路 ...
- JAVA 集合 List 分组的两种方法
CSDN日报20170219--<程序员的沟通之痛> [技术直播]揭开人工智能神秘的面纱 程序员1月书讯 云端应用征文大赛,秀绝招,赢无人机! JAVA 集合 List 分组的两种方法 2 ...
- windows下获取IP地址的两种方法
windows下获取IP地址的两种方法: 一种可以获取IPv4和IPv6,但是需要WSAStartup: 一种只能取到IPv4,但是不需要WSAStartup: 如下: 方法一:(可以获取IPv4和I ...
- android 之 启动画面的两种方法
现在,当我们打开任意的一个app时,其中的大部分都会显示一个启动界面,展示本公司的logo和当前的版本,有的则直接把广告放到了上面.启动画面的可以分为两种设置方式:一种是两个Activity实现,和一 ...
随机推荐
- codeforces C. Valera and Tubes
http://codeforces.com/contest/441/problem/C 题意:有n×m个方格,然后把这些方格分成k部分,每个部分内的方格的坐标满足|xi - xi + 1| + |yi ...
- Struts2拦截器总结<转>
由于项目中在登录跳转到其他应用程序模块的时候有用到拦截器,因此查看了一下相关资料. 原文地址:http://blog.csdn.net/sendfeng/article/details/4248120 ...
- Subsets —— LeetCode
Given a set of distinct integers, nums, return all possible subsets. Note: Elements in a subset must ...
- hdu 4602 Partition 数学(组合-隔板法)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4602 我们可以特判出n<= k的情况. 对于1<= k<n,我们可以等效为n个点排成 ...
- eclipse下开发简单的Web Service
service部分 在eclipse下新建一个动态web项目 在项目中新建一个service类 编写SayHello类的代码 package org.sunny.service; //包不要引用错了 ...
- merge into 语法缺陷
merge into 语法缺陷? test001
- Jquery中的事件绑定$("#btn").bind("click",function(){ })
Jquery中的事件绑定:$("#btn").bind("click",function(){ }) 由于每次都这么调用太麻烦,所以jquery就用$(&qu ...
- DM8168 坎坷硬件之路(DDR3)
新做了8168板,调试DDR3的时候EMIF0遇到了个别数据位出错的问题 DDR3 128MB*8=1GB 我为了測试DDR3的所有空间,把地址存到DDR3中,就是*pdata++=(Uint32)p ...
- 用 Java 技术创建 RESTful Web 服务--转载
简介 JAX-RS (JSR-311) 是为 Java EE 环境下的 RESTful 服务能力提供的一种规范.它能提供对传统的基于 SOAP 的 Web 服务的一种可行替代. 在本文中,了解 JAX ...
- RSA体系 c++/java相互进行加签验签--转
在web开发中,采用RSA公钥密钥体系自制ukey,文件证书登陆时,普遍的做法为:在浏览器端采用c++ activex控件,使用 c++的第三库openssl进行RAS加签操作,在服务器端采用java ...