ios - 对齐 UITableViewHeaderFooterView 的 detailTextLabel

Question

我有一个 UITableView 并且想自定义它的 sectionHeader。我的目标是使用自动布局使 detailTextLabel 右对齐。 (见照片)。许多小时我试图设置它的 anchor ，修改 tableview.sectionHeaderHeight，使用 Headers contentView 但我没有得到它..

有人可以告诉我如何正确管理它吗？我应该创建自定义 UIView 然后将其添加到 UITableViewHeaderFooterView 吗？那么如何获取标签的字体属性呢？

使用 Keynote 创建

---

我的代码看起来像这样，但我不会真的以此为起点.. :)

class GSTableHeaderView: UITableViewHeaderFooterView, ReusableView {

  override init(reuseIdentifier: String?) {
    super.init(reuseIdentifier: reuseIdentifier)
  }

  func configure() {
    setupSubviews()
    setupConstraints()
  }

  func setupSubviews() {
    guard let detailTextLabel = detailTextLabel, let textLabel = textLabel else { return }
    contentView.addSubview(detailTextLabel)
  }

  func setupConstraints() {
    guard let detailTextLabel = detailTextLabel, let textLabel = textLabel else { return }
    detailTextLabel.anchor(top: nil, leading: nil, bottom: contentView.bottomAnchor, trailing: contentView.trailingAnchor, paddingTop: 0, paddingLeading: 0, paddingBottom: 0, paddingTrailing: 16, width: 0, height: 0)
    detailTextLabel.centerYAnchor.constraint(equalTo: textLabel.centerYAnchor).isActive = true
  }

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

---

lazy var tableView: UITableView = {
    let tableview = UITableView(frame: .zero, style: .grouped)
    tableview.dataSource = self
    tableview.delegate = self
    tableview.showsHorizontalScrollIndicator = false
    tableview.rowHeight = 44
    tableview.sectionHeaderHeight = 70
    tableview.estimatedSectionHeaderHeight = 70
    tableview.isScrollEnabled = false
    tableview.isUserInteractionEnabled = true
    tableview.register(GSAltDetailTableViewCell.self, forCellReuseIdentifier: GSAltDetailTableViewCell.reuseIdentifier)
    tableview.register(GSTableHeaderView.self, forHeaderFooterViewReuseIdentifier: GSTableHeaderView.reuseIdentifier)
    return tableview
}()

func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let header = tableView.dequeueReusableHeaderFooterView(withIdentifier: GSTableHeaderView.reuseIdentifier) as! GSTableHeaderView
    header.textLabel?.text = "Details"
    header.detailTextLabel?.text = "Expand all"
    header.tag = section

    header.configure()
    return header
}

Answer 1

使用 xib 文件创建 CustomSectionHeaderView:

你的类(class):

class CustomSectionHeaderView: UIView {

    @IBOutlet weak var titleLabel: UILabel!
    @IBOutlet weak var detailLabel: UILabel!

    class func fromNib() -> CustomSectionHeaderView {
        return UINib(nibName: String(describing: self), bundle: nil).instantiate(withOwner: nil, options: nil)[0] as! CustomSectionHeaderView
    }

    override func awakeFromNib() {
        super.awakeFromNib()

    }
}

在 ViewContoller 中:

var headerSectionView = CustomSectionHeaderView.fromNib()

func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {

    headerSectionView.titleLabel.text = "TITLE"
    headerSectionView.detailLabel.text = "DETAILS"

    //or if you need 
    //headerSectionView.detailLabel.isHidden = true

    return headerSectionView
}