在 UIStackView 中设置锚点和位置

Posted 2023-03-12

【中文标题】在 UIStackView 中设置锚点和位置

【英文标题】：Setting anchorPoint and position in a UIStackView

【发布时间】：2017-10-28 23:27:06

【问题描述】：

我通过 Interface Builder（为了演示）将 1 个 UIView 添加到了 UIStackView 中。我需要在它的原点转换这个子视图，所以我将layer.anchorPoint 和layer.position 设置为CGPoint(0, 0)。当视图出现时，图层被移动到它的新anchorPoint，但在它原来的CGPoint(0.5, 0.5).位置，就好像我根本没有设置layer.position一样。

相比之下，我尝试在没有堆栈视图的情况下将相同的子视图添加到另一个 UIView，并按预期重新调整。这是 not 设置子视图的 anchorPoint 和 layer.position 的结果：

let background = UIView(frame: CGRect(x: 0, y: 0, width: 265, height: 55))
background.backgroundColor = UIColor.blue
PlaygroundPage.current.liveView = background

let stackView = UIStackView(frame: background.bounds)
background.addSubview(stackView)

let subview = UIView()
subview.backgroundColor = .red
stackView.addArrangedSubview(subview)

现在，当我在将子视图添加到堆栈视图之前设置 anchorPoint 和 position 时，只有 anchorPoint 受到尊重：

// same
let background = UIView(frame: CGRect(x: 0, y: 0, width: 265, height: 55))
background.backgroundColor = UIColor.blue
PlaygroundPage.current.liveView = background

// same
let stackView = UIStackView(frame: background.bounds)
background.addSubview(stackView)

let subview = UIView()
subview.backgroundColor = .red
subview.layer.anchorPoint = CGPoint(x: 0, y: 0) // added
subview.layer.position = CGPoint(x: 0, y: 0) // added
stackView.addArrangedSubview(subview)

print(subview.layer.position) // (132.5, 27.5)

我希望这看起来和第一张图片一样。

是否存在覆盖子视图层的position 的隐式UIStackView 约束？ IRL 我正在使用带有 Auto Layout 的 Interface Builder（我认为这并不重要，因为自 ios 8 以来 Auto Layout 对转换很友好），并且在 viewDidLayoutSubviews() 中重置 position 仍然是不可靠，因为子视图的frame 和position 在调用viewDidAppear 之前都是正确的，此时subview 被顽固地重新定位为stackView 认为合适。

如何在UIStackView 中设置视图的anchorPoint 和layer.position？

【参考方案1】：

锚点可以正常工作，因为默认是中心（0.5,0.5）， 设置 (0,0) 表示相对于位置偏移一半。 如果你想改变内部视图的位置，因为 UIStack 会自动调整位置来填充它，所以改变位置对视图没有影响 或者，你可以使用变换来改变位置：

subview.transform = CGAffineTransform(translationX: 100, y: 100)  

或添加到现有变换（默认为无变换矩阵）

subview.transform = subview.transform.translatedBy(x: 100, y: 100)

上面的代码意味着它移动位置（100,100）

您也可以将其旋转（例如向左旋转 50 度）

subview.transform = subview.transform.rotated(by: 50)

或放大：

subview.transform = subview.transform.scaledBy(x: 1.5, y: 1.2)