Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

custom tableView's header view overlap the table view cells

I designed a custom view as my UITableView's header view. just like this (I just put image link here instead of image since I don't have 10 reputations.)

http://i.stack.imgur.com/KhNbE.png

Then in my UITableViewController I use this view as tableHeaderView

override func viewDidLoad() {
     tableView.tableHeaderView = headerView!
   //...other things
}

I got text from a JSON to fulfill the ContentLabel. If the text is long, the headerView will overlap cells just like below image.(short text is OK)

http://i.stack.imgur.com/gtO2g.png

Section is visible but two lines of cell have been overlapped by the headerView.I'm not sure if I did wrong constraints or code on ContentLabel. Below is the code I configured the contentLabel in TopicHeaderView.swift

var content: String? {
  didSet {
    self.contentLabel.text = content!

    self.setNeedsUpdateConstraints()
    self.updateConstraintsIfNeeded()
    self.setNeedsLayout()
    self.layoutIfNeeded()

  }
}
func setFrameHeight(height: CGFloat) {
  var frame = self.frame
  frame.size.height = height
  self.frame = frame
}

override func layoutSubviews() {
  super.layoutSubviews()
  self.contentLabel.preferredMaxLayoutWidth =     self.contentLabel.alignmentRectForFrame(contentLabel.frame).width
  self.titleLabel.preferredMaxLayoutWidth = self.titleLabel.bounds.size.width
  self.authorLabel.preferredMaxLayoutWidth = self.authorLabel.bounds.size.width
  self.setFrameHeight(CGRectGetMaxY(contentLabel.frame) + 8)

}  

I browsed similar questions in SO but seems I can't find a solution to fix my problem. Can anyone help on this?

EDITED:

I logged the origin CGPoint of my first tableView cell and headerView's height. It shows the right number which means the first cell is right next to the header view vertically. There is a 22 points gap because of the height of section of course.

headerheight:600.0
first cell's y: 622.0

So maybe it's the label problem that its height is too big to exceed the bounds of TableView headerView? I'm not sure.

EDITED:

Strange things happen. I logged the y value of headerView's bottom,contentLabel's bottom and first UITableViewCell's origin. Please see the image from the link in the question comment below(still need 10 reputation)

As you can see, from the value in console, the view sequence from top should be "contentLabel's bottom(value:224) - headerView's bottom bounds(value: 232) - first cell's origin(value:254)". But in simulator, the sequence is totally messed up.It turns "headerView's bottom bounds - first cell's origin - contentLabel's bottom"

I really appreciate if anyone can help on this.

like image 249
behumble Avatar asked Apr 24 '15 08:04

behumble


1 Answers

Problem is, that UITableView does not automatically change positions of cells when its headerView's height changes. Thus you need to reload UITableView every time TopicHeaderView.content changes.

like image 188
Jakub Vano Avatar answered Oct 10 '22 01:10

Jakub Vano