讓 UIView 像 UINavigationController 一樣支援 push 和 pop

yehot發表於2019-07-20
UIViewNavigationController

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

讓 UIView 像 UINavigationController 一樣支援 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];
    }
}
複製程式碼

效果如下：

讓 UIView 像 UINavigationController 一樣支援 push 和 pop

動畫實現原理

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

參照 UINavigationController 的版本

以上兩種實現，其實都沒有真正做到像 UINavigationController 一樣，能隨意的 push 和 pop。如果要完全實現一套能像 UINavigationController 一樣使用的 UIView，用法上的限制會增大很多：

首先，假定我們最終的可導航的 UIView 的類為 UIViewNavigationController

1、 UIViewController 持有一個 UINavigationController 型別的屬性； 所以，我們就不能直接使用 UIView, 而需要封裝一個 UINavigationView, 持有一個 UIViewNavigationController 屬性，便於 UIView 呼叫 [self.navigationView popView]

2、 UINavigationController 是繼承自 UIViewController 的。 所以，UINavigationController 需要繼承自 UIView, 至少有 initWithRootView:, pushView:(UINavigationView *)view, popView 等介面，內部還需要維護一個 stack，管理一層一層 push 入的 views

3、由於很少有這麼複雜的使用場景，這裡僅提供簡單的 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

相關文章