首页 > 解决方案 > 对齐 UITableViewHeaderFooterView 的 detailTextLabel

问题描述

我有一个UITableView并想自定义它的sectionHeader。我的目标是使用 Autolayout 使detailTextLabel 右对齐。(见照片)。很多小时我试图设置它的锚点,修改它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
}

标签: iosswiftuitableviewautolayoutuitableviewsectionheader

解决方案


使用 xib 文件创建 CustomSectionHeaderView: 在此处输入图像描述

你的班:

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
}

推荐阅读