Varying length cells in TableView make the view snap while scrolling Swift - ios

So I have a TableView with 2 prototype cells. Here is my code:
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
if indexPath.row == 0 {
let cell = tableView.dequeueReusableCellWithIdentifier("Cell", forIndexPath: indexPath) as! ItemDetailsCell
cell.centerImage.image = mainImage
cell.heading.text = detailsHeadings[indexPath.row]
let headingString = detailsHeadings[indexPath.row]
cell.body.text = details[headingString]
tableView.rowHeight = cell.labelBlack.frame.height + 40
return cell
} else {
let cell = tableView.dequeueReusableCellWithIdentifier("Cell2", forIndexPath: indexPath) as! ItemDetailsCell
cell.heading.text = detailsHeadings[indexPath.row]
let headingString = detailsHeadings[indexPath.row]
cell.body.text = details[headingString]
let bodyString = details[headingString]
let labelWidth = Int(cell.body.frame.width)
println(labelWidth)
let label = UILabel(frame: CGRect(x: 0, y: 0, width: labelWidth, height: 10000))
label.text = bodyString
label.numberOfLines = 100
label.font = UIFont(name: "OpenSans-Light", size: 12.0)
label.sizeToFit()
tableView.rowHeight = label.frame.height + 3
return cell
}
}
So the second prototype cell has just two labels with the values being assigned from a Dictionary. The cell size needs to expand or contract based upon how many lines of text there are. In auto layout I have the number of lines set to 0 so it will pick however many lines are needed. This works fine except when you scroll within the app it will snap the view up as users scroll back up from the bottom. Is there a way to avoid this?
Thanks in advance for any help.

I found this actually after spending some more time looking:
http://candycode.io/automatically-resizing-uitableviewcells-with-dynamic-text-height-using-auto-layout/
It gave me what I needed. I removed the parts of my code that set the rowHeight and then used the viewDidLoad method as well as auto layout to constrain my cell sizes and after a bit of trial and error it is working without snapping to place when you scroll.

You are changing the rowHeight of the tableview. That's most likely very wrong. The rowHeight of the tableView is the default for all rows that don't have their own height, so you are effectively changing the height of all cells.
You should use the delegate method tableView:heightForRowAtIndexPath:

Related

UITableViewCell subviews are displaying outside of cell

In a section of my UITableView, there are 5 cells, three of which have been configured to expand/collapse to provide a more detailed view when selected. One of these cells shows a diagram of a number of small squares, which displays perfectly, until another cell is expanded, like this:
When the cell is collapsed, however, the subviews in the cell display in different cells, in different sections, like this:
and this:
To create the subviews in the cell, this is my code in the cellForRow method, which just uses an array of UIViews:
for vote in vote_array {
cell.contentView.addSubview(vote as? UIView ?? UIView.init(frame: CGRect.init(x: 0, y: 0, width: 0, height: 0)))
}
I tried removing all the subviews before I added them by doing this, but it doesn't change anything:
for subview in cell.contentView.subviews {
subview.removeFromSuperview()
}
Edit: This is inside a switch statement, but here is the relevant cell/case cellForRow:
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
cell.contentView.clipsToBounds = true
cell.clipsToBounds = true
let vote_array = getVoteArray()
for subview in cell.contentView.subviews {
subview.removeFromSuperview()
}
for case let vote as UIView in vote_array {
cell.contentView.addSubview(vote)
}
Edit:
The core of getVoteArray:
func getVoteArray() -> NSMutableArray {
var i = 0
var x = 20
var y = 4
let blockViews : NSMutableArray = []
for color in blocks {
let block = UIView.init(frame: CGRect.init(x: x, y: y, width: 20, height: 20))
block.backgroundColor = color as? UIColor
blockViews.add(block)
x = x + 24
i = i + 1
if i == num_blocks_per_row { i = 0; y = y + 24; x = 20 }
}
diagramHeight = y + 24
return blockViews
}
I can't seem to figure out why the subviews are generating randomly all over the tableView.
Ended up adding
for case let cell as UITableViewCell in tableView.subviews {
for subview in cell.contentView.subviews {
if subview.tag == 115 {
subview.removeFromSuperview()
}
}
}
to my didSelectRowAt method, after adding the tag when each view is created. I'm still not sure why the views were being added to different cells, but this got rid of them at least.
Try to implement unique ReuseIdentifiers for collapsed and expanded states.
If the cell is collapsed then don't load all those views in it by dequeuing a collapsedCell where the height of all those UIViews is either 0 or they are not added to subview.
If the cell is expanded than deque a expandedCell where the views are layed out as in the first screenshot.
After expanding and or collapsing call tableview.reloadData()
It used to be a long long time ago that UIViews clipped their children, but that hasn't been true for a very long time. If you want clipping on you need to either change UIView.clipsToBounds to true or use the underlying CALayer property maskToBounds.
cell.contentView.clipsToBounds = true
Or you can check the box in the storyboard/nib.

Swift TableViewCells not showing up

I got a ViewController, with two UITableView in it.
They both get data from the same object, but from different arrays inside that object.
My second Tableview doesn't show me all the items, only 5.
The TableViews are both dynamic and size themself.
Here is my cellForRowAt function:
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
if tableView == tableViewSteps, //This is the table that doesn't show right
let cell = tableView.dequeueReusableCell(withIdentifier: "stepsCell", for: indexPath) as? StepsTableViewCell {
let text = detailItem?.itemStepAr[indexPath.row] as! String
cell.textAreaOutlet.text = "Schritt \(indexPath.row + 1) \n\(text)"
let textAsNSString = cell.textAreaOutlet.text as NSString
let lineBreakRange = textAsNSString.range(of: "\n")
let newAttributedText = NSMutableAttributedString(attributedString: cell.textAreaOutlet.attributedText)
let boldRange: NSRange
if lineBreakRange.location < textAsNSString.length {
boldRange = NSRange(location: 0, length: lineBreakRange.location)
} else {
boldRange = NSRange(location: 0, length: textAsNSString.length)
}
newAttributedText.addAttribute(NSAttributedString.Key.font, value: UIFont.preferredFont(forTextStyle: UIFont.TextStyle.headline), range: boldRange)
cell.textAreaOutlet.attributedText = newAttributedText
let fixedWidth = cell.textAreaOutlet.frame.size.width
let newSize = cell.textAreaOutlet.sizeThatFits(CGSize(width: fixedWidth, height: CGFloat.greatestFiniteMagnitude))
cell.textAreaOutlet.frame.size = CGSize(width: max(newSize.width, fixedWidth), height: newSize.height)
cell.textAreaOutlet.isScrollEnabled = false
tableStepsHeight = tableStepsHeight + Int(newSize.height)
cell.textAreaOutlet.textColor = UIColor.lightGray
tableViewSteps.frame = CGRect(x:0, y: currentViewHeight + 20, width: 375, height: tableStepsHeight)
changeScrollHeight()
return cell
}
else {
let cell = tableView.dequeueReusableCell(withIdentifier: "ingredsCell")! //1.
let text = detailItem?.itemIngredAr[indexPath.row]
cell.textLabel?.text = text as? String
cell.textLabel?.font = UIFont(name: "Futura-Medium", size: 17)
cell.textLabel?.textColor = UIColor.lightGray
return cell
}
}
as commented, the first tableview is the one, that doesn't work properly.
It only runs 5 times, when I watch it with the debugger, but there are more Items in the Array.
Edit:
Here is my numberOfRowsInSection function
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
if (tableView == tableViewSteps) {
return detailItem?.itemStepAr.count ?? 0
}
else {
return detailItem?.itemIngredAr.count ?? 0
}
}
Edit 2:
When I enable scrolling in my TableView and then try to scroll, all the items appear. But the scrolling should be disabled, because it automatic resizes (which works)
Final edit:
I added like some more height to the tableViewand enabled scroll (but disabled the bounce, so u don't see anything from the scroll)
Now it loads properly and everything works fine
A UITableView works with recycling UITableViewCells. This means that a tableview will only load the visible cells first, and only when you scroll, will it load more cells (by recycling the old cells).
The issue I can see is that you may try to get the height of the tableview, to update a height constraint (so the tableview shows in its entirety). But that may be an incorrect calculation (as said before, it only instantiates the first x cells, so it can't know the height of the remaining cells). Also, this calculation should never be performed from cellForRowAt, as that method should never do things outside the cell (unless you want to know when a cell has become visible).
You can fix this by making your cells all have a predefined height, and then multiplying that by the number of cells.
If you have self-sizing cells, it can't be done (read: it can be done, but it's too unwieldy and inefficient to be practical).
You could try to look into taking all other views that should scroll above and below the tableview, into tableviewcells. Then you can just use a regular tableview, no fancy height constraints and calculations needed.

UITableViewCell wrong content width

i'm using tableview in iOS 9, Swift 2
I don't understand why , when i create a table view with simple cells, i get a wrong width of the contentview, even if i set container view to 1000.
The cell width is exactly 1000, but the textLabel inside is less than 1000. Also separators are centered and with wrong width.
How can i get my cells displayed correctly , and covering the entire container view?
Everything is created programmatically.
Here is my code:
if tableView == nil {
tableView = UITableView(frame: CGRect(x: 0, y: 44/*88*/, width: self.view.bounds.size.width, height: self.view.bounds.size.height - 44/*88*/), style: UITableViewStyle.Plain)
tableView!.delegate = self
tableView!.backgroundColor = .clearColor()
tableView!.dataSource = self
tableView!.rowHeight = 40.0
tableView!.allowsSelection = false
tableView!.registerClass(UITableViewCell.self, forCellReuseIdentifier: "cell")
view.addSubview(tableView!)
tableView!.reloadData()
}
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
var MyIdentifier: String = "MyReuseIdentifier"
var cell: UITableViewCell? = tableView.dequeueReusableCellWithIdentifier(MyIdentifier)
if cell == nil {
cell = UITableViewCell(style: .Default, reuseIdentifier: MyIdentifier)
}
cell!.textLabel!.text = "Test"
cell!.backgroundColor = .clearColor()
cell!.textLabel!.textColor = .blackColor()
return cell!
}
tableView!.cellLayoutMarginsFollowReadableWidth = false
This is the solution!
It is not necessary to set contentInsets.
While the cells's width is the width of the entire view, it's content view is inset on all sides by (I think) 8 points, so it makes sense for the label not to be across the whole screen
To have a label that goes across the entire width of the screen create a custom cell class and add constraints to its label to account for this. (Label's leading to content view leading = -8.0)
You can check
tableView.contentInset
And then update left inset. Also, check that you have not given any constraint, like leadingSpace. Or margin to the UITableView itself. Similarly you have
cell.separatorInset
By default there is left padding of 5, so make this 0.

Changing the height of a dynamic-height UITableViewCell after it's already appeared

I followed this tutorial to create a dynamic height UITableViewCell.
My prototype cell has 1 label (pretty simple). That label has constraints set to "0" for all sides of the cell edges. That label has numberOfLines = 0 and wraps the word.
In my UITableView setup, I do this:
self.tableView.rowHeight = UITableViewAutomaticDimension
self.tableView.estimatedRowHeight = 100.0 //some random number
Basically, everything works. Each cell has its own different height.
The problem arises when I update that label with different text. The height of the cell stays the same, and the text just gets truncated OR white space appears.
Is there a way to tell the cell to "redraw" itself so that it calculates the height again?
Ideally, I'd like to do this inside the UITableViewCell class, since that's where it receives a notification to update the label text.
You have to implements estimatedHeightForRowAtIndexPath and calculate your label's size.
for example :
override func tableView(tableView: UITableView,
estimatedHeightForRowAtIndexPath
indexPath: NSIndexPath) -> CGFloat {
let model = YourModelArray[indexPath.row]
// Label fontName and size
let attributes = [
NSFontAttributeName : UIFont(name: "FontName-Regular", size: 16) as! AnyObject]
let nsStringText = model.text as! NSString
// Calculate the size here
//--------------------//
//--10--UILabel--10--//
//-----Element------//
//------------------//
let size = nsStringText.
boundingRectWithSize(CGSize(width: self.tableView.frame.width - 20,
height: 1000),
options:[NSStringDrawingOptions.UsesLineFragmentOrigin,
NSStringDrawingOptions.UsesFontLeading],
attributes: attributes, context: nil)
// Basically add other elements heights and vertical Spacing between them
return size.height + element.frame.height + verticalSpacingBetweenLabelAndElement
}

reusing a cell in table view in the wrong way? my rows get repeated values when scrolling on my UITableView

I'm trying to implement a table by code, so far so good but when I scroll down and up in my table my rows went crazy, I did a little research and I think its because of the way I reuse my cells, but the examples I found were all in Obj- C, So could you please help me to understand the problem? Here are my function where I implement the cells:
override func tableView(tableView: (UITableView!), cellForRowAtIndexPath indexPath: (NSIndexPath!)) -> UITableViewCell{
let sectionA = seccionesDiccionario[indexPath.section]
let sectionName = tableDataSwiftDictionary[sectionA]!
var cell: UITableViewCell? = tableView.dequeueReusableCellWithIdentifier("CellId") as? UITableViewCell
if cell == nil {
cell = UITableViewCell(style: UITableViewCellStyle.Default, reuseIdentifier: "CellId")
cell!.backgroundColor = UIColor.clearColor()
cell!.textLabel?.textColor = UIColor.darkTextColor()
let selectedView:UIView = UIView(frame:CGRect(x: 0, y: 0, width: cell!.frame.size.width, height: cell!.frame.size.height))
selectedView.backgroundColor = UIColor.orangeColor().colorWithAlphaComponent(0.3)
cell!.selectedBackgroundView = selectedView
cell!.textLabel?.text = sectionName[indexPath.row]
cell!.textLabel?.numberOfLines = 0
cell!.textLabel?.lineBreakMode = NSLineBreakMode.ByWordWrapping
cell!.textLabel?.sizeToFit()
}
return cell!
}
Thank you so much.
when I scroll down and up in my table my rows went crazy
what do you mean by 'went crazy'.
One thing that I can see in the above code: You should move the text assignment out of the if statement. You want the 'textLabel' to show the String in the 'sectionName' array at the given indexPath.row. Currently, you are creating some cells and then - when you start scrolling your tableView - the cells are reused but the textLabel's text is not set, so it will always show its initial value.
Move this line
cell!.textLabel?.text = sectionName[indexPath.row]
out of the if{} block. Maybe that's all you need to do here.
EDIT
btw: since you're calling sizeToFit on the textLabel, I assume you want the cell to be high enough to display all the text. Note that sizeToFit will not be enough in order to achieve that. You'll have to either use Auto-sizing cells using AutoLayout (> iOS8) or implement the tableView:heightForRowAtIndexPath: delegate method and return the calculated cell height there.

Resources