教你如何制作自定义容器类(持续更新中)

在最近的项目中，需要一个类似今日头条的可翻页容器类。于是在网上找了各种资料，经过一个星期业余的时间，终于搞出来了。给自己来点掌声！！！

类结构

容器控制器

转场上下文

转场代理

转场动画控制器

转场交互控制器

先了解一下系统的UINavigationController的转场是什么样子的

c1.png

由上图为一次转场的上下文环境，也就是说转场时上下文可以描述，这一次的转场从哪一个控制器（fromView）转到哪一个控制器（toView）在哪一个父视图（containerview）上进行转场。

获得了以上三个视图，我们就可以大胆滴做动画效果了，只有想不到，没有做不到。

当然，这个动画需要一个动画控制器去控制，上下文只提供了一个转场环境。

交互式转场稍后再说。先把动画控制器做出来。

动画控制器

动画控制器需要满足一个协议<UIViewControllerAnimatedTransitioning>

//返回动画时长
- (NSTimeInterval)transitionDuration:(nullable id <UIViewControllerContextTransitioning>)transitionContext
//在该方法中实现动画效果
- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext

我们做一个简单的左/右滑动时切换视图的动画控制器

新建名为DTTransitionAnimator继承与NSObject的类并加入协议

#import <UIKit/UIKit.h>
//这里可以定义更多的动画样式，交给-animateTransition:处理
typedef NS_ENUM(NSUInteger, DTTransitionDirect) {
    DTTransitionDirectLeftToRight,//从左向右滑动
    DTTransitionDirectRightToLeft,//从右向左滑动
};

@interface DTTransitionAnimator : NSObject<UIViewControllerAnimatedTransitioning>
@property (nonatomic,assign,readonly)DTTransitionDirect transitionDirect;
-(instancetype)initWithTransitionDirect:(DTTransitionDirect)direct;

@end

#import "DTTransitionAnimator.h"
@implementation DTTransitionAnimator
-(instancetype)initWithTransitionDirect:(DTTransitionDirect)direct{
    self = [super init];
    if (self) {
        _transitionDirect = direct;
    }
    return self;
}
//协议方法：确定转场的动画时长
-(NSTimeInterval)transitionDuration:(id<UIViewControllerContextTransitioning>)transitionContext{
    return 0.28;//统一动画时长为0.28秒
}
//协议方法：确定转场的动画的样式
-(void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext{
    
}
@end

接下来就是根据direct决定动画的样式，编写协议方法-animateTransition：如下:

//协议方法：确定转场的动画的样式
-(void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext{
    //获取toviewcontroller
    UIViewController * tovc   = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
    //获取fromviewcontroller
    UIViewController * fromvc = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
    //获取容器视图，所有转场都在该视图内进行
    UIView * containerView = [transitionContext containerView];
    UIView * toView        = tovc.view;
    UIView * fromView      = fromvc.view;
    //获取转场时长
    NSTimeInterval duration = [self transitionDuration:transitionContext];
    //设置视图为容器视图的大小，考虑后续有控件加入容器视图控制器的view的情况。
    toView.frame = containerView.bounds;
    [containerView addSubview:toView];
    //这里就不多做解释
    switch (_transitionDirect) {
        case DTTransitionDirectLeftToRight:
        {
            CGFloat toTranslationX = toView.frame.size.width;
            CGFloat fromTranslationX = fromView.frame.size.width;
            toView.transform = CGAffineTransformMakeTranslation(-toTranslationX, 0);
            fromView.transform = CGAffineTransformIdentity;
            [UIView animateWithDuration:duration delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
                toView.transform = CGAffineTransformMakeTranslation(0, 0);
                fromView.transform = CGAffineTransformMakeTranslation(fromTranslationX, 0);
            } completion:^(BOOL finished) {
                toView.transform = CGAffineTransformIdentity;
                fromView.transform = CGAffineTransformIdentity;
                //动画完成后必须调用该方法
                [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
            }];
        }
            break;
        case DTTransitionDirectRightToLeft:
        {
            CGFloat toTranslationX = toView.frame.size.width;
            CGFloat fromTranslationX = fromView.frame.size.width;
            toView.transform = CGAffineTransformMakeTranslation(toTranslationX, 0);
            fromView.transform = CGAffineTransformIdentity;
            [UIView animateWithDuration:duration delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
                toView.transform = CGAffineTransformMakeTranslation(0, 0);
                fromView.transform = CGAffineTransformMakeTranslation(-fromTranslationX, 0);
            } completion:^(BOOL finished) {
                //动画结束后重置transform
                toView.transform = CGAffineTransformIdentity;
                fromView.transform = CGAffineTransformIdentity;
                //动画完成后必须调用该方法
                [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
            }];
        }
            break;
        default:
        {
            [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
        }
            break;
    }
}

转场代理

动画控制器已经创建好，接下来就是转场代理。

像UINavigationController，UIKit提供了一个代理协议UINavigationControllerDelegate。

那容器控制器该用哪个协议呢？UIKit当然不会那么面面俱到地给我们开发者提供这种协议。咋整？自己写呗！

我们先看一下UINavigationControllerDelegate是什么样的。

重点看一下以下的协议：

- (nullable id <UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController
                                   animationControllerForOperation:(UINavigationControllerOperation)operation
                                                fromViewController:(UIViewController *)fromVC
                                                  toViewController:(UIViewController *)toVC;

说明转场过程中转场上下文会提供从哪个控制器pop/push到哪一个控制器。

那我们想象我们的协议该怎么写，看看今日头条的，每个标签都对应一个视图控制器，那么如果夸张一点，有几百个标签，我们难道要创建一百个视图控制器吗？显然这不太合理。我们应该考虑到试图控制器的复用就像tableview复用cell一样。

好，那我们着手写代理协议，先新建一个名为DTTransitionDelegate继承与NSObject的代理类，如下：

@protocol DTTransitionProtocol <NSObject>

-(id<UIViewControllerAnimatedTransitioning>)dt_animationControllerForContainerViewController:(UIViewController *)containerViewController
                                                                   transitFromViewController:(UIViewController *)fromViewController
                                                                                     atIndex:(NSUInteger)fromIndex
                                                                            toViewController:(UIViewController *)toViewController
                                                                                     atIndex:(NSUInteger)toIndex;

@end

参数说明

containerViewController：容器控制器

fromViewController：

fromIndex：fromviewcontroller的索引

toViewController：

toIndex：toViewController的索引

为什么这么写呢？

这样的话视图控制器会从索引分离。

比如说今日头条，有100个标签索引就是从0到99，但是视图控制器可以只有10个甚至更少。

接下来实现DTTransitionDelegate 的协议方法

-(id<UIViewControllerAnimatedTransitioning>)dt_animationControllerForContainerViewController:(UIViewController *)containerViewController
                                                                   transitFromViewController:(UIViewController *)fromViewController atIndex:(NSUInteger)fromIndex
                                                                            toViewController:(UIViewController *)toViewController atIndex:(NSUInteger)toIndex{
    //fromindex 和toindex再次只决定滑动方向
    if (fromIndex < toIndex) {
        return [[DTTransitionAnimator alloc]initWithTransitionDirect:DTTransitionDirectRightToLeft];
        
    }
    else{
        return [[DTTransitionAnimator alloc]initWithTransitionDirect:DTTransitionDirectLeftToRight];
    }
}

代理写完了，下面是最头痛的上下文，可以先喝杯水，休息一下。

上下文

开始写转场上下文吧。

还好UIKit为我们提供了转场上下文的协议UIViewControllerContextTransitioning，可以点进去看一下，好多协议方法吧？我们暂时只看动画转场的部分。

- (UIView *)containerView;//返回容器视图
- (BOOL)isAnimated;//是否在动画专场中
- (BOOL)transitionWasCancelled;//转场是否被取消
- (void)completeTransition:(BOOL)didComplete;//完成转场与否
- (nullable __kindof UIViewController *)viewControllerForKey:(UITransitionContextViewControllerKey)key;//根据key值返回fromviewcontroller/toviewcontroller
- (nullable __kindof UIView *)viewForKey:(UITransitionContextViewKey)key; NS_AVAILABLE_IOS(8_0)//暂时不用写。
- (CGRect)initialFrameForViewController:(UIViewController *)vc;//初始视图frame
- (CGRect)finalFrameForViewController:(UIViewController *)vc;//最终的视图frame

以上方法是不是有点眼熟，对他们都在DTTransitionAnimator里用着呢，也就是说这些方法都是由animator进行调用的，上下文的作用就是为动画控制器和交互控制器提供转场环境的。

创建DTTransitionContext继承与NSObject 签订UIViewControllerContextTransitioning协议，编辑头文件如下：

#import <Foundation/Foundation.h>
#import "DTTransitionDelegate.h"
@interface DTTransitionContext : NSObject<UIViewControllerContextTransitioning>
@property (nonatomic,weak)UIViewController * fromViewController;
@property (nonatomic,assign)NSUInteger fromIndex;
@property (nonatomic,weak)UIViewController * toViewController;
@property (nonatomic,assign)NSUInteger toIndex;

//转场代理
@property (nonatomic,strong,readonly)DTTransitionDelegate * trasitionDelegate;

-(instancetype)initWithContainerViewController:(UIViewController *)containerViewController
                                 containerView:(UIView *)containerView;
//开始动画转场
-(void)startAnimationTrasition;
@end

实现初始化方法如下：

-(instancetype)initWithContainerViewController:(UIViewController *)containerViewController
                                 containerView:(UIView *)containerView{
    self = [super init];
    if (self) {
      //不要忘了在声明以下两个全局变量
        self.privateContainerViewController = containerViewController;
        self.privateContainerView = containerView;
        _trasitionDelegate = [[DTTransitionDelegate alloc]init];
    }
    return self;
}

编写startAnimationTrasition

-(void)startAnimationTrasition{
    self.animator = [self.trasitionDelegate dt_animationControllerForContainerViewController:self.privateContainerViewController
                                                                   transitFromViewController:self.fromViewController
                                                                                     atIndex:self.fromIndex
                                                                            toViewController:self.toViewController
                                                                                     atIndex:self.toIndex];
    
    self.isCancelled = NO;
    //调用viewwillappear
    [self.toViewController willMoveToParentViewController:self.privateContainerViewController];
    //给动画控制器传入context
    [self.animator animateTransition:self];
}

我们去一个个去实现UIViewControllerContextTransitioning协议方法：

-(UIView *)containerView{
    return  self.privateContainerView;
}
-(UIViewController *)viewControllerForKey:(UITransitionContextViewControllerKey)key{
    if ([key isEqualToString:UITransitionContextFromViewControllerKey]) {
        return self.fromViewController;
    }
    else if([key isEqualToString:UITransitionContextToViewControllerKey]){
        return self.toViewController;
    }
    return nil;
}

-(UIView *)viewForKey:(UITransitionContextViewKey)key{
    if ([key isEqualToString:UITransitionContextFromViewKey]) {
        return self.fromViewController.view;
    }
    else if([key isEqualToString:UITransitionContextToViewKey]){
        return self.toViewController.view;
    }
    return nil;
}

-(CGRect)initialFrameForViewController:(UIViewController *)vc{
    return CGRectZero;
}

-(CGRect)finalFrameForViewController:(UIViewController *)vc{
    return vc.view.frame;
}

-(BOOL)transitionWasCancelled{
    return self.isCancelled;//标记动画或者交互是否被取消
}


//管理viewcontroller的生命周期
-(void)completeTransition:(BOOL)isComplete{
    [self.toViewController didMoveToParentViewController:self.privateContainerViewController];
    if (isComplete) {
        //会调用viewwilldisappear
        [self.fromViewController willMoveToParentViewController:nil];
        [self.fromViewController.view removeFromSuperview];
        //会调用viewDidDisappear
        [self.fromViewController removeFromParentViewController];
    }
    else{
        //会调用viewwilldisappear
        [self.toViewController willMoveToParentViewController:nil];
        [self.toViewController.view removeFromSuperview];
        //会调用viewDidDisappear
        [self.toViewController removeFromParentViewController];
    }
    if ([self.animator respondsToSelector:@selector(animationEnded:)]) {
        [self.animator animationEnded:!self.isCancelled];
    }
}

以上部分的上下文已经编写好了

容器控制器

考虑到扩展，要满足一下条件：

可扩展（没有一个多余的控件修饰，甚至没有标题滑动条，因为开发者使用时，可能有好多不同的控件样式，所以与其写一个高度扩展性的滑动条控件，还不如什么都没有，好让开发者自由发挥）
可子类化
可单独使用

在此我借鉴了一下 tableview的设计思想。

既然是借鉴了tableview的设计思想，当然少不了代理协议了。

新建容器控制器类DTContainerViewController，编写两个协议如下：

@protocol DTContainerViewControllerDataSource <NSObject>
//返回某个索引下的视图控制器
-(UIViewController *)viewControllerAtIndex:(NSUInteger)index;
/*
  视图视图控制器的数量
  次数量可能不同于真实的视图控制器的数量
  比如说tableview  返回的cell数量为100   但是真正的cell实例并不会有100个
*/
-(NSUInteger)numberOfChildViewController;
@end

@protocol DTContainerViewControllerDelegate <NSObject>
//即将开始转场
-(void)didStartTrasitionFromIndex:(NSUInteger)fromIndex toIndex:(NSUInteger)toIndex;
//转场结束
-(void)didEndTrasitionFromIndex:(NSUInteger)fromIndex toIndex:(NSUInteger)toIndex;
@end

添加两个代理属性，如下：

@interface DTContainerViewController : UIViewController
//当前选择的索引
@property (nonatomic,assign,readonly)NSUInteger currentIndex;
//手动选择索引
@property (nonatomic,assign)NSUInteger selectIndex;
//容器视图的上下左右间距
@property (nonatomic,assign)UIEdgeInsets containerViewEdge;
//数据源代理
@property (nonatomic,weak)id<DTContainerViewControllerDataSource> dataSource;
//事件代理
@property (nonatomic,weak)id<DTContainerViewControllerDelegate> delegate;
//reload 类似tableview的reloadData
-(void)reloadChildViewControllers;
@end

编写交互控制器

进一步完成上下文

总结

参考文献

最后编辑于：2017.12.05 07:38:14

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 206,723评论 6赞 481
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 88,485评论 2赞 382
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 152,998评论 0赞 344
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 55,323评论 1赞 279
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 64,355评论 5赞 374
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,079评论 1赞 285
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,389评论 3赞 400
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,019评论 0赞 259
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 43,519评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,971评论 2赞 325
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,100评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,738评论 4赞 324
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,293评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,289评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,517评论 1赞 262
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,547评论 2赞 354
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,834评论 2赞 345