`

iPhone实现QQ等app中右拖动屏幕返回上一层视图切换的效果(继承UINavigationController)

    博客分类:
  • ios
 
阅读更多

实现腾讯qq,新浪微博,网易等app中右拖动返回上一层的效果demo。

首先看一下效果图:

       


 首先要理解UIWindow,UIWindow对象是所有UIView的根,管理和协调的应用程序的显示
 UIWindow类是UIView的子类,可以看作是特殊的UIView。
 一般应用程序只有一个UIWindow对象,即使有多个UIWindow对象,也只有一个UIWindow可以接受到用户的触屏事件。 

 

  1. //window窗口  
  2. #define WINDOW  [[UIApplication sharedApplication]keyWindow]  

 

 

第一步:要在UIView上添加一个pan拖动的手势,并添加处发方法handlePanGesture;

 

  1. //拖动手势  
  2.     UIPanGestureRecognizer *panGesture=[[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(handlePanGesture:)];  
  3.     //添加手势  
  4.     [self.view addGestureRecognizer:panGesture];  

 

第二步:handlePanGesture方法中首先判断是不是顶级视图,是return,如果不是需要返回上一层;

首先定义所需变量:

 

  1. @interface MyNavigationViewController ()  
  2. {  
  3.     CGPoint startTouch;//拖动时的开始坐标  
  4.     BOOL isMoving;//是否在拖动中  
  5.     UIView *blackMask;//那层黑面罩  
  6.       
  7.     UIImageView *lastScreenShotView;//截图  
  8.   
  9. }  
  10. @property (nonatomic,retain) UIView *backgroundView;//背景  
  11. @property (nonatomic,retain) NSMutableArray *screenShotsList;//存截图的数组  
  12.   
  13.   
  14. @end  

 

然后是handlePanGesture方法处理:

 

  1. //拖动手势  
  2. -(IBAction)handlePanGesture:(UIGestureRecognizer*)sender{  
  3.   
  4.     //如果是顶级viewcontroller,结束  
  5.     if (self.viewControllers.count <= 1) return;  
  6.   
  7.     //得到触摸中在window上拖动的过程中的xy坐标  
  8.     CGPoint translation=[sender locationInView:WINDOW];  
  9.     //状态结束,保存数据  
  10.     if(sender.state == UIGestureRecognizerStateEnded){  
  11.         NSLog(@"结束%f,%f",translation.x,translation.y);  
  12.         isMoving = NO;  
  13.   
  14.         self.backgroundView.hidden = NO;  
  15.         //如果结束坐标大于开始坐标50像素就动画效果移动  
  16.         if (translation.x - startTouch.x > 50) {  
  17.             [UIView animateWithDuration:0.3 animations:^{  
  18.                 //动画效果,移动  
  19.                 [self moveViewWithX:320];  
  20.             } completion:^(BOOL finished) {  
  21.                 //返回上一层  
  22.                 [self popViewControllerAnimated:NO];  
  23.                 //并且还原坐标  
  24.                 CGRect frame = self.view.frame;  
  25.                 frame.origin.x = 0;  
  26.                 self.view.frame = frame;  
  27.             }];  
  28.               
  29.         }else{  
  30.             //不大于50时就移动原位  
  31.             [UIView animateWithDuration:0.3 animations:^{  
  32.                 //动画效果  
  33.                 [self moveViewWithX:0];  
  34.             } completion:^(BOOL finished) {  
  35.                 //背景隐藏  
  36.                 self.backgroundView.hidden = YES;  
  37.             }];  
  38.         }  
  39.         return;  
  40.           
  41.     }else if(sender.state == UIGestureRecognizerStateBegan){  
  42.         NSLog(@"开始%f,%f",translation.x,translation.y);  
  43.         //开始坐标  
  44.         startTouch = translation;  
  45.         //是否开始移动  
  46.         isMoving = YES;  
  47.         if (!self.backgroundView)  
  48.         {  
  49.             //添加背景  
  50.             CGRect frame = self.view.frame;  
  51.             self.backgroundView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, frame.size.width , frame.size.height)];  
  52.             //把backgroundView插入到Window视图上,并below低于self.view层  
  53.             [WINDOW insertSubview:self.backgroundView belowSubview:self.view];  
  54.               
  55.             //在backgroundView添加黑色的面罩  
  56.             blackMask = [[UIView alloc]initWithFrame:CGRectMake(0, 0, frame.size.width , frame.size.height)];  
  57.             blackMask.backgroundColor = [UIColor blackColor];  
  58.             [self.backgroundView addSubview:blackMask];  
  59.         }  
  60.         self.backgroundView.hidden = NO;  
  61.   
  62.         if (lastScreenShotView) [lastScreenShotView removeFromSuperview];  
  63.           
  64.         //数组中最后截图  
  65.         UIImage *lastScreenShot = [self.screenShotsList lastObject];  
  66.         //并把截图插入到backgroundView上,并黑色的背景下面  
  67.         lastScreenShotView = [[UIImageView alloc]initWithImage:lastScreenShot];  
  68.         [self.backgroundView insertSubview:lastScreenShotView belowSubview:blackMask];  
  69.           
  70.     }  
  71.       
  72.     if (isMoving) {  
  73.         [self moveViewWithX:translation.x - startTouch.x];  
  74.   
  75.     }  
  76. }  

 

 

以上代码实现的是在UIWindow上放一个屏幕大小的UIView *backgroundView,并且这个UIView要插入到UIWindow视图里当前UIVIew的下面,这个方法是[WINDOW insertSubview:self.backgroundView belowSubview:self.view];
然后在backgroundView上要两个view:

UIView *blackMask;//那层黑面罩
UIImageView *lastScreenShotView;//截屏图

在拖动中不断的改变blackMask透明值,改变lastScreenShotView缩放大小:

 

  1. - (void)moveViewWithX:(float)x  
  2. {  
  3.       
  4.     NSLog(@"Move to:%f",x);  
  5.     x = x>320?320:x;  
  6.     x = x<0?0:x;  
  7.       
  8.     CGRect frame = self.view.frame;  
  9.     frame.origin.x = x;  
  10.     self.view.frame = frame;  
  11.       
  12.     float scale = (x/6400)+0.95;//缩放大小  
  13.     float alpha = 0.4 - (x/800);//透明值  
  14.       
  15.     //缩放scale  
  16.     lastScreenShotView.transform = CGAffineTransformMakeScale(scale, scale);  
  17.     //背景颜色透明值  
  18.     blackMask.alpha = alpha;  
  19.       
  20. }  

 

 另外要把当前屏转化成图片的方法,UIView转成UIImage

 

  1. //把UIView转化成UIImage,实现截屏  
  2. - (UIImage *)ViewRenderImage  
  3. {  
  4.     //创建基于位图的图形上下文 Creates a bitmap-based graphics context with the specified options.:UIGraphicsBeginImageContextWithOptions(CGSize size, BOOL opaque, CGFloat scale),size大小,opaque是否透明,不透明(YES),scale比例缩放  
  5.     UIGraphicsBeginImageContextWithOptions(self.view.bounds.size, self.view.opaque, 0.0);  
  6.      
  7.     //当前层渲染到上下文  
  8.     [self.view.layer renderInContext:UIGraphicsGetCurrentContext()];  
  9.   
  10.     //上下文形成图片  
  11.     UIImage * img = UIGraphicsGetImageFromCurrentImageContext();  
  12.     //结束并删除当前基于位图的图形上下文。  
  13.     UIGraphicsEndImageContext();  
  14.     //反回图片  
  15.     return img;  
  16. }  

 

第三步:当push的时候,需要把当前图片添加存到数组中;当pop的时候,需要把最后一个图片移除。
 

 

  1. #pragma UINavigationController 覆盖方法  
  2. -(void)pushViewController:(UIViewController *)viewController animated:(BOOL)animated  
  3. {  
  4.     //图像数组中存放一个当前的界面图像,然后再push  
  5.     [self.screenShotsList addObject:[self ViewRenderImage]];  
  6.   
  7.     [super pushViewController:viewController animated:animated];  
  8. }  
  9.   
  10. -(UIViewController *)popViewControllerAnimated:(BOOL)animated  
  11. {  
  12.     //移除最后一个  
  13.     [self.screenShotsList removeLastObject];  
  14.     return [super popViewControllerAnimated:animated];  
  15. }  

 

 

 

Demo下载地址:http://download.csdn.net/detail/rhljiayou/5979139

参考:http://blog.csdn.net/rhljiayou/article/details/10096347

分享到:
评论

相关推荐

    iPhone实现app中右拖动屏幕返回上一层的效果(继承UINavigationController)

    在iOS开发中,提供用户...通过以上步骤,你就可以在你的iPhone应用中实现类似腾讯QQ、新浪微博那样的右滑返回上一层的效果了。这是一个提升用户体验的好方法,但也要注意不要过度使用,以免干扰到其他必要的手势操作。

    iphone 各种视图切换效果

    在iOS开发中,iPhone应用程序的用户体验往往离不开各种视图(View)之间的切换效果。这些效果不仅提升了用户界面的美观度,还能提供更好的交互体验。本文将深入探讨“iPhone各种视图切换效果”,并结合源码分析,...

    iphone视图切换的控制

    本教程将深入探讨如何在iPhone应用中实现视图之间的平滑切换,主要关注`Push`操作,这是一种常见的视图控制器导航方式。 在iOS开发中,我们通常使用`UINavigationController`来管理一系列`UIViewController`实例的...

    iPhone多视图切换

    本教程将专注于使用Objective-C或Swift实现iPhone上的多视图切换,特别是通过窗口(Window)和视图(View)的管理来实现这一功能。我们将探讨以下核心知识点: 1. **UIViewController**:在iOS中,UIViewController...

    视图切换的动画效果

    在iOS开发中,视图切换的动画效果是用户体验的重要组成部分,它可以增强应用的交互性和视觉吸引力。本篇文章将深入探讨如何实现视图切换的动画效果,以及如何通过源码理解和定制这些效果。我们还会借助一个名为`...

    iPhone 开发多视图切换 代码

    本文将深入探讨如何在iPhone应用中实现多视图切换,并提供相关的代码示例。 首先,理解基本的视图(View)和视图控制器(ViewController)概念至关重要。在iOS中,UIView是显示在屏幕上的所有可视元素的基础类,...

    ios应用源码之多种view视图切换效果 2018127

    通过pushViewController:animated:方法,可以将新的视图控制器压入栈顶,实现平滑的过渡效果,用户还可以通过popViewControllerAnimated:方法返回到上一个视图。 2. **UITabBarController**:它是实现底部标签栏...

    按钮切换两个视图

    在iOS应用开发中,"按钮切换两个视图"是一个常见的需求,主要涉及到用户界面交互和视图控制器的管理。在本示例中,我们通过一个按钮实现对两个控制器(视图)之间的切换,允许开发者根据自己的需求进行自定义。下面...

    多种view视图切换效果.zipIOS应用例子源码下载

    - **UIContainerView**: 在Storyboard中,UIContainerView可以嵌套其他UIViewController,提供了一种在单一视图控制器中集成多个子视图控制器的方式,可以实现平滑的过渡效果。 - **addChildViewController:** 和 ...

    IOS应用源码之多种view视图切换效果 .rar

    这个"IOS应用源码之多种view视图切换效果 .rar"压缩包很可能是包含了一系列示例代码,展示了如何在iOS应用中实现不同的View视图切换效果。下面我们将详细探讨iOS中的视图切换技术和相关知识点。 1. **...

    IOS 多视图切换加动画

    综上所述,"IOS 多视图切换加动画"的例子可能涵盖了上述技术,包括使用UINavigationController、UITabBarController、自定义动画效果以及页面滑动切换等。通过深入研究"AndyMultiView"中的代码,开发者可以学习到...

    (0043)-iOS/iPhone/iPAD/iPod源代码-视图切换(View Transition)-Ticker View

    本教程主要探讨的是如何在iOS应用中实现一种独特的视图切换效果,即“Ticker View”,它模仿了Flipboard应用中的翻页效果,使得视图能够从上至下或从下至上折叠,这种效果可以用于页面切换、图片切换以及模拟计时器...

    多种view视图切换效果_IOS应用源码.rar

    这个压缩包“多种view视图切换效果_IOS应用源码.rar”包含了一组实现不同视图切换效果的源代码,对于学习iOS UI设计和动画效果的开发者来说非常有价值。以下是基于这些标签和描述可能涉及的知识点的详细说明: 1. *...

    IOS应用源码——多种view视图切换效果.zip

    此压缩包"IOS应用源码——多种view视图切换效果.zip"提供了一组示例代码,专门针对在iOS应用中如何实现不同View之间的切换效果。这些效果通常用于创建流畅的用户体验,例如在导航、页面滑动或模态显示之间切换。下面...

    IOS切换视图动画

    在iOS开发中,切换视图是用户界面设计中不可或缺的一部分,它为用户提供了一种流畅、直观的导航方式。本文将深入探讨如何实现iOS中的视图切换动画,以及使用源码和工具来优化这一过程。 首先,我们要理解iOS中的...

    iOS开发切换视图示例

    1. 视图(UIView):它是屏幕上的可视化元素,可以包含图像、文本、按钮等。视图负责绘制和处理用户的触摸事件。 2. 视图控制器(UIViewController):它是视图的管理者,负责协调视图之间的交互,提供数据,并处理...

    (0094)-iOS/iPhone/iPAD/iPod源代码-视图切换(View Transition)-Flip Transform View

    本教程主要探讨的是如何实现一种特定的视图切换效果——“Flip Transform View”,它模仿了诸如Flipboard应用中的翻页效果,从上往下或从左往右折叠,带给用户一种动态而直观的视觉体验。这种效果可以广泛应用于页面...

    IOS应用源码——可以用手指左右滑动切换视图的效果demo.zip

    该压缩包文件“IOS应用源码——可以用手指左右滑动切换视图的效果demo.zip”包含了一个iOS应用的源代码示例,主要展示了如何在iOS应用中实现用户可以通过手势左右滑动来切换视图的功能。这一功能在许多现代移动应用...

    IOS应用源码Demo-多种view视图切换效果-毕设学习.zip

    "IOS应用源码Demo-多种view视图切换效果-毕设学习.zip"这个压缩包提供了一些示例代码,帮助学习者理解如何在iOS应用中实现不同视图之间的切换效果,这对于毕业设计或论文编写具有很高的参考价值。以下将详细讲解这些...

Global site tag (gtag.js) - Google Analytics