What's New in Storyboards

2018/8/15 posted in  iOS
故事板是在iOS和OS X上构建用户界面和应用程序流的好方法。了解如何有效地组织故事板,为接口定义segue,以及轻松地展开转换。深入讨论新的api,并听取关于如何创建优秀用户界面的技巧,并附带一些自定义的转场动画介绍和使用。

1. Refactor to Storyboard

在 storyboard 中选中对应的 xib 文件,然后点击Editor->Refactor to Storyboard

可以把整个Storyboard文件中独立的部分重构出来。

屏幕快照 2018-12-17 上午10.13.35

2. Storyboard Refrence

拖动Storyboard Refrence到故事版中

屏幕快照 2018-12-17 上午10.42.11

对Storyboard Refrence进行设置,选择引用的故事版,以及故事版的引用id(必须和故事版中控制器的 Storyboard ID对应)bundle 可以为空,因为我这里是单项目工程,如果多个 bundle 的话就需要指定不同的 bundle。

屏幕快照 2018-12-17 上午10.41.40

屏幕快照 2018-12-17 上午10.44.49

3. Storyboard Segue

  • 点击 segue 右侧Utilities -> show the
    attributes inspector 可以设置自带的转场动画效果。

  • 还可以指定Segue Class 在内部重写 perform 方法,记得要调用 [super perform]

    屏幕快照 2018-12-17 上午11.37.11

    • user modal presentation

      • 赋值转换代理对象 transitioning delegate
      • 调用 [super perform] 开始 modal presentation
      • 提交动画用于 presentation
      • 展示动画效果给目标控制器
    • user dismisses presentation

    • 提交动画用于 dismissal

    • 展示dissmissal动画效果(动画控制器)

注意⚠️

1️⃣设置转场动画的代理要在视图加载之前设置,比如在 presentViewController 之前 还有在 viewDidAppear 里面(试了在 viewDidLoad)当中不成功。
#import "PhotoViewController.h"
#import "ScalingDismissAnimator.h"

@interface PhotoViewController ()<UIViewControllerTransitioningDelegate>

@end

@implementation PhotoViewController
-(void)viewDidAppear:(BOOL)animated{
self.transitioningDelegate = self;
[super viewDidAppear:animated];
}
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
}

- (IBAction)dismiss:(UIButton *)sender {
[self dismissViewControllerAnimated:YES
                         completion:nil];
}

-(id<UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed{
return   [[ScalingDismissAnimator alloc]init];

}

在UIViewControllerAnimatedTransitioning类中除了实现 init 方法之外一定要实现这两个重要方法

- (NSTimeInterval)transitionDuration:(id <UIViewControllerContextTransitioning>)transitionContext {
    
return 动画持续时间;
}


-(void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext{

在这个方法里面做动画事件

}

2️⃣fromViewController和toViewController

要注意fromViewController和toViewController 比如A->B(present)
那么A是fromViewController B 是toViewController
然后如果 dissmissViewController 的时候B是fromViewController A是toViewController

3️⃣转场动画背景为黑色

可以先把目标控制器的 view 加到[transitionContext containerView]效果会好很多,然后再加入要发生动画的控制器的 view 比如

-(void)animateTransitionEvent{
    
[self.containerView addSubview:self.toViewController.view];
[self.containerView addSubview:self.fromViewController.view];
[UIView animateWithDuration:self.transitionDuration delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
    self.fromViewController.view.transform = CGAffineTransformMakeScale(0.1, 0.1);
} completion:^(BOOL finished) {
    [self completeTransition];
}];
}