试图理解 tableView 的自定义部分 Header 中的 .layoutMarginsGuide 时感到困惑

Posted 2023-02-23

【中文标题】试图理解 tableView 的自定义部分 Header 中的 .layoutMarginsGuide 时感到困惑

【英文标题】：Confused in trying to understand .layoutMarginsGuide inside custom section Header for a tableView

【发布时间】：2018-11-14 20:59:12

【问题描述】：

我正在尝试为包含 textView 的表视图创建自定义节标题。我根据教程创建了一个简单的应用程序。这创建了一个工作示例。但是，当我将代码移动到我的生产应用程序时，它的布局不正确。简单的教程应用程序从 nib（没有 Main.storyboard）创建布局，生产应用程序没有。我假设这是问题的一部分。在这两种情况下，我都使用 .layoutMarginsGuide。

代码遵循自定义标头的设计。

class TextViewHeader: UITableViewHeaderFooterView 
static let reuseIdentifer = "TextViewHeaderReuseIdentifier"

let sectionTextView = UITextView.init()

override public init(reuseIdentifier: String?) 
    super.init(reuseIdentifier: reuseIdentifier)

    sectionTextView.font = UIFont.preferredFont(forTextStyle: .title2)
    sectionTextView.textColor = UIColor.blue
    sectionTextView.backgroundColor = UIColor.yellow
    sectionTextView.translatesAutoresizingMaskIntoConstraints = false

    self.contentView.addSubview(sectionTextView)
    let margins = contentView.layoutMarginsGuide
    sectionTextView.isScrollEnabled = false
    //sectionTextView.text = "Something"
    sectionTextView.frameLayoutGuide.leadingAnchor.constraint(equalTo: margins.leadingAnchor).isActive = true
    sectionTextView.frameLayoutGuide.trailingAnchor.constraint(equalTo: margins.trailingAnchor).isActive = true
    sectionTextView.frameLayoutGuide.topAnchor.constraint(equalTo: margins.topAnchor).isActive = true
    sectionTextView.frameLayoutGuide.bottomAnchor.constraint(equalTo: margins.bottomAnchor).isActive = true


required init?(coder aDecoder: NSCoder) 
    fatalError("init(coder:) has not been implemented")

 

注意布局是由以下驱动的：

 let margins = contentView.layoutMarginsGuide

为了便于跟踪 TextView 的大小和位置，我将背景设置为黄色。

  sectionTextView.backgroundColor = UIColor.yellow

在viewDidLoad中注册header需要额外编程，我已经做到了：

   override func viewDidLoad() 
    super.viewDidLoad()
    self.view.backgroundColor = UIColor.white
    self.tableView.frame = self.view.bounds
    self.tableView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    self.tableView.dataSource = self
    self.tableView.delegate = self
    self.tableView.register(TextViewHeader.self, forHeaderFooterViewReuseIdentifier: TextViewHeader.reuseIdentifer)
    self.view.addSubview(self.tableView)
    self.tableView.rowHeight = UITableViewAutomaticDimension
    self.tableView.estimatedRowHeight = 300

并替换：

   tableView(_ tableView:, titleForHeaderInSection section:).

以下内容：

   func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? 
    guard let header = tableView.dequeueReusableHeaderFooterView(withIdentifier: TextViewHeader.reuseIdentifer) as? TextViewHeader else 
        return nil
    
    header.customTextView.text = "Section \(section + 1)"
    return header
    

这可以正常工作并按预期插入带有布局的 textView。

但是，当我将编程转移到我的生产应用程序时，似乎没有发生同样的情况。在这种情况下，我将此程序化布局与 xcode 界面构建器上的布局合并。有东西干扰了布局。

在生产应用程序中，我在自定义标题设计中使用了类似的代码。 （为了完整起见，包括在下面）

class TextViewHeader: UITableViewHeaderFooterView 
static let reuseIdentifer = "TextViewHeaderReuseIdentifier"

let sectionTextView = UITextView.init()

override public init(reuseIdentifier: String?) 
    super.init(reuseIdentifier: reuseIdentifier)

    sectionTextView.font = UIFont.preferredFont(forTextStyle: .title2)
    sectionTextView.textColor = UIColor.blue
    sectionTextView.backgroundColor = UIColor.yellow
    sectionTextView.translatesAutoresizingMaskIntoConstraints = false

    self.contentView.addSubview(sectionTextView)
    let margins = contentView.layoutMarginsGuide
    sectionTextView.isScrollEnabled = false
    //sectionTextView.text = "Something"
    sectionTextView.frameLayoutGuide.leadingAnchor.constraint(equalTo: margins.leadingAnchor).isActive = true
    sectionTextView.frameLayoutGuide.trailingAnchor.constraint(equalTo: margins.trailingAnchor).isActive = true
    sectionTextView.frameLayoutGuide.topAnchor.constraint(equalTo: margins.topAnchor).isActive = true
    sectionTextView.frameLayoutGuide.bottomAnchor.constraint(equalTo: margins.bottomAnchor).isActive = true


required init?(coder aDecoder: NSCoder) 
    fatalError("init(coder:) has not been implemented")

这给出了以下布局。

查看我的故事板的 tableView 部分。我看到 Sections Header Height 设置为自动，而 Estimate for row height 设置为零。更改 Estimate 以自动更改结果：

设置：

得到的header如图所示：

更好但是textView上面的空间太大了。

尝试调查一下，我可以在休息后看到以下内容。

-8, -8 的边距来源让我感到困惑。此外，这正是我从完美运行的示例中得到的。

但是，在此休息时间进行调查时，我收到以下警告：

2018-11-14 15:21:54.086637-0500 appName[31946:1780119] [LayoutConstraints] 无法同时满足约束。 以下列表中的至少一个约束可能是一个 你不想要。试试这个：（1）查看每个约束并尝试 找出你没想到的； (2) 找到添加的代码 不需要的约束或约束并修复它。

接下来列出了几个关于leading和trailing的约束，而不是top和bottom。因此，没有明确指示要修复什么。

这里是列出的约束

 "<NSLayoutConstraint:0x600002364280 UILayoutGuide:0x6000039257a0'UIScrollView-frameLayoutGuide'.leading == UILayoutGuide:0x60000397a060'UIViewLayoutMarginsGuide'.leading   (active)>",
"<NSLayoutConstraint:0x6000023642d0 UILayoutGuide:0x6000039257a0'UIScrollView-frameLayoutGuide'.trailing == UILayoutGuide:0x60000397a060'UIViewLayoutMarginsGuide'.trailing   (active)>",
"<NSLayoutConstraint:0x60000231b840 'UIView-Encapsulated-Layout-Width' _UITableViewHeaderFooterContentView:0x7fe43a815410.width == 0   (active)>",
"<NSLayoutConstraint:0x60000231b4d0 'UIView-leftMargin-guide-constraint' H:|-(8)-[UILayoutGuide:0x60000397a060'UIViewLayoutMarginsGuide'](LTR)   (active, names: '|':_UITableViewHeaderFooterContentView:0x7fe43a815410 )>",
 "<NSLayoutConstraint:0x60000231b570 'UIView-rightMargin-guide-constraint' H:[UILayoutGuide:0x60000397a060'UIViewLayoutMarginsGuide']-(8)-|(LTR)   (active, names: '|':_UITableViewHeaderFooterContentView:0x7fe43a815410 )>"

我唯一的想法是“leftMargin”和“rightMargin”以及“.leading”和“.trailing”的混合。这可能是问题吗？但正如所讨论的，问题是顶部和底部对齐。

我对情节提要上 tableView 和 tableView Headers 设置的审查没有发现有关可能冲突的更多信息。

我可能错过了什么？

【参考方案1】：

我发现这是一个有问题的方法。 NSLayoutConstraint 问题目前超出了我的 Swift 知识范围。它似乎是由事件发生的时间驱动的。此外，有一些讨论认为它有些错误。请参阅以下内容：What is NSLayoutConstraint "UIView-Encapsulated-Layout-Height" and how should I go about forcing it to recalculate cleanly?

我决定放弃使用tableView.dequeueReusableHeaderFooterView。部分的数量将受到限制（2 或 3 个，大量使用），因此成本将最低。

因此，我实现了一个简单的方法。

   //define size of font to use 
let sectionFont = UIFont.preferredFont(forTextStyle: .title3)
let fontsize = UIFont.preferredFont(forTextStyle: .title3).pointSize

override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? 
    let headerView = UIView.init(frame: CGRect.init(x: 0, y: 0, width: tableView.frame.width, height: fontsize+10))
    let textView = UITextView()
    textView.frame = CGRect.init(x: 0, y: -10, width: headerView.frame.width-10, height: headerView.frame.height-0)
    textView.text = "Section \(section)"
    textView.font = sectionFont

    headerView.addSubview(textView)

    return headerView



override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat 
    return fontsize+10