现在的位置: 首页 > 综合 > 正文

iOS开发之—ECSlidingViewController

2013年10月01日 ⁄ 综合 ⁄ 共 3622字 ⁄ 字号 评论关闭

ECSlidingViewController这个也是一个挺著名的托管在Github上的开源项目。目前这个项目的主要灵感还是来来源于Path2.0和Facebook在iPhone上的应用。

Github上Project的URL是:https://github.com/edgecase/ECSlidingViewController

源码的下载地址:https://github.com/edgecase/ECSlidingViewController/zipball/master

OK,Facebook国内被墙,咱就下个Path用用,这个App还是蛮酷的。也是一个社交类的应用,现在社交真是泛滥,各种圈子,找朋友一窝而上,各种app都开始有圈子找朋友的需求。从QQ火爆的聊天,到现在的潜水不语,强关系的应用,有时候也不简单就一定会有很长的生命周期,有时候,距离产生美么。说了很多废话,下面先简单介绍一下ECSlidingViewController。

简而言之,ECSlidingViewController是一个iOS中一个ViewController的容器,这个将其中的子ViewController分成了二个层。二层view controller滑动,上面的不完全滑出,显示出后面的view controller。
一些feature(从github上翻译过来,可能存在不准确的地方):
1.任何一个UIView上的横向滑动的手势都能移动Top view,这个有点像navigation bar或者就是一个top view。
2.可配置的停留位置,也就是说,top view还存留在可视界面的宽度是可以定制的。当然这个,并且是可以根据你旋转情况自动调整的。
3.Top view下面的view的大小和layout应该并不是严格要求的。
4.子View可以随时灵活变化。
5.这个容器的子viewcontroller可以是UIViewController的子类,UINavigationController这样的都可以被承载在这个容器中。
当然使用这个控件也是有要求的:iOS5和ARC。

源码下载下来的是一个使用ECSlidingController的Demo程序,其实你要用这个框架就4个文件:ECSlidingViewController.h/m,UIImage+ImageWithUIView.h/m。

简单介绍一下这四个文件:

1.ECSlidingViewController这个二个文件中,最主要的就是我们上面说的那个ViewController容器类,这二个文件中,还有一个对UIViewController的Extension,名为:SlidingViewExtension,还提供了一个instance method,叫:SlidingViewExtension。

2.UIImage+ImageWithUIView.h/m这二个文件,就简单一些了,他们就是一个对于UIView的扩展,提供了一个叫:ImageWithUIView的extension,这个扩展里面有一个方法,是将UIView转化成UIImage,其实简单来说,就是提供了一个ScreenShot的方法。头文件中的函数声明为:

+ (UIImage *)imageWithUIView:(UIView *)view;

ECSlidingViewController这个类中有很多属性,但是无非都是标识,Controller容器里面Controller的ECLeft或者ECRight的层次顺序。方法也都是类似的,我们抽取其中一个函数进行一下说明:

- (void)anchorTopViewTo:(ECSide)side animations:(void (^)())animations onComplete:(void (^)())complete

这个函数其实就是这个框架的,滑动动画的核心函数。可以看到这个函数有三个参数,第一个标识动画移动的方向,第二个(animation)和第三个(onComplete),这个二个参数可以为空的。可能看到这个函数的参数会觉得很奇怪,可能这个语法平时用的不多,animations和complete都是一个叫做Block
Object的参数。也就是说,这个函数的位置可以填写一个函数实现,其实某种程度上有些像是C里面的函数指针。Block Object介绍的URL:https://developer.apple.com/library/ios/#documentation/General/Conceptual/DevPedia-CocoaCore/Block.html下面是这个函数的全部实现:

- (void)anchorTopViewTo:(ECSide)side animations:(void (^)())animations onComplete:(void (^)())complete
{
  CGFloat newCenter = self.topView.center.x;
  
  if (side == ECLeft) {
    newCenter = self.anchorLeftTopViewCenter;
  } else if (side == ECRight) {
    newCenter = self.anchorRightTopViewCenter;
  }
  
  [self topViewHorizontalCenterWillChange:newCenter];
  
  [UIView animateWithDuration:0.25f animations:^{
    if (animations) {
      animations();
    }
    [self updateTopViewHorizontalCenter:newCenter];
  } completion:^(BOOL finished){
    if (_resetStrategy & ECPanning) {
      self.panGesture.enabled = YES;
    } else {
      self.panGesture.enabled = NO;
    }
    if (complete) {
      complete();
    }
    _topViewIsOffScreen = NO;
    [self addTopViewSnapshot];
    dispatch_async(dispatch_get_main_queue(), ^{
      NSString *key = (side == ECLeft) ? ECSlidingViewTopDidAnchorLeft : ECSlidingViewTopDidAnchorRight;
      [[NSNotificationCenter defaultCenter] postNotificationName:key object:self userInfo:nil];
    });
  }];
}




其实看这个函数好像很多的样子,其实主要就二部分:

CGFloat newCenter = self.topView.center.x;
  
  if (side == ECLeft) {
    newCenter = self.anchorLeftTopViewCenter;
  } else if (side == ECRight) {
    newCenter = self.anchorRightTopViewCenter;
  }
  
  [self topViewHorizontalCenterWillChange:newCenter];

和一个函数调用:

animateWithDuration:animations:completion

第一部分的作用很简单,标识了二个图层,Center的变化。

第二个部分就是展示这个动画。

同样可以看到这个函数,

+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion

这个函数是UIView类里面的一个Class Method。其中animations不能为空。其实这个函数的调用就是这个框架动画的核心。

例如下面的代码:

- (IBAction)buttonpress:(id)sender 
{
    CGPoint newcenter;
    newcenter.x = 300;
    newcenter.y = 100;
    
    
    [UIView animateWithDuration:0.25f
                     animations:^{testimage.center = newcenter; }
                     completion:NULL];
}

实现的效果就是点击Button后,图片进行了一个位置的移动。效果图:

OK,这个框架介绍基本就完了。

其实这个框架最帅的地方就是:动画的效果将几个UIViewController很好的联系起来,还有一个就是巧妙的用了ScreenShot的方法去提高效率和内存的使用。

 

抱歉!评论已关闭.