使用 isHidden 的 UIStackView 动画

Question

[编辑] 我推送了一个包含零高度约束的解决方案的提交，但是，现在我必须处理隐式 UISV 约束。

我花了几个小时来了解如何更改堆栈视图中出现/消失项目的动画。我想从屏幕底部为这两个按钮的出现设置动画，但是，它们总是从右上角飞出：

是否有任何 Cocoa 方法可以将动画配置为从底部开始？PS项目链接。

动画块：

UIView.animate(withDuration: 5.0,
                   delay: 0.5,
                   options: .curveEaseInOut,
                   animations:
        {
            self.buttons.forEach { $0.isHidden = !$0.isHidden }
            self.stack.layoutIfNeeded()
        }, completion: nil)

Answer 1

这里有两种方法可以让按钮看起来像是从屏幕底部向上滑动。这两种方法都不涉及更改堆栈视图或isHidden按钮的高度。

解决方案1

如果视图控制器视图的底部边缘（场景的“根视图”）位于屏幕的底部边缘，或者启用了“剪辑到边界”，则此解决方案效果很好。

• 将堆栈视图的底部约束到根视图安全区域的底部，优先级为 999。
• 将堆栈视图的顶部约束到根视图的底部（不是安全区域），优先级为 1000，但通过在其属性检查器中取消选中“已安装”来使此约束无效。将命名stackHidingConstraint为该约束的出口连接。

要切换按钮的可见性，请设置stackHidingConstraint.isActive = !stackHidingConstraint.isActive。当约束处于活动状态时，它通过将堆栈视图放在根视图的底部边缘来隐藏按钮。当约束处于非活动状态时，priority-999 底部边缘约束通过将堆栈视图放在根视图安全区域的底部边缘上方来显示按钮。

它看起来像这样：

解决方案2

此解决方案适用于解决方案 1 不适用的情况（如果场景根视图的底部边缘不在屏幕底部边缘且未启用“剪辑到边界”），但需要对视图层次结构。

• 将堆栈视图嵌入到容器中UIView。我们称之为堆栈隐藏视图。
• 为堆栈隐藏视图打开“Clip to Bounds”。
• 将堆栈隐藏视图的左侧、右侧和底部边缘限制在根视图安全区域的左侧、右侧和底部边缘。
• 将堆栈视图的左侧、右侧和顶部边缘约束到堆栈隐藏视图的左侧、右侧和顶部边缘。
• 将堆栈视图的底部边缘限制为优先级为 999的堆栈隐藏视图的底部边缘。
• 将堆栈隐藏视图的高度约束为 0。将命名stackHidingConstraint为该约束的出口连接。在情节提要中使此约束处于非活动状态（卸载）。

再一次，要切换按钮的可见性，请设置stackHidingConstraint.isActive = !stackHidingConstraint.isActive。当约束处于活动状态时，它通过将堆栈隐藏视图的高度设置为零来隐藏按钮。由于堆栈隐藏视图剪辑其子视图，这使得子视图不可见。当约束处于非活动状态时，priority-999 底部边缘约束使堆栈隐藏视图的高度与堆栈视图相等，因此子视图可见。

它看起来像这样：

与解决方案 1 的唯一明显区别是，在解决方案 1 中，您可以看到按钮在选项卡栏下方滑动。在解决方案 2 中，它们不会在标签栏下方滑动。

你可以在这里找到我的测试项目：https : //github.com/mayoff/StackViewAnimation