iOS 11 安全区域与 UIView 动画

Question

考虑以下几点：我创建了一个可重用的 UIView 子类，它有一个背景，并且在它的子视图中布置了一些内容。作为负责任的开发人员，我已经根据其安全区域对齐视图的子视图，以便在必要时自动插入其内容（例如在 iPhone X 上）：

太棒了！当内部视图在安全区域内时，它是边到边的，当它挂出安全区域时，它会从底部插入其内容。

现在假设最初视图应该在屏幕外，但是当用户点击我的应用程序中的某个位置时，我希望我的视图动画到屏幕中心，并且它应该在第二次点击时动画出来。让我们像这样实现它：

@implementation ViewController {
    UIView* _view;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    [self.view addGestureRecognizer:[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(animate:)]];
}

- (void)animate:(UITapGestureRecognizer*)sender {
    if (_view == nil) {
        _view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
        _view.backgroundColor = UIColor.redColor;

        UIView* innerView = [[UIView alloc] initWithFrame:CGRectMake(5, 5, 90, 90)];
        innerView.translatesAutoresizingMaskIntoConstraints = NO;
        innerView.backgroundColor = UIColor.blueColor;

        [_view addSubview:innerView];
        [_view addConstraints:@[[_view.safeAreaLayoutGuide.topAnchor constraintEqualToAnchor:innerView.topAnchor constant:-5],
                                [_view.safeAreaLayoutGuide.rightAnchor constraintEqualToAnchor:innerView.rightAnchor constant:5],
                                [_view.safeAreaLayoutGuide.bottomAnchor constraintEqualToAnchor:innerView.bottomAnchor constant:5],
                                [_view.safeAreaLayoutGuide.leftAnchor constraintEqualToAnchor:innerView.leftAnchor constant:-5]]];

        _view.center = CGPointMake(self.view.bounds.size.width / 2,
                                   self.view.bounds.size.height + _view.bounds.size.height / 2);
        [self.view addSubview:_view];
        [UIView animateWithDuration:1 animations:^{
            _view.center = CGPointMake(self.view.bounds.size.width / 2,
                                       self.view.bounds.size.height / 2);
        }];
    } else {
        [UIView animateWithDuration:1 animations:^{
            _view.center = CGPointMake(self.view.bounds.size.width / 2,
                                       self.view.bounds.size.height + _view.bounds.size.height / 2);
        } completion:^(BOOL finished) {
            [_view removeFromSuperview];
            _view = nil;
        }];
    }
}

@end

所以，现在如果我们启动应用并点击屏幕，就会发生这种情况：

到目前为止一切顺利。然而，当我们再次点击它时会发生这种情况：

如您所见，即使视图完全超出了父视图的边界，安全区域插图仍会设置为就好像它位于其父视图的底部一样。

我们可以通过在视图被动画化的动画块中调用[self.view layoutIfNeeded]来减少效果的突然性，但这并不能消除问题——底部空间只会以动画方式增长而不是突然扩大：

这对我来说仍然是不可接受的。我希望它像滑入一样滑出，四面都有 5pt 填充。

有没有办法在不向我的视图中添加 shouldAlignContentToSafeArea 或 shouldAlignContentToBounds 之类的标志的情况下实现这一目标？

我只想让它自动工作，但正常工作...

Answer 1

解决方案太简单了。试试这个看看（设置内部视图的中心等于动画视图中心 - innerView.center = animatingView.center;）

@interface ViewController () {

     UIView* animatingView;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    [self setupAnimate];
}

- (void)setupAnimate {

    [self.view addGestureRecognizer:[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(animate:)]];
}

- (void)animate:(UITapGestureRecognizer*)sender {
    if (animatingView == nil) {
        animatingView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
        animatingView.backgroundColor = UIColor.redColor;

        UIView* innerView = [[UIView alloc] initWithFrame:CGRectMake(5, 5, 90, 90)];
        innerView.translatesAutoresizingMaskIntoConstraints = NO;
        innerView.backgroundColor = UIColor.blueColor;

        [animatingView addSubview:innerView];
        innerView.center = animatingView.center;

        animatingView.center = CGPointMake(self.view.bounds.size.width / 2,
                                   self.view.bounds.size.height + animatingView.bounds.size.height / 2);
        [self.view addSubview:animatingView];
        [UIView animateWithDuration:1 animations:^{
            animatingView.center = CGPointMake(self.view.bounds.size.width / 2,
                                       self.view.bounds.size.height / 2);
        }];
    } else {
        [UIView animateWithDuration:1 animations:^{
            animatingView.center = CGPointMake(self.view.bounds.size.width / 2,
                                       self.view.bounds.size.height + animatingView.bounds.size.height / 2);
        } completion:^(BOOL finished) {
            [animatingView removeFromSuperview];
            animatingView = nil;
        }];
    }
}

结果如下：