Align detailTextLabel of UITableViewHeaderFooterView - ios

Question

I got a UITableView and want to customize its sectionHeader. My goal is to have the detailTextLabel right-Aligned using Autolayout. (See Photo). Many hours I tried to set it's anchors, modified the tableview.sectionHeaderHeight, worked with the Headers contentView but I did not get it..
Can someone please show me a way how to properly manage this? Should I create a custom UIView and then add it to the UITableViewHeaderFooterView? How can I get the font-properties of the label then?
Created with Keynote
My code looks like this, but I would not really use this as a starting point.. :)
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

Create CustomSectionHeaderView with xib file:
Your 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()
}
}
In 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
}