我爱模仿app之格瓦拉客户端

最近有很多人问我，这个效果该怎么实现，那个功能该怎么实现。所以我准备开个专题，找一些app模仿，写一些示例代码，以供大家参考。

第一个下手的就是格瓦拉，没用过的可以下载看看，效果做的还是可以的，专场，和 tabBar的实现都觉得挺有意思的。项目代码

项目代码已经提交到github上 https://github.com/qianhongqiang/QHQGewala

首先讲解下如何实现这样的自定义的tabBar

首先创建了继承于UITabBarController的TranslationTabBarViewController，并且讲其自带的tabBar隐藏,并且创建了一个自定义的tabBar。

-(void)setupTabBar {
    self.tabBar.hidden = YES;

    GewalaTabBar *tabbar = [[GewalaTabBar alloc] initWithFrame:CGRectMake(0, [UIScreen mainScreen].bounds.size.height - 60, [UIScreen mainScreen].bounds.size.width, 60) delegate:self];
    [self.view addSubview:tabbar];
}

接着我们就需要实现格瓦拉下面的效果：点击某个按钮后，那个按钮右侧的字，也就是提示文字会出现。然后后面的按钮会往后移，腾出文字的位置。我们可以给每一个button添加1个UIImageView，和一个UILabel，当这个按钮被选中时，增大按钮的宽度，让文本框UILabel显示出来。这里实现一个方法，tabBar的某个按钮被点击后，每个按钮自己移动到对应的位置，并线决定自己是否显示文本等信息。这里味了方便大家看清楚，其实重写setSelected更加好一些。

-(void)tabBar:(GewalaTabBar *)tabBar tabBarItemClickedAtIndex:(NSUInteger)index {
    CGRect toRect;
    if (index > self.tag) {
        toRect = CGRectMake(self.tag * kStandardButtonWidth, 0, kStandardButtonWidth, kStandardButtonHeight);
    }else if(index < self.tag) {
        toRect = CGRectMake((self.tag + 1) * kStandardButtonWidth, 0, kStandardButtonWidth, kStandardButtonHeight);
    }else {
        toRect = CGRectMake(self.tag* kStandardButtonWidth, 0, kStandardButtonWidth * 2, kStandardButtonHeight);
    }

    [UIView animateWithDuration:0.35 delay:0 usingSpringWithDamping:0.8 initialSpringVelocity:0.6 options:0 animations:^{
        self.frame = toRect;
        if (index > self.tag) {
            self.tabBarButtonTitleView.alpha = 0;
            self.tabBarButtonTitleView.frame = CGRectMake(0, 0, kStandardButtonWidth, kStandardButtonHeight);
            self.tabbarButtonImageView.image = self.item.normalImage;
        }else if(index < self.tag) {
            self.tabBarButtonTitleView.alpha = 0;
            self.tabBarButtonTitleView.frame = CGRectMake(0, 0, kStandardButtonWidth, kStandardButtonHeight);
            self.tabbarButtonImageView.image = self.item.normalImage;
        }else {
            self.tabBarButtonTitleView.alpha = 1;
            self.tabBarButtonTitleView.frame = CGRectMake(kStandardButtonWidth, 0, kStandardButtonWidth, kStandardButtonHeight);
            self.tabbarButtonImageView.image = self.item.selectedImage;
        }

    } completion:nil];
}

其中下面方法的参数，如果你不知道怎么调整的话，可以在我上面参数的值附近微调，活着干脆不需要弹簧的效果。

+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay usingSpringWithDamping:(CGFloat)dampingRatio initialSpringVelocity:(CGFloat)velocity options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(7_0);

我们继续实现一个专场，我们观察格瓦拉tabbar的切换。显示的页面不是直接切换，而是最后呈现简谐阻尼的震荡，切换有些类似于导航控制器。说到UIViewController这个东西，其实是设计模式的产物，从本质上来讲，就是UIViewController的view在做显示。

    TranslationDelegate *delegate = [[TranslationDelegate alloc] init];
    self.delegate = delegate;
    objc_setAssociatedObject(self, &TranslationTabBarViewControllerDelegateAssociationKey, delegate, OBJC_ASSOCIATION_RETAIN_NONATOMIC);

如果你直接去改变页面的frame也是可以的，但是为了迎合这种设置模式，所以我们最好去实现开放给我们专场的协议。要实现上面那个delegate。

这个代理类里，只有一个方法

-(id<UIViewControllerAnimatedTransitioning>)tabBarController:(UITabBarController *)tabBarController animationControllerForTransitionFromViewController:(UIViewController *)fromVC toViewController:(UIViewController *)toVC {
    return [[TranslationAnimator alloc] init];
}

又创建了一个TranslationAnimator，这个对象是真正说明，这个专场该如何切换的。

- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext
{
    UIViewController *fromViewController = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
    UIViewController *toViewController = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];

    UIView *containerView = transitionContext.containerView;
    UIView *fromView;
    UIView *toView;

    if ([transitionContext respondsToSelector:@selector(viewForKey:)]) {
        fromView = [transitionContext viewForKey:UITransitionContextFromViewKey];
        toView = [transitionContext viewForKey:UITransitionContextToViewKey];
    } else {
        fromView = fromViewController.view;
        toView = toViewController.view;
    }

    CGRect fromFrame = [transitionContext initialFrameForViewController:fromViewController];
    CGRect toFrame = [transitionContext finalFrameForViewController:toViewController];

    fromView.frame = fromFrame;
    toView.frame = CGRectOffset(toFrame, toFrame.size.width,0);

    [containerView addSubview:toView];

    NSTimeInterval transitionDuration = [self transitionDuration:transitionContext];

    [UIView animateWithDuration:transitionDuration delay:0 usingSpringWithDamping:0.8 initialSpringVelocity:0.8 options:0 animations:^{
        toView.frame = fromFrame;
    } completion:^(BOOL finished) {
        BOOL wasCancelled = [transitionContext transitionWasCancelled];
        [transitionContext completeTransition:!wasCancelled];
    }];
}

有点类似于NSInvoke对象，transitionContext就是一个包涵了你所需要的对象,fromView和toView分别对应的是，从哪个view跳转到哪个view。取到所有信息后，首先将toView的frame设置到屏幕的右侧CGRectOffset(toFrame, toFrame.size.width,0)即向右移动屏幕款，接着就执行弹性动画,将页面移动到屏幕中央。

是不是很简单？只要抓住本质，就很容易。