Reusable UITableHeaderFooterView Loose ImageView Orientation State - ios

Question

I have an expandable UITableView with specific cell, header and footer heights. When user taps a header, cells are started to shown below it (section expand). When user taps again, section collapse.
My problem is that when user taps the header, title becomes green and arrows (UIImageView) orient change. When I don't use dequeueReusableHeaderFooterView, everything works perfect but when I reuse the header, green title and arrow orientation doesn't look as expected on tap or scroll.
In below picture, New York's title color looks ok but arrow orientation is wrong. Also Manhattan, header is expanded but doesn't get green color and right UIImageView orientation.
P.S: I know this has been asked lots of times but I can't figure out which one is the proper way.
Header View Class:
protocol ExpandableHeaderViewDelegate {
func toggleSection(header: DistrictTableViewHeader, section: Int)
}
class DistrictTableViewHeader: UITableViewHeaderFooterView {
var delegate: ExpandableHeaderViewDelegate?
var section: Int!
let nameLabel: UILabel = {
let l = UILabel()
l.textColor = Color.DistrictsPage.headerTextColor
return l
}()
private let arrowImage: UIImageView = {
let i = UIImageView()
let image = UIImage(named: "ileri")?.withRenderingMode(UIImage.RenderingMode.alwaysTemplate)
i.image = image
i.contentMode = .scaleAspectFit
return i
}()
var isColapsed: Bool!{
didSet{
layoutSubviews()
}
}
override init(reuseIdentifier: String?) {
super.init(reuseIdentifier: reuseIdentifier)
self.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(selectHeaderAction)))
nameLabel.translatesAutoresizingMaskIntoConstraints = false
nameLabel.font = UIFont.systemFont(ofSize: 22)
nameLabel.textColor = Color.DistrictsPage.headerTextColor
contentView.addSubview(nameLabel)
nameLabel.centerYAnchor.constraint(equalTo: contentView.centerYAnchor).isActive = true
nameLabel.leftAnchor.constraint(equalTo: contentView.leftAnchor, constant: 15).isActive = true
arrowImage.tintColor = UIColor(red:0.32, green:0.36, blue:0.36, alpha:1.0)
arrowImage.translatesAutoresizingMaskIntoConstraints = false
contentView.addSubview(arrowImage)
arrowImage.centerYAnchor.constraint(equalTo: contentView.centerYAnchor).isActive = true
arrowImage.rightAnchor.constraint(equalTo: contentView.rightAnchor, constant: -20).isActive = true
arrowImage.widthAnchor.constraint(equalToConstant: 20).isActive = true
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
#objc func selectHeaderAction(gestureRecognizer: UITapGestureRecognizer) {
let cell = gestureRecognizer.view as! DistrictTableViewHeader
self.isColapsed = !isColapsed
if(!isColapsed){
let degrees : Double = 90 //the value in degrees
UIView.animate(withDuration: 0.5) { [weak self] in
self?.nameLabel.textColor = Color.Common.garantiLightGreen
self?.arrowImage.tintColor = Color.Common.garantiLightGreen
self?.arrowImage.rotate(CGFloat(degrees * .pi/180))
self?.contentView.backgroundColor = UIColor(red:0.97, green:0.97, blue:0.97, alpha:1.0)
}
}else{
let degrees : Double = 0 //the value in degrees
UIView.animate(withDuration: 0.5) { [weak self] in
self?.nameLabel.textColor = Color.DistrictsPage.headerTextColor
self?.arrowImage.tintColor = UIColor.black
self?.arrowImage.rotate(CGFloat(degrees * .pi/180))
self?.contentView.backgroundColor = UIColor.white
}
}
delegate?.toggleSection(header: self, section: cell.section)
}
func customInit(title: String, section: Int, delegate: ExpandableHeaderViewDelegate) {
self.nameLabel.text = title
self.nameLabel.accessibilityIdentifier = title
self.section = section
self.delegate = delegate
}
override func layoutSubviews() {
super.layoutSubviews()
self.contentView.backgroundColor = UIColor.white
}
}
How I initialize the header:
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
return 60
}
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let header: DistrictTableViewHeader = tableView.dequeueReusableHeaderFooterView(withIdentifier: headerId) as! DistrictTableViewHeader
//let header = DistrictTableViewHeader()
header.isColapsed = !self.cities[section].isExpanded
header.customInit(title: self.cities[section].name, section: section, delegate: self)
return header
}
How I expand/collapse:
func toggleSection(header: DistrictTableViewHeader, section: Int) {
self.cities[section].isExpanded = !self.cities[section].isExpanded
let contentOffset = self.tableView.contentOffset
self.tableView.reloadData()
}
EDIT: For the UITableView gurus, I added also a sample project :)
Sample Project Link:
https://github.com/emreond/tableViewLayoutIssue

Answer 1

After you dequeue a reusable view you must reset all changes that could have happened to it.
In this case you are setting header.isColapsed but that does not reset all the view's state that it needs to. The view state changing code in selectHeaderAction needs to also be called when the view is reused.
It will take a little refactoring to do right. Change the isColapse setter to do more:
var isColapsed: Bool!{
didSet{
if(!isColapsed){
let degrees : Double = 90 //the value in degrees
self?.nameLabel.textColor = Color.Common.garantiLightGreen
self?.arrowImage.tintColor = Color.Common.garantiLightGreen
self?.arrowImage.rotate(CGFloat(degrees * .pi/180))
self?.contentView.backgroundColor = UIColor(red:0.97, green:0.97, blue:0.97, alpha:1.0)
}else{
let degrees : Double = 0 //the value in degrees
self?.nameLabel.textColor = Color.DistrictsPage.headerTextColor
self?.arrowImage.tintColor = UIColor.black
self?.arrowImage.rotate(CGFloat(degrees * .pi/180))
self?.contentView.backgroundColor = UIColor.white
}
layoutSubviews()
}
}
And make the tapper gesture do less:
#objc func selectHeaderAction(gestureRecognizer: UITapGestureRecognizer) {
let cell = gestureRecognizer.view as! DistrictTableViewHeader
UIView.animate(withDuration: 0.5) { [weak self] in
self.isColapsed = !isColapsed
}
delegate?.toggleSection(header: self, section: cell.section)
}
I think that should fix it. Tell me if it works.
You are doing rotation wrong. Adding a CAAnimation is cool, but you can't easily cancel it when the view is reused. Instead just change the transform property and let the UIView.animate block deal with the animation at a higher level.
func rotate(_ toValue: CGFloat) {
self.transform = CGAffineTransform.init(rotationAngle: toValue)
}
Next you are reloading the table which is canceling all the animation that you want to do.
func toggleSection(header: DistrictTableViewHeader, section: Int) {
self.cities[section].isExpanded = !self.cities[section].isExpanded
let count = self.cities[section].districts.count
let indexPaths:[IndexPath] = (0..<count).map{ IndexPath.init(row: $0, section: section) }
if self.cities[section].isExpanded {
self.tableView.insertRows(at: indexPaths, with: .automatic);
}else{
self.tableView.deleteRows(at: indexPaths, with: .automatic);
}
}