使用Autolayout对齐模态视图

Question

我正在使用presentViewController和一个自定义modalPresentationStyle呈现一个UIViewController,以实现Facebook POP动画过渡.

模态视图本身是完全动态的,使用代码中的Autolayout约束进行定义.没有用于支持模态的xib/storyboard.

我无法将模态视图置于屏幕中心!Autolayout是不够的,因为没有超级视图来添加约束!

我的呈现代码如下所示(取自FB POP代码示例):

- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext
{
    UIView *fromView = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey].view;
    fromView.tintAdjustmentMode = UIViewTintAdjustmentModeDimmed;
    fromView.userInteractionEnabled = NO;

    UIView *dimmingView = [[UIView alloc] initWithFrame:fromView.bounds];
    dimmingView.backgroundColor = [UIColor colorWithRed:(24/255.0) green:(42/255.0) blue:(15/255.0) alpha:1.0];
    dimmingView.layer.opacity = 0.0;

    UIView *toView = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey].view;
    toView.frame = CGRectMake(0,
                              0,
                              CGRectGetWidth(transitionContext.containerView.bounds) - 104.f,
                              CGRectGetHeight(transitionContext.containerView.bounds) - 320.f);
    toView.center = CGPointMake(transitionContext.containerView.center.x, -transitionContext.containerView.center.y);

    [transitionContext.containerView addSubview:dimmingView];
    [transitionContext.containerView addSubview:toView];

    POPSpringAnimation *positionAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerPositionY];
    positionAnimation.toValue = @(transitionContext.containerView.center.y);
    positionAnimation.springBounciness = 10;
    [positionAnimation setCompletionBlock:^(POPAnimation *anim, BOOL finished) {
        [transitionContext completeTransition:YES];
    }];

    POPSpringAnimation *scaleAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerScaleXY];
    scaleAnimation.springBounciness = 20;
    scaleAnimation.fromValue = [NSValue valueWithCGPoint:CGPointMake(1.2, 1.4)];

    POPBasicAnimation *opacityAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerOpacity];
    opacityAnimation.toValue = @(0.2);

    [toView.layer pop_addAnimation:positionAnimation forKey:@"positionAnimation"];
    [toView.layer pop_addAnimation:scaleAnimation forKey:@"scaleAnimation"];
    [dimmingView.layer pop_addAnimation:opacityAnimation forKey:@"opacityAnimation"];
}

这很漂亮,但我需要实际的视图大小是动态的(有时模态将有四行文本和两个按钮等).为此,我需要在VC子类中设置translatesAutoresizingMaskIntoConstraints = NO.这显然否定了我在演示动画师中所做的帧中心.

最终结果是一个粘在屏幕左边缘的模态; 奇怪的是,它垂直居中,但不是水平居中.在视觉上,它看起来像这样(原谅黑色方块,我必须为合法目的这样做):

显而易见的解决方案是添加一个以视图为中心的视图约束.没问题,对吧？

但是我在哪里添加它？view.superview是零; 没有超级视图.我尝试创建自定义'superview'属性并进行设置,但autolayout不知道如何处理视图层次结构之外的视图(呈现vc).这是我的视图层次结构的样子,注释:

您显然不应该直接访问UITransitionView.UIWindow上的约束无效.

有人有建议吗？你们怎么处理这种事情？

Answer 1

您可以在 animateTransition 方法中以编程方式添加从 containerView 到 toView 的居中约束：

（在 Swift 中，但你应该能够明白这个想法......）

containerView.addSubview(toView)

let centerXLayoutConstraint = NSLayoutConstraint(item: toView, attribute: NSLayoutAttribute.CenterX, relatedBy: NSLayoutRelation.Equal, toItem: containerView, attribute: NSLayoutAttribute.CenterX, multiplier: 1, constant: 0)
let centerYLayoutConstraint = NSLayoutConstraint(item: toView, attribute: NSLayoutAttribute.CenterY, relatedBy: NSLayoutRelation.Equal, toItem: containerView, attribute: NSLayoutAttribute.CenterY, multiplier: 1, constant: 0)

containerView.addConstraint(centerXLayoutConstraint)
containerView.addConstraint(centerYLayoutConstraint)

当我尝试这个时，我还向 toView 添加了宽度和高度约束，以相对于 containerView 调整其大小。它起作用了——没问题。

我认为它也应该与自动调整大小的 toView 一起使用。您可能必须覆盖 toView 类中的intrinsicSize 和/或强制它更新其约束。