UIStackView中的重叠视图

Question

我有一个水平堆栈视图，在其中添加了排列的子视图（7个单元格）。堆栈中的每个单元格都有一个圆形标记，该标记超出了视图边界（负约束）。运行时，如下所示，每个单元格都位于前一个单元格的徽章上方。我想更改顺序，以便徽章完全可见。

尝试使用Z索引，但由于在以下视图层次结构中可以看到的层不平坦而没有帮助：

任何想法或建议怎么做？

谢谢。

Answer 1

子视图数组的顺序定义了子视图的Z顺序。如果视图重叠，则索引较低的子视图将出现在索引较高的子视图之后。

这正是我在问题中所遇到的。为了克服我的特定情况，我做了一些技巧，将视图的语义更改为RTL，就像在这里看到的一样：

这不涉及一般情况，因为设备可能已在其全局设置中设置了RTL语言。对于一般情况，我想我需要检查接口语义并向我的堆栈视图施加相反的方向。

P.S。这是一种技巧，因此，关于如何以不同方式对子视图的Z顺序重新排序的任何想法都将受到欢迎！

Answer 2

@IBOutlet weak var stackView: UIStackView!

for view in stackView.arrangedSubviews {
    stackView.sendSubviewToBack(view)
}

[当我们浏览堆栈视图的排列视图（从底部到顶部）时，后面的视图（即较高的视图）被推到底部，从而颠倒了顺序：-）

Answer 3

堆栈视图确保其arrangedSubviews属性始终是其subviews属性的子集。

Documentation for arrangedSubviews

Answer 4

完全透明）。并且仅将

堆栈视图本身设置为白色。

的背景我有一个类似的问题，但是每个子视图都必须具有特定的背景。就我而言，您的黑客技术可能会有所帮助...😉谢谢！

Answer 5

extension UIStackView {

  func reverseSubviewsZIndex(setNeedsLayout: Bool = true) {
    let stackedViews = self.arrangedSubviews

    stackedViews.forEach {
      self.removeArrangedSubview($0)
      $0.removeFromSuperview()
    }

    stackedViews.reversed().forEach(addSubview(_:))
    stackedViews.forEach(addArrangedSubview(_:))

    if setNeedsLayout {
      stackedViews.forEach { $0.setNeedsLayout() }
    }
  }

}

Answer 6

经过各种尝试，我能够将其水平放置

 stackView.leadingAnchor.constraint(equalTo: stackScrollView.leadingAnchor).isActive = true
 stackView.trailingAnchor.constraint(equalTo: stackScrollView.trailingAnchor).isActive = true
 stackView.bottomAnchor.constraint(equalTo: stackScrollView.bottomAnchor).isActive = true
 stackView.heightAnchor.constraint(equalTo: stackScrollView.heightAnchor).isActive = true

 stackView.distribution = .equalSpacing
 stackView.spacing = 5
 stackView.axis = .horizontal
 stackView.alignment = .fill


 for i in 0 ..< images.count {
     let photoView = UIButton.init(frame: CGRect(x: 0, y: 0, width: 85, height: 85))

     // set button image
     photoView.translatesAutoresizingMaskIntoConstraints = false
     photoView.heightAnchor.constraint(equalToConstant: photoView.frame.height).isActive = true
     photoView.widthAnchor.constraint(equalToConstant: photoView.frame.width).isActive = true

     stackView.addArrangedSubview(photoView)
 }

 stackView.setNeedsLayout()