如何修复视图居中之谜？

Posted 2023-02-27

【中文标题】如何修复视图居中之谜？

【英文标题】：How to Fix View Centering Mystery?

【发布时间】：2015-10-25 12:41:48

【问题描述】：

我有一个 UIStackView，它包含一个图像视图和一个文本视图。图像视图有一个活动指示器视图作为子视图（我以编程方式添加）。当视图初始视图加载时，我将活动指示器视图置于图像视图的中心并启动 AIV 的动画。但是，在等待图像加载的过程中，如果我旋转图像视图，则需要将 AIV 重新居中。我添加了代码来监听状态栏方向更改通知，并有一个方法可以根据通知调用（UIApplicationDidChangeStatusBarOrientationNotification）。在该方法中，我尝试获取图像视图的边界并使用它在图像视图中重新居中 AIV。但是，当设备方向改变时，图像视图的边界值似乎没有改变。在设备方向改变后，是否有一种“可靠”的方式来获取视图的更新边界？代码 ->

// start listening for orientation changes
NSNotificationCenter.defaultCenter().addObserver(self, selector: "orientationDidChange:",
           name: UIApplicationDidChangeStatusBarOrientationNotification, object: nil)

那么我有：

func orientationDidChange(notification: NSNotification) 

   // get image view bounds
   let viewBounds = _imageView.bounds

   // recenter the activity indicator
   _activityIndicator.center = CGPointMake(CGRectGetMidX(viewBounds), CGRectGetMidY(viewBounds))

更新：

所以我摆脱了上面的并尝试了这个：

// setup activity indicator
_activityIndicatorView.translatesAutoresizingMaskIntoConstraints = true

        _imageView.addSubview(_activityIndicatorView)

        // set constraints
        let centerXConstraint = NSLayoutConstraint(item: _activityIndicatorView, attribute: .CenterX,
            relatedBy: .Equal, toItem: _imageView,
            attribute: .CenterX, multiplier: 1.0,
            constant: 0.0)
        _activityIndicatorView.addConstraint(centerXConstraint)

        let centerYConstraint = NSLayoutConstraint(item: _activityIndicatorView, attribute: .CenterY,
            relatedBy: .Equal, toItem: _imageView,
            attribute: .CenterY, multiplier: 1.0,
            constant: 0.0)
        _activityIndicatorView.addConstraint(centerYConstraint)

在我看来确实是加载方法。控制台吐出这个：

2015-10-27 19:26:09.303 Historic Sites Navigator[373:93902] 视图层次结构没有为约束做好准备： 添加到视图时，约束的项必须是该视图（或视图本身）的后代。如果在组装视图层次结构之前需要解决约束，这将崩溃。中断 -[UIView(UIConstraintBasedLayout) _viewHierarchyUnpreparedForConstraint:] 进行调试。 2015-10-27 19:26:09.308 Historic Sites Navigator[373:93902] 视图层次结构没有为约束做好准备。 约束： 容器层次结构： > | > 在容器层次结构中找不到视图：> 该视图的超级视图：> 2015-10-27 19:26:09.310 Historic Sites Navigator[373:93902] * 由于未捕获的异常“NSGenericException”而终止应用程序，原因：“无法在视图上安装约束。约束是否引用了视图子树之外的内容？那是违法的。约束：视图：>' * 首先抛出调用栈： （0x2643767b 0x377b2e17 0x264375c1 0x27177983 0x2a628f85 0x2a628dd5 0x2a628cef 0x2ad33971 0x2a628bd7 0xdf6c4 0xdfe34 0x2a5271c7 0x2a526dad 0x2ad8ca09 0x2a8689ad 0x2a88c095 0x2a88e6c5 0x2a88e931 0x2a61e989 0x2a891bb7 0x2ab33085 0x2ac09b39 0x2ac09967 0x2a883d95 0xccac8 0xccc10 0x2a659487 0x2a71440b 0x2a7cc0b9 0x2a7d79eb 0x2a519ecd 0x263fa4c9 0x263f87cd 0x263f8bff 0x2634c119 0x2634bf05 0x2f502ac9 0x2a58ef15 0xd6e74 0x37f21873） libc++abi.dylib：以 NSException 类型的未捕获异常终止

【问题讨论】：

这取决于，哪个ios版本？

使用自动布局。它会自动更新位置。

@Sulthan，我试过了，见上面的更新。

【参考方案1】：

对于 iOS 8 和 9，以下函数会在视图大小更改时调用（例如在界面旋转时）：

override func viewWillTransitionToSize(size: CGSize, withTransitionCoordinator coordinator: UIViewControllerTransitionCoordinator) 
    super.viewWillTransitionToSize(size, withTransitionCoordinator: coordinator)

    coordinator.animateAlongsideTransition( (coordinator) -> Void in
        // here the new size is already set, so place your code here
    , completion: nil)

除此之外，您还可以使用约束（自动布局）来定位 UIActivityIndi​​catorView。

您当前的自动布局错误是因为您必须：

将 translatesAutoresizingMaskIntoConstraints 设置为 false 将约束添加到图像视图，而不是 AI 视图

【讨论】：

问题不在于 UIImageView，而是以编程方式添加的 UIActivityIndi​​catorView。图像视图位于 Interface Builder 的堆栈视图中...

向图像视图添加约束会如何影响 UIStackView，它假定生成/管理其子视图的约束？

因为 ai 视图是图像视图的子视图。如果你在 iOS 8 上，你可以激活约束，你现在是怎么做的。这就是为什么我首先问你哪个 iOS 版本。

【参考方案2】：

观看 WWDC 2015 的 Autolayout 视频后，我能够编写正确且有效的代码：

_activityIndicatorView.translatesAutoresizingMaskIntoConstraints = false

_imageView.addSubview(_activityIndicatorView)

NSLayoutConstraint(item: _activityIndicatorView, attribute: .CenterX,
            relatedBy: .Equal, toItem: _imageView,
            attribute: .CenterX, multiplier: 1.0,
            constant: 0.0).active = true

NSLayoutConstraint(item: _activityIndicatorView, attribute: .CenterY,
            relatedBy: .Equal, toItem: _imageView,
            attribute: .CenterY, multiplier: 1.0,
            constant: 0.0).active = true

这个视频的@13:48 是关键： https://developer.apple.com/videos/play/wwdc2015-219/