UIStackView - 隐藏堆栈视图时的布局约束问题

UIStackView - layout constraint issues when hiding stack views

我的应用有 2 个屏幕:

  1. TableViewVC(这里没有堆栈视图)

  2. DetailVC(这里是所有嵌套的堆栈视图;图片请参见link:Nested StackViews Picture)——注意,这些堆栈视图中有标签和图像。

当您按下表格视图中的单元格时,它会将信息从 TableViewVC 传递到 DetailVC。问题在于 在 DetailVC 中隐藏了特定的 UIStackView。 我只想在 DetailVC 中的各种视图中的 2 个堆栈视图在视图加载后立即隐藏。所以我在 DetailVC 中写了这段代码来完成这个:

override func viewDidLoad() {
    super.viewDidLoad()

    self.nameLabel.text = "John"

    self.summaryStackView.hidden = true
    self.combinedStackView.hidden = true
}

一切看起来都不错,但 Xcode 仅在 运行时 给出许多警告。当应用程序不是 运行 时,Storyboard 中没有警告。请查看 link 错误图片:Picture of Errors

基本上是很多 UISV 隐藏、UISV 间距、UISV-canvas 连接错误。如果我在 viewDidAppear 中隐藏相同的堆栈视图,这些错误就会消失,但随后会出现一闪而过的应该隐藏的内容,然后它又隐藏了。用户短暂地看到视图,然后隐藏起来,这是不好的。

很抱歉实际上无法 post 图片代替 links,仍然不能这样做。

关于如何解决这个问题有什么建议吗?这是我真正想发布到应用商店的应用程序 - 这是我的第一个应用程序,所以任何帮助都会很棒!

编辑/更新 1:

我发现了一个小的变通办法,我把这段代码放在第二个屏幕中,叫做 DetailVC:

// Function I use to delay hiding of views
func delay(delay: Double, closure: ()->()) {
    dispatch_after(
        dispatch_time(
            DISPATCH_TIME_NOW,
            Int64(delay * Double(NSEC_PER_SEC))
        ),
        dispatch_get_main_queue(), closure)
}

// Hide the 2 stack views after 0.0001 seconds of screen loading
override func awakeFromNib() {
    delay(0.001) { () -> () in
        self.summaryStackView.hidden = true
        self.combinedStackView.hidden = true
    }
}

// Update view screen elements after 0.1 seconds in viewWillAppear
override func viewWillAppear(animated: Bool) {
    super.viewWillAppear(animated)
    delay(0.1) { () -> () in
        self.nameLabel.text = "John"
    }
}

这完全消除了 Xcode 中关于布局约束的警告。

它仍然不完美,因为有时我会瞥见本应隐藏的视图——它们在屏幕上快速闪烁然后消失。不过,这种情况发生得如此之快。

关于为什么这会消除警告的任何建议?另外,关于如何改进它以使其完美运行的任何建议???谢谢!

这个错误不是关于隐藏,而是关于模糊约束。您的视图中不能有任何不明确的约束。 如果您以编程方式添加它们,您应该准确了解您添加的约束以及它们如何协同工作。 如果您不以编程方式添加它们,而是使用 storyboard 或 xib(这是一个很好的起点),请确保没有约束错误或警告。

UPD:那里的视图结构非常复杂。没有看到约束很难说到底是哪里出了问题。但是,我建议您构建视图层次结构,逐渐逐一添加视图,并确保没有 design-time/runtime 警告。 如果处理不当,滚动视图可能会增加另一层复杂性。了解如何对滚动视图使用约束。 无论如何,所有其他计时技巧都不是解决方案。

将隐藏命令放入 viewWillLayoutSubviews() {}

我遇到了同样的问题,我通过将最初隐藏视图的高度限制设置为 999 的优先级来修复它。

问题是您的 stackview 在隐藏视图上应用了 0 的高度约束,这与您的其他高度约束冲突。这是错误消息:

Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect; (2) find the code that added the unwanted constraint or constraints and fix it. (Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints) 
(
    "<NSLayoutConstraint:0x7fa3a5004310 V:[App.DummyView:0x7fa3a5003fd0(40)]>",
    "<NSLayoutConstraint:0x7fa3a3e44190 'UISV-hiding' V:[App.DummyView:0x7fa3a5003fd0(0)]>"
)

降低高度限制的优先级可以解决这个问题。

我将所有 UIStackView.hidden 代码从 viewDidLoad 移到了 viewDidAppear 并且破坏约束问题消失了。在我的例子中,所有冲突的约束都是自动生成的,所以无法调整优先级。

我也用这段代码让它更漂亮:

UIView.animateWithDuration(0.5) {
    self.deliveryGroup.hidden = self.shipVia != "1"
}

编辑:

还需要以下代码来阻止它在设备旋转时再次发生:

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

    self.deliveryGroup.hidden = false

    coordinator.animateAlongsideTransition(nil) {
    context in
        self.deliveryGroup.hidden = self.shipVia != "1"
    }
}

我通过将隐藏命令放入 traitCollectionDidChange 来修复它。

override func traitCollectionDidChange(previousTraitCollection: UITraitCollection?) {
    super.traitCollectionDidChange(previousTraitCollection)
    self.item.hidden = true
}

您可以使用 UIStackView 的 removeArrangedSubview 和 removeFromSuperview 属性。

在Objective-C中:

 [self.topStackView removeArrangedSubview:self.summaryStackView];
 [self.summaryStackView removeFromSuperview];

 [self.topStackView removeArrangedSubview:self.combinedStackView];
 [self.combinedStackView removeFromSuperview];

来自 Apple UIStackView 文档:(https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIStackView_Class_Reference/#//apple_ref/occ/instm/UIStackView/removeArrangedSubview:)

每当视图被添加、删除或插入到 arrangedSubviews 数组时,堆栈视图会自动更新其布局。

  • removeArrangedSubview:此方法从堆栈的 arrangedSubviews 数组中删除提供的视图。视图的位置和大小将不再由堆栈视图管理。但是,此方法不会从堆栈的子视图数组中删除提供的视图;因此,该视图仍显示为视图层次结构的一部分。

要防止视图在调用堆栈的 removeArrangedSubview: 方法后出现在屏幕上,请通过调用视图的 removeFromSuperview 方法从子视图数组中显式删除视图,或将视图的隐藏 属性 设置为 YES。

当 UIViewStack 被隐藏时,UIStackView 自动生成的约束会抛出大量的 UISV-hiding, UISV-spacing, UISV-canvas-connection 警告,如果 UIStackView 的间距 属性具有非零值。

这没有多大意义,这几乎可以肯定是框架错误。我使用的解决方法是在隐藏组件时将间距设置为零。

if hideStackView {
    myStackView.hidden = true
    myStackView.spacing = CGFloat(0)
} else {
    myStackView.hidden = false
    myStackView.spacing = CGFloat(8)
}

这是隐藏嵌套堆栈视图的已知问题。

这个问题基本上有 3 种解决方案:

  1. 将间距更改为 0,但您需要记住之前的间距值。
  2. 调用 innerStackView.removeFromSuperview(),但随后您需要记住在何处插入堆栈视图。
  3. 用至少一个 999 约束将堆栈视图包装在 UIView 中。例如。顶部、领先、尾随@1000,底部@999​​。

我认为第三个选项是最好的。有关此问题、发生原因、不同解决方案以及如何实施解决方案 3 的更多信息,请参阅

你试过这个吗?更改后调用 super

override func viewWillAppear() {
    self.nameLabel.text = "John"
    self.summaryStackView.hidden = true
    self.combinedStackView.hidden = true
    super.viewWillAppear()
}

我发现如果在 ✨Interface Builder✨ 中设置隐藏 属性,嵌套的 UIStackViews 会显示此行为。我的解决方案是在 ✨Interface Builder✨ 中将所有内容设置为不隐藏,并选择性地在 viewWillAppear 中隐藏内容。

我通过将嵌套 UIStackView 的所有隐藏视图存储在一个数组中并将它们从父视图和排列的子视图中移除来做到这一点。当我想让它们再次出现时,我遍历数组并再次将它们添加回去。这是第一步。

第二步是在从父视图中删除嵌套 UIStackView 的视图后,父 UIStackView 仍然没有调整它的高度。您可以通过删除嵌套的 UIStackView 并在之后直接添加它来解决此问题:

UIStackView *myStackView;
NSUInteger positionOfMyStackView = [parentStackView indexOfObject:myStackView];
[parentStackView removeArrangedSubview:myStackView];
[myStackView removeFromSuperview];
[parentStackView insertArrangedSubview:myStackView atIndex:positionOfMyStackView];

因此,这可能只会帮助 0.000001% 的用户,但这可能是一个限制问题。

我最近 运行 在与 UICollectionViewCell 一起工作时忘记检查剪辑到我视为内容视图的视图的边界。当您在 IB 中创建 UITableViewCell 时,它会设置一个内容视图,默认情况下剪辑到边界。

要点是,根据您的情况,您可以使用帧和剪辑来实现预期效果。

如果您在同时隐藏和显示子视图时遇到问题,在动画完成中重复 .isHidden 指令可能会有所帮助。有关详细信息,请参阅我的回答