可重用的UITableHeaderFooterView松散的ImageView方向状态

时间:2019-01-31 11:52:55

标签: ios swift uitableview

我有一个具有特定单元格,页眉和页脚高度的可展开UITableView。当用户点击标题时,单元格开始显示在标题下方(展开部分)。当用户再次点击时,部分折叠。

我的问题是,当用户点击标题时,标题变为绿色,并且箭头(UIImageView)改变了方向。当我不使用dequeueReusableHeaderFooterView时,一切工作都很好,但是当我重复使用标题时,绿色的标题和箭头方向在点击或滚动时看起来并不理想。

在下面的图片中,纽约的标题颜色看起来不错,但箭头方向错误。同样是在曼哈顿,标头已展开,但没有获得绿色且UIImageView方向正确。

P.S::我知道已经问过很多次了,但是我不知道哪种方法是正确的。

标题视图类:

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

}

}

我如何初始化标头:

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
}

我如何展开/折叠:

func toggleSection(header: DistrictTableViewHeader, section: Int) {
    self.cities[section].isExpanded = !self.cities[section].isExpanded
    let contentOffset = self.tableView.contentOffset
    self.tableView.reloadData()

}

编辑:对于UITableView专家,我还添加了一个示例项目:) 示例项目链接:

https://github.com/emreond/tableViewLayoutIssue

enter image description here

1 个答案:

答案 0 :(得分:0)

从可重用视图中出队后,必须重置所有可能发生的更改。

在这种情况下,您要设置header.isColapsed,但这不会重置视图所需的所有状态。重用视图时,还需要调用selectHeaderAction中的视图状态更改代码。

要做一些正确的重构。更改isColapse设置器以执行更多操作:

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()
  }
}

并使轻击手势做得更少:

@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)
}

我认为应该修复它。告诉我是否可行。


您执行的旋转错误。添加CAAnimation很酷,但是当重用视图时,您不能轻易取消它。相反,只需更改transform属性,并让UIView.animate块在更高级别处理动画。

func rotate(_ toValue: CGFloat) {
  self.transform = CGAffineTransform.init(rotationAngle: toValue)
}

接下来,您要重新加载表格,这将取消您要制作的所有动画。

 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);
  }
}
相关问题