使用 centerXAnchor 设置的 UITableViewCell 自动布局问题

Question

我正在尝试构建一个消息传递界面并遇到了这个问题。由于这是消息应用程序，消息气泡对齐前导或尾随。我想这样做，创建一个名为 bubbleView 的子视图，它将使用名为 bubbleViewCenterXConstraintValue 的计算变量对齐自身。

override var frame: CGRect {
    didSet {
        print(frame, bubbleView.frame)
        self.setNeedsLayout()
    }
}

private var bubbleViewCenterXConstraintValue: CGFloat {
    print(UIScreen.main.bounds.width, contentView.frame.width, bubbleView.frame.width, ((UIScreen.main.bounds.width - bubbleView.bounds.width) / 2))
    return ((UIScreen.main.bounds.width - bubbleView.bounds.width) / 2)
}

override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
    super.init(style: style, reuseIdentifier: reuseIdentifier)
    
    backgroundColor = .clear
    contentView.backgroundColor = .systemTeal
    
    bubbleView.addSubviews(messageLabel, hourLabel)
    
    messageLabel.leadingAnchor.constraint(equalTo: bubbleView.leadingAnchor, constant: 12).isActive = true
    messageLabel.trailingAnchor.constraint(equalTo: bubbleView.trailingAnchor, constant: -12).isActive = true
    messageLabel.topAnchor.constraint(equalTo: bubbleView.topAnchor, constant: 12).isActive = true
    
    hourLabel.trailingAnchor.constraint(equalTo: messageLabel.trailingAnchor).isActive = true
    hourLabel.topAnchor.constraint(equalTo: messageLabel.bottomAnchor, constant: 4).isActive = true
    hourLabel.bottomAnchor.constraint(equalTo: bubbleView.bottomAnchor, constant: -12).isActive = true
    
    contentView.addSubview(bubbleView)
    
    bubbleView.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 4).isActive = true
    bubbleView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -4).isActive = true
    bubbleView.centerXAnchor.constraint(equalTo: contentView.centerXAnchor, constant: bubbleViewCenterXConstraintValue).isActive = true
    bubbleView.widthAnchor.constraint(lessThanOrEqualToConstant: availableMaxWidth).isActive = true
}

但是，每当bubbleViewCenterXConstraintValue 被调用时，bubbleView 的框架为零，所以它误算了我的逻辑。逻辑现在不包括左对齐或右对齐，它只是尝试右对齐。

当我查看这些打印结果时，我意识到另一件奇怪的事情。 contentView 的宽度为 320，不等于 UIScreen.main.bounds.width(390)。

(0.0, 0.0, 320.0, 44.0) (0.0, 0.0, 0.0, 0.0)
390.0 320.0 0.0 195.0
(0.0, 0.0, 390.0, 100.66666666666667) (0.0, 0.0, 0.0, 0.0)
(0.0, 0.0, 390.0, 100.66666412353516) (243.66666666666666, 4.0, 292.6666666666667, 92.66666666666667)
(0.0, 0.0, 390.0, 100.66666412353516) (243.66666666666666, 4.0, 292.6666666666667, 92.66666666666667)

我需要一种方法来让这些自动布局代码在设置bubbleView 的框架时更新。因为我知道如果它的宽度最初是 292，那么这个代码就可以工作。我尝试了当前无效的解决方案setNeedsLayout() 并覆盖了layoutSubviews，但这也没有用。

我知道我遗漏了一些东西，解决方案就在那里，但是我现在看不到，需要一些帮助。

提前表示感谢。

注意：还找了解决方案，在网站上找不到类似的东西。如果您认为这是重复的，请随时告诉我或采取行动。

Answer 1

我认为更简单的方法是为气泡设置前导和尾随约束。这样可以很容易地决定要对齐屏幕的哪一侧。您还可以对宽度参数使用自动布局，使用基于父视图宽度的乘数使其适应任何尺寸的屏幕。

我不会在你的代码中使用它，因为它会太长，但希望下面的示例函数将展示我推荐的原则：

   func addBubble(alignLeft: Bool, offset: CGFloat) {
      let bubble = UIView()
      bubble.backgroundColor = .systemBlue
      let parentView = view.safeAreaLayoutGuide  //your parent view may be different
      parentView.addSubview(bubble)

      bubble.translatesAutoresizingMaskIntoConstraints = false
      
      //quick and dirty top and bottom constraints for the example
      bubble.topAnchor.constraint(equalTo: parentView.topAnchor, constant: 10 + offset).isActive = true
      bubble.bottomAnchor.constraint(equalTo: parentView.topAnchor, constant: 40 + offset).isActive = true

      //set the width of the bubble proportional to the size of the parent view
      bubble.widthAnchor.constraint(equalTo: parentView.widthAnchor, multiplier: 2/3).isActive = true

      // implement the left or right alignment
      if alignLeft {
         bubble.leadingAnchor.constraint(equalTo: parentView.leadingAnchor, constant: 4).isActive = true
      } else {
         bubble.trailingAnchor.constraint(equalTo: parentView.trailingAnchor, constant: -4).isActive = true
      }
   }

这样，您所要做的就是将气泡的子视图锚定到气泡的顶部/底部/前导/尾随约束，它们还将随着气泡调整大小以适应所有屏幕尺寸。