iOS開發之---ECSlidingViewController

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的方法去提高效率和內存的使用。