iOS页面右滑返回交互实现方案

最新推荐文章于 2021-06-22 18:59:38 发布

Curry_1122

最新推荐文章于 2021-06-22 18:59:38 发布

阅读量1.2w

点赞数

Category: iOS Publish Date: 2013年4月30日 Comments: 9 Views: 1287

undefined undefined undefined undefined undefined undefined undefined undefined

唠叨最近

好久没有写技术日志了，上一篇日志已经是1年前写的了。

不过，我也发现，几乎全部我认识搞技术的同学朋友，毕业之后也没更新Blog了。或许因为工作太忙，也或许当时写技术日志就是为了找工作。

对于我自己来说，上面两个原因都有，另外还有一个原因就是，加入百度不久之后就开始搞iOS开发，在很大一段时间内，基本是处于学习阶段，基础知识一般都是信息量大但是难度低，动不动就写基础的学习笔记会减低学习进度，且意义不大。

现在，我已经在iOS领域学习了大半年，也参与过4+个项目开发，可以算入门吧。

年头的时候自己买了一年个人开发者帐号，把一些平时不敢用公司开发者帐号随便弄的东西都弄了一遍，也算完善iOS知识体系；更重要的时，从此灵感不断，想出了很多自己想做的小产品，小组件，小工具之类的。

所以，我也决定重新写技术日志，记录一些想法/灵感/经验，同时，也顺带锻炼一些文字表达能力。

之后，估计前端技术相关的日志会相对较少，主要以iOS技术为主。想了好久，还是决定第一篇日志就写一下最近开发的一个小组件，估计内容比较浅显且简短。

MultiLayerNavigation

缘由

前段时间更新了网易客户端和新浪微博客户端，发现它们都有一种很好的交互，就是又右滑页面，随当前页面滑动离开屏幕，上一页联动地由远及近地展现出来。你可以点击这里或者通过下面视频看演示效果动画。

然后，我在想，如何实现这种效果？如何做成一个通用的组件？

思路

说到通用，我就想到这个交互功能组件的实现方式要不集成在UINavigationController中，要不在其上面扩展；然后我最终的决定是通过子类化方法来扩展实现这个方法。主要原因是，子类可以重写push/pop方法以及touch...系列方法，这样开发者只需要用这个子类(MLNavigationController)代替UINavigationController或者继承自它，即可。最大限度地简化了接口且解耦；

至于实现，我一开始想到就办法也很简单，不外乎就是把UINavigationController里面的viewController们的view与触摸点位置联动地实现一些移动缩放动画而已。

但是，这时候我想到一个问题，UINavigationController中的navigationBar是共用的，但是滑动途中，两个页面都需要展示出各自的bar，难道在滑动途中还要把那个navigationBar复制出来，但是复制出来带来的问题又有许多……

于是我分别研究了一下网易和新浪客户端的交互效果，发现它们是有一些区别的。

比较明显的一个地方就是，新浪微博的navigationBar是公共的（应该是属于UINavigationController的），网易新闻的是独立的（应该属于各个页面的）；这其实很容易看出来，点击返回的时候，看navigationBar跟随页面滑动还是只是内容渐隐渐显。

独立的navigationBar明显是不存在这个问题的，但是新浪微博是navigationBar是共用的，却依然能完好地完成目标交互。

这时候，我就想到的一个比复制view更好办法了：复制页面快照。

实现

按照上面的思路，实现这个交互应该没有什么问题了。

至于我的实现是这样的：

创建一个UINavigationController的子类，每次在push的时候，先把当前页面视图快照截取一下，把快照塞到快照堆栈里头，然后pop的时候把快照拿出来。这样可以保证快照栈和viewController栈保持一致。
当用户开始往右拉动页面的时候，把上一个页面的快照拿出来，创建成一个背景view，然后当前页面和上一页面的远近大小都会联动展示。
当用户拉动到大于某个数值的时候，页面会自动右滑消失；而上一级页面则展现；然后我们把消失的页面快照也pop出来；
当用户开始拉到小于某个数值的时候，页面会回复原来位置和状态，快照栈不需要改变。

代码

懒得解释了，直接看comment吧，原理很简单。

 
   001//
 
   002//  MLNavigationController.m
 
   003//  MultiLayerNavigation
 
   004//
 
   005//  Created by Feather Chan on 13-4-12.
 
   006//  Copyright (c) 2013年 Feather Chan. All rights reserved.
 
   007//
 
   008 
 
   009#define KEY_WINDOW  [[UIApplication sharedApplication]keyWindow]
 
   010 
 
   011@interface  MLNavigationController ()
 
   012{
 
   013    CGPoint startTouch;
 
   014     
 
   015    UIImageView *lastScreenShotView;
 
   016    UIView *blackMask;
 
   017}
 
   018 
 
   019@property  (nonatomic,retain) UIView *backgroundView;
 
   020@property  (nonatomic,retain) NSMutableArray  *screenShotsList;
 
   021 
 
   022@property  (nonatomic,assign) BOOL isMoving;
 
   023 
 
   024@end
 
   025 
 
   026@implementation  MLNavigationController
 
   027 
 
   028- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
 
   029{
 
   030    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
 
   031    if (self) {
 
   032        // Custom initialization
 
   033         
 
   034        self.screenShotsList = [[[NSMutableArray alloc]initWithCapacity:2]autorelease];
 
   035        self.canDragBack = YES;
 
   036         
 
   037    }
 
   038    return self;
 
   039}
 
   040 
 
   041- (void)dealloc
 
   042{
 
   043    self.screenShotsList = nil;
 
   044     
 
   045    [self.backgroundView removeFromSuperview];
 
   046    self.backgroundView = nil;
 
   047     
 
   048     
 
   049    [super dealloc];
 
   050}
 
   051 
 
   052- (void)viewDidLoad
 
   053{
 
   054    [super viewDidLoad];
 
   055    // Do any additional setup after loading the view.
 
   056     
 
   057    UIImageView *shadowImageView = [[[UIImageView alloc]initWithImage:[UIImage imageNamed:@"leftside_shadow_bg"]]autorelease];
 
   058    shadowImageView.frame = CGRectMake(-10, 0, 10, self.view.frame.size.height);
 
   059    [self.view addSubview:shadowImageView];
 
   060     
 
   061    UIPanGestureRecognizer *recognizer = [[[UIPanGestureRecognizer alloc]initWithTarget:self
 
   062                                                                                 action:@selector(paningGestureReceive:)]autorelease];
 
   063    [recognizer delaysTouchesBegan];
 
   064    [self.view addGestureRecognizer:recognizer];
 
   065}
 
   066 
 
   067// override the push method
 
   068- (void)pushViewController:(UIViewController *)viewController animated:(BOOL)animated
 
   069{
 
   070    [self.screenShotsList addObject:[self capture]];
 
   071     
 
   072    [super pushViewController:viewController animated:animated];
 
   073}
 
   074 
 
   075// override the pop method
 
   076- (UIViewController *)popViewControllerAnimated:(BOOL)animated
 
   077{
 
   078    [self.screenShotsList removeLastObject];
 
   079     
 
   080    return [super  popViewControllerAnimated:animated];
 
   081}
 
   082 
 
   083#pragma mark - Utility Methods -
 
   084 
 
   085// get the current view screen shot
 
   086- (UIImage *)capture
 
   087{
 
   088    UIGraphicsBeginImageContextWithOptions(self.view.bounds.size, self.view.opaque, 0.0);
 
   089    [self.view.layer renderInContext:UIGraphicsGetCurrentContext()];
 
   090     
 
   091    UIImage * img = UIGraphicsGetImageFromCurrentImageContext();
 
   092     
 
   093    UIGraphicsEndImageContext();
 
   094     
 
   095    return img;
 
   096}
 
   097 
 
   098// set lastScreenShotView 's position and alpha when paning
 
   099- (void)moveViewWithX:(float)x
 
   100{
 
   101     
 
   102    NSLog(@"Move to:%f",x);
 
   103    x = x>320?320:x;
 
   104    x = x<0?0:x;
 
   105     
 
   106    CGRect frame = self.view.frame;
 
   107    frame.origin.x = x;
 
   108    self.view.frame = frame;
 
   109     
 
   110    float scale = (x/6400)+0.95;
 
   111    float alpha = 0.4 - (x/800);
 
   112 
 
   113    lastScreenShotView.transform = CGAffineTransformMakeScale(scale, scale);
 
   114    blackMask.alpha = alpha;
 
   115     
 
   116}
 
   117 
 
   118#pragma mark - Gesture Recognizer -
 
   119 
 
   120- (void)paningGestureReceive:(UIPanGestureRecognizer *)recoginzer
 
   121{
 
   122    // If the viewControllers has only one vc or disable the interaction, then return.
 
   123    if (self.viewControllers.count <= 1 || !self.canDragBack) return;
 
   124     
 
   125    // we get the touch position by the window's coordinate
 
   126    CGPoint touchPoint = [recoginzer locationInView:KEY_WINDOW];
 
   127     
 
   128    // begin paning, show the backgroundView(last screenshot),if not exist, create it.
 
   129    if (recoginzer.state == UIGestureRecognizerStateBegan) {
 
   130         
 
   131        _isMoving = YES;
 
   132        startTouch = touchPoint;
 
   133         
 
   134        if (!self.backgroundView)
 
   135        {
 
   136            CGRect frame = self.view.frame;
 
   137             
 
   138            self.backgroundView = [[[UIView alloc]initWithFrame:CGRectMake(0, 0, frame.size.width , frame.size.height)]autorelease];
 
   139            [self.view.superview insertSubview:self.backgroundView belowSubview:self.view];
 
   140             
 
   141            blackMask = [[[UIView alloc]initWithFrame:CGRectMake(0, 0, frame.size.width , frame.size.height)]autorelease];
 
   142            blackMask.backgroundColor = [UIColor blackColor];
 
   143            [self.backgroundView addSubview:blackMask];
 
   144        }
 
   145         
 
   146        self.backgroundView.hidden = NO;
 
   147         
 
   148        if (lastScreenShotView) [lastScreenShotView removeFromSuperview];
 
   149         
 
   150        UIImage *lastScreenShot = [self.screenShotsList lastObject];
 
   151        lastScreenShotView = [[[UIImageView alloc]initWithImage:lastScreenShot]autorelease];
 
   152        [self.backgroundView insertSubview:lastScreenShotView belowSubview:blackMask];
 
   153         
 
   154        //End paning, always check that if it should move right or move left automatically
 
   155    }else if (recoginzer.state == UIGestureRecognizerStateEnded){
 
   156         
 
   157        if (touchPoint.x - startTouch.x > 50)
 
   158        {
 
   159            [UIView animateWithDuration:0.3 animations:^{
 
   160                [self moveViewWithX:320];
 
   161            } completion:^(BOOL finished) {
 
   162                 
 
   163                [self popViewControllerAnimated:NO];
 
   164                CGRect frame = self.view.frame;
 
   165                frame.origin.x = 0;
 
   166                self.view.frame = frame;
 
   167                 
 
   168                _isMoving = NO;
 
   169            }];
 
   170        }
 
   171        else
 
   172        {
 
   173            [UIView animateWithDuration:0.3 animations:^{
 
   174                [self moveViewWithX:0];
 
   175            } completion:^(BOOL finished) {
 
   176                _isMoving = NO;
 
   177                self.backgroundView.hidden = YES;
 
   178            }];
 
   179             
 
   180        }
 
   181        return;
 
   182         
 
   183        // cancal panning, alway move to left side automatically
 
   184    }else if (recoginzer.state == UIGestureRecognizerStateCancelled){
 
   185         
 
   186        [UIView animateWithDuration:0.3 animations:^{
 
   187            [self moveViewWithX:0];
 
   188        } completion:^(BOOL finished) {
 
   189            _isMoving = NO;
 
   190            self.backgroundView.hidden = YES;
 
   191        }];
 
   192         
 
   193        return;
 
   194    }
 
   195     
 
   196    // it keeps move with touch
 
   197    if (_isMoving) {
 
   198        [self moveViewWithX:touchPoint.x - startTouch.x];
 
   199    }
 
   200}
 
   201 
 
   202@end

问题

1.未解决webview不响应手势的问题；

这个问题是个经典问题：webview不响应手势。网上有很多办法，能work的貌似就一个：重写UIWindow的sentEvent方法，首先截取到窗口事件，然后再去分析一下是否是在webview上的手势，是的话，把事件首先抛给MLNavigationController，然后按照里面的逻辑去处理。之所以没有把这个solution写进组件，原因有:1、需子类化UIWindow，侵入性太强了；2、webview之所以不响应手势，原因是webview展现网页内容，往往需要横向滑动，这个交互动作如果两者都响应，就会发生冲突，估计UIScrollView的横向滑动也会有这个问题（未测）。

2.未解决当用户直接setViewController的问题。

改变UINavigationController的viewControllers堆栈的办法有三类：push/pop/setViewControllers，由于我们需要在新页面切入前，给旧页面来一张快照，然后pop之后就会把快照拿掉。快照堆栈的和viewControllers的同步，是在push/pop里面实现的，但setViewControllers是可以随意设置堆栈的，这使得我们要同步快照会变得复杂很多，我现在也甚至怀疑如果一个只初始化一个Controllers放进堆栈的非顶层，页面是否会被绘制？(即loadView方法和viewDidLoad方法会被被执行？)这个后面我验证一下，不过，相信这个问题不难解决。

下载

请到Github下载最新的代码

Curry_1122

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
2
评论
iOS页面右滑返回交互实现方案

Category: iOS Publish Date: 2013年4月30日 Comments:9 Views: 1287undefinedundefinedundefinedundefinedundefinedundefinedundefinedundefined唠叨最近好久没有写技术日志了，上一篇日志已经是1年前写的了。不过，我也发现，几乎全部我认识搞技
复制链接

扫一扫