讓 UIView 像 UINavigationController 同樣支持 push 和 pop

VUE 這個 App 裏，有一個 UIView 之間的轉場動效作的挺不錯，是參照 iOS 系統 UINavigationController 的 push 和 pop 動畫，對兩個 UIView 之間的切換實現了和 系統的 push、pop 相似的動效，以下：

iOS 裏實現一個這樣的動效仍是比較容易的，只須要用 CAAnimation 的子類 CATransition 便可。

具體實現見 Demo

簡單版本

原理很簡單：封裝一個 PageView ，初始化時傳入一個 fromView，而後提供一個接口能夠 動畫的 push 到 toView ，以及動畫的移除 toView 的 pop 方法，如下是個簡單的實現的接口：

// 具體實現見 Demo 連接
#import <UIKit/UIKit.h>

@interface PageView : UIView

@property (nonatomic, assign, readonly, getter=isInPushing) BOOL inPushing;

// PageA 必須和 self frame 一致
- (void)setupPageA:(UIView *)view1;
// PageB 必須和 self frame 一致
- (void)pushToPageB:(UIView *)view2;
- (void)pop;

@end
複製代碼

用法示例：

- (void)viewDidLoad {
    [super viewDidLoad];
    [self.view addSubview:self.pageView];
    [self.pageView setupPageA:self.view1];
}

- (void)demo1Action {
    if (self.pageView.isInPushing) {
        [self.pageView pop];
    } else {
        [self.pageView pushToPageB:self.view2];
    }
}
複製代碼

進階版本

固然，這樣的實現和系統的 UINavigationController 比，仍是難用了太多，能夠藉助 OC 的 Category 機制，對 UIView 作個 page able 的擴展，這樣，任何 UIView 就都可以 push 和 pop 了，這裏是進階版的簡單實現：

// UIView (Pageable).h
#import <UIKit/UIKit.h>

@interface UIView (Pageable)
@property (nonatomic, assign, readonly) BOOL yh_inPushing;
- (void)yh_pushView:(UIView *)toView;
- (void)yh_pop;
@end


// UIView (Pageable).m
#import "UIView+Pageable.h"
#import <objc/runtime.h>

static NSString* const kPageAnimateKey = @"YHPageable";

@interface UIView ()
@property (nonatomic, weak) UIView *yh_toView;
@property (nonatomic, assign, readwrite) BOOL yh_inPushing;
@end

@implementation UIView (Pageable)

- (void)yh_pushView:(UIView *)toView {
    NSAssert(CGSizeEqualToSize(toView.frame.size, self.frame.size), @"toView.frame.size != self.frame.size");
    
    // 不支持連續 push 同一個 view
    if ([self.subviews containsObject:self.yh_toView]) {
        return;
    }
    
    self.yh_toView = toView;
    [self yh_switchAnimation];
    self.yh_inPushing = YES;
}


- (void)yh_pop {
    // 無 toView 可 pop
    if (![self.subviews containsObject:self.yh_toView]) {
        return;
    }
    [self yh_switchAnimation];
    self.yh_inPushing = NO;
}

#pragma mark - private

- (void)yh_switchAnimation {
    if (self.yh_inPushing) {    // pop
        [self yh_addTransitionWithType:kCATransitionMoveIn
                               subtype:kCATransitionFromLeft
                              duration:0.25];
        [self.yh_toView removeFromSuperview];
    } else {    // push
        [self yh_addTransitionWithType:kCATransitionMoveIn
                               subtype:kCATransitionFromRight
                              duration:0.5];
        [self addSubview:self.yh_toView];
    }
}

- (void)yh_addTransitionWithType:(CATransitionType)type
                         subtype:(CATransitionSubtype)subtype
                        duration:(CFTimeInterval)duration {
    [self.layer removeAnimationForKey:kPageAnimateKey];
    CATransition *transition = [CATransition animation];
    transition.duration = duration;
    transition.type = type;
    transition.subtype = subtype;
    transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [self.layer addAnimation:transition forKey:kPageAnimateKey];
}

#pragma mark - associate

- (UIView *)yh_toView {
    return objc_getAssociatedObject(self, _cmd);
}

- (void)setYh_toView:(UIView *)view {
    objc_setAssociatedObject(self, @selector(yh_toView), view, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}

- (BOOL)yh_inPushing {
    return [objc_getAssociatedObject(self, _cmd) boolValue];
}

- (void)setYh_inPushing:(BOOL)inPushing {
    objc_setAssociatedObject(self, @selector(yh_inPushing), @(inPushing), OBJC_ASSOCIATION_RETAIN);
}
@end

複製代碼

用法示例：

- (void)viewDidLoad {
    [super viewDidLoad];
    [self.view addSubview:self.view1];
}

- (void)demoAction {
    if (self.view1.yh_inPushing) {
        [self.view1 yh_pop];
    } else {
        [self.view1 yh_pushView:self.view2];
    }
}
複製代碼

效果以下：

動畫實現原理

• 經過給 view.layer 加自定義的 CAAnimation，以替換掉 [view addSubview:] 和 [view removeFromSuperview] 時的默認動畫。
• 按照這個思路，只須要修改這裏的 CATransitionType 便可實現各類轉場動畫；
• 更多的 CATransitionType 效果示例，能夠參見 @青玉伏案 的 iOS開發之各類動畫各類頁面切面效果

參照 UINavigationController 的版本

以上兩種實現，其實都沒有真正作到像 UINavigationController 同樣，能隨意的 push 和 pop。若是要徹底實現一套能像 UINavigationController 同樣使用的 UIView，用法上的限制會增大不少：

首先，假定咱們最終的可導航的 UIView 的類爲 UIViewNavigationController

一、 UIViewController 持有一個 UINavigationController 類型的屬性； 因此，咱們就不能直接使用 UIView, 而須要封裝一個 UINavigationView, 持有一個 UIViewNavigationController 屬性，便於 UIView 調用 [self.navigationView popView]

二、 UINavigationController 是繼承自 UIViewController 的。 因此，UINavigationController 須要繼承自 UIView, 至少有 initWithRootView:, pushView:(UINavigationView *)view, popView 等接口，內部還須要維護一個 stack，管理一層一層 push 入的 views

三、因爲不多有這麼複雜的使用場景，這裏僅提供簡單的 API 接口，須要的能夠自行實現

#import <UIKit/UIKit.h>

@class UIViewNavigationController;
@interface UINavigationView : UIView
@property (nonatomic, strong, readonly) UIViewNavigationController *viewNavigation;
@end


@interface UIViewNavigationController : UIView

@property(nonatomic,readonly,strong) UINavigationView *topView; // The top view on the stack.
@property(nonatomic,readonly,strong) UINavigationView *visibleView;
@property(nonatomic,copy) NSArray<__kindof UINavigationView *> *subNavigationViews; // The current navview stack.

- (instancetype)initWithRootView:(UINavigationView *)rootView;
- (void)pushView:(UINavigationView *)view animated:(BOOL)animated;
- (UINavigationView *)popView:(BOOL)animated;
- (NSArray<__kindof UINavigationView *> *)popToView:(UINavigationView *)view animated:(BOOL)animated;
- (NSArray<__kindof UINavigationView *> *)popToRootView:(BOOL)animated;
@end

複製代碼

keyword：

UIView 轉場、UIView轉場動畫、UIView push pop、UIView CATransition