I'm trying to make table view with random numbers of labels in. Everything is working till I try too scroll it. Than many some of cells appear in one place. It looks like this:
Screen from simulation
To make random row height in viewDidLoad() I put this:
tableView.estimatedRowHeight = 50.0
tableView.rowHeight = UITableViewAutomaticDimension
The code going to write randoms number of labels with random number of lines is here:
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "HarvestPlan", for: indexPath) as! HarvestPlanCell
let currentSpecies = harvestPlan[indexPath.row]
var kindLabels = [UILabel]()
cell.kindsNamesView.bounds.size.width = 100
for kind in currentSpecies.kinds {
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
label.numberOfLines = 0
label.text = kind.fullName
label.bounds.size.width = 100
label.sizeToFit()
label.bounds.size.width = 100
cell.kindsNamesView.addSubview(label)
kindLabels.append(label)
}
var previous: UILabel!
for label in kindLabels {
label.widthAnchor.constraint(equalToConstant: 100).isActive = true
label.heightAnchor.constraint(equalToConstant: label.bounds.height).isActive = true
label.leadingAnchor.constraint(equalTo: cell.kindsNamesView.leadingAnchor).isActive = true
if previous == nil {
label.topAnchor.constraint(equalTo: cell.kindsNamesView.topAnchor).isActive = true
}
if previous != nil {
label.topAnchor.constraint(equalTo: previous.bottomAnchor).isActive = true
}
if label == kindLabels.last {
label.bottomAnchor.constraint(equalTo: cell.kindsNamesView.bottomAnchor).isActive = true
}
previous = label
}
return cell
Someone have some idea how to repair it? I'm looking for answer since one week and I did't find anything about it...
Thank you #Paulw11, prepareForReuse was this what I was looking for. If someone have similar problem, the answer is code below added to UITableViewCell:
override func prepareForReuse() {
super.prepareForReuse()
for view in kindsNames.subviews { //take all subviews from your view
view.removeFromSuperview() //delete it from you view
}
}
Cheers
Related
As the title says, I'm trying to display the following layout:
As you see, the dynamic stack view is a container where content is added dynamically. This content is variable and is decided on run time. Basically, it can be webviews (with variable content inside), ImageViews (with variable height), and videos (this view would have a fixed view).
I configured the CellView with automatic row height, and provided an estimated row height, both in code and in Xcode. Then on the tableView_cellForRow at the method of the ViewController, the cell is dequeued and the cell is rendered with content.
During this setup process, the different labels and views are filled with content, and the dynamic container too. The webviews are added to the stackview with the following code:
var webView = WKWebView(frame: .zero, configuration: webConfiguration)
webView.scrollView.isScrollEnabled = false
webView.navigationDelegate = myNavigationDelegate
webView = addContentToWebView(content, webView)
container.addArrangedSubview(webView)
I'm testing this with only a webview inside the stackview and having already problems with the height of the row.
The webview is rendered correctly inside the stackview, but not completely (the webview was bigger as the estimated rowheight). I used the navigation delegate to calculate the height of the added webview and resize the StackContainer accordingly, with the following code:
webView.evaluateJavaScript("document.readyState", completionHandler: { (complete, error) in
if complete != nil {
webView.evaluateJavaScript("document.body.scrollHeight", completionHandler: { (height, error) in
let h = height as! CGFloat
print("Height 3 is \(h)")
self.dynamicContainerHeightContraint.constant = h
})
}
})
And indeed, the stackcontainer is resized and expanded to match the height of the webview that is inside.
But the row remains with the same estimated height, and if the webview is very big in height, then all the other views disappear (they are pushed outside the bounds of the row.
Is there a way to tell the row to autoresize and adapt to its contents? Or maybe I'm using the false approach?
I suppose the problem is that the height of the views added to the stackview is not known in advance, but I was expecting a way to tell the row to recalculate its height after adding all the needed stuff inside...
Thank you in advance.
Table views do not automatically redraw their cells when a cell's content changes.
Since you are changing the constant of your cell's dynamicContainerHeightContraint after the cell has been rendered (your web view's page load is asynchronous), the table does not auto-update -- as you've seen.
To fix this, you can add a "callback" closure to your cell, which will let the cell tell the controller to recalculate the layout.
Here is a simple example to demonstrate.
The cell has a single label... it has a "label height constraint" var that initially sets the height of the label to 30.
For the 3rd row, we'll set a 3-second timer to simulate the delayed page load in your web view. After 3 seconds, the cell's code will change the height constant to 80.
Here's how it looks to start:
Without the callback closure, here's how it looks after 3 seconds:
With the callback closure, here's how it looks after 3 seconds:
And here's the sample code.
DelayedCell UITableViewCell class
class DelayedCell: UITableViewCell {
let myLabel = UILabel()
var heightConstraint: NSLayoutConstraint!
// closure to tell the controller our content changed height
var callback: (() -> ())?
var timer: Timer?
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
commonInit()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
commonInit()
}
func commonInit() -> Void {
contentView.clipsToBounds = true
myLabel.translatesAutoresizingMaskIntoConstraints = false
contentView.addSubview(myLabel)
let g = contentView.layoutMarginsGuide
// we'll change this dynamically
heightConstraint = myLabel.heightAnchor.constraint(equalToConstant: 30.0)
// use bottom anchor with Prioirty: 999 to avoid auto-layout complaints
let bc = myLabel.bottomAnchor.constraint(equalTo: g.bottomAnchor)
bc.priority = UILayoutPriority(rawValue: 999)
NSLayoutConstraint.activate([
// constrain label to all 4 sides
myLabel.topAnchor.constraint(equalTo: g.topAnchor),
myLabel.leadingAnchor.constraint(equalTo: g.leadingAnchor),
myLabel.trailingAnchor.constraint(equalTo: g.trailingAnchor),
// activate bottom and height constraints
bc,
heightConstraint,
])
}
func fillData(_ str: String, testTimer: Bool) -> Void {
myLabel.text = str
// so we can see the label frame
// green if we're testing the timer in this cell
// otherwise yellow
myLabel.backgroundColor = testTimer ? .green : .yellow
if testTimer {
// trigger a timer in 3 seconds to change the height of the label
// simulating the delayed load of the web view
timer = Timer.scheduledTimer(timeInterval: 3.0, target: self, selector: #selector(self.heightChanged), userInfo: nil, repeats: false)
}
}
#objc func heightChanged() -> Void {
// change the height constraint
heightConstraint.constant = 80
myLabel.text = "Height changed to 80"
// run this example first with the next line commented
// then run it again but un-comment the next line
// tell the controller we need to update
//callback?()
}
override func willMove(toSuperview newSuperview: UIView?) {
if newSuperview == nil {
timer?.invalidate()
}
}
}
DelayTestTableViewController UITableViewController class
class DelayTestTableViewController: UITableViewController {
override func viewDidLoad() {
super.viewDidLoad()
tableView.register(DelayedCell.self, forCellReuseIdentifier: "cell")
}
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 5
}
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! DelayedCell
// we'll test the delayed content height change for row 2
let bTest = indexPath.row == 2
cell.fillData("Row \(indexPath.row)", testTimer: bTest)
// set the callback closure
cell.callback = { [weak tableView] in
guard let tv = tableView else { return }
// this will tell the tableView to recalculate row heights
// without reloading the cells
tv.performBatchUpdates(nil, completion: nil)
}
return cell
}
}
In your code, you would make the closure callback after this line:
self.dynamicContainerHeightContraint.constant = h
I wish to have 2 labels on custom table view cell. First label should be on left 15 points away from left margin and 2nd label should be on right 15 points away from right margin. It can grow internally. Since the label is not going to display lots of data, it surely won't overlap on each other.
I am using stack view. Below are the images for my custom xib file. Number of lines for both the label is set to 1. When I launch, I see a blank cell without the labels. What is missing?
EDIT: Adding more details. I updated distribution on UIStackView to Fill Equally and updated alignment for 2nd label i.e start time label to right. I am seeing the data on the cell now, but 2nd label is not getting aligned to right.
Code in cellForRow:
let cell = tableView.dequeueReusableCell(withIdentifier: "displayStartTime") as! ScheduleDisplayStartTimeCustomCell
cell.selectionStyle = UITableViewCell.SelectionStyle.gray
cell.titleLabel.text = "Start"
cell.timeLabel.text = startTime
return cell
This is how it looks now after the edit:
Storyboard solution:
You can select the distribution for the StackView to equal spacing in the storyboard, with the default spacing value. The Labels only need the height contraint after that (or you could set the height for the StackView), and will be positioned to the sides of the StackView.
Resulting cell
The text alignment in the Label won’t matter, as the Label will be only as wide as needed.
I do not use storyboards that much but I know this works.
First you have to register the cell in your viewDidLoad:
tableView.register(ScheduleDisplayStartTimeCustomCell.self, forCellReuseIdentifier: "displayStartTime")
Then you can programmatically create a custom cell like this:
class ScheduleDisplayStartTimeCustomCell: UITableViewCell {
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
setupView()
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
let startLabel: UILabel = {
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
label.numberOfLines = 1
label.textAlignment = .left
return label
}()
let timeLabel: UILabel = {
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
label.numberOfLines = 1
label.textAlignment = .right
return label
}()
func setupView() {
addSubview(startLabel)
addSubview(timeLabel)
NSLayoutConstraint.activate([
startLabel.centerYAnchor.constraint(equalTo: centerYAnchor),
startLabel.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 15),
timeLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -15),
timeLabel.centerYAnchor.constraint(equalTo: centerYAnchor)
])
selectionStyle = UITableViewCell.SelectionStyle.gray
}
}
And finally you would set your cells like this :
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "displayStartTime") as! ScheduleDisplayStartTimeCustomCell
cell.startLabel.text = "Start"
cell.timeLabel.text = startTime
return cell
}
I have had similar issues in the past, the best solution I found it to assign a BackgroundColor to the labels (Blue, Red) and the StackView (Black). Then I see if the problem is with the constraints, or the UILabel text alignment properties.
Also, I noticed that you have an extension to UIViews, there may be something in there that is causing the problem.
I'm trying to add a subview to each cell (message) of my collectionView (JSQMessagesViewController) to display time of my message, something like this:
Here is my code:
override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = super.collectionView(collectionView, cellForItemAt: indexPath) as! JSQMessagesCollectionViewCell
let message = messages[indexPath.item]
let timeLabel = UILabel()
timeLabel.frame = cell.textView.frame
timeLabel.text = "abc"
timeLabel.textColor = .blue
cell.addSubview(timeLabel)
if message.senderId == senderId { // 1
cell.textView?.textColor = UIColor.black // 3
cell.avatarImageView.image = self.avatars.0.image
cell.avatarImageView.layer.cornerRadius = cell.avatarImageView.frame.size.height / 2
cell.avatarImageView.clipsToBounds = true
} else {
cell.textView?.textColor = UIColor.black // 2
cell.avatarImageView.image = self.avatars.1.image
cell.avatarImageView.layer.cornerRadius = cell.avatarImageView.frame.size.height / 2
cell.avatarImageView.clipsToBounds = true
}
return cell
}
But it adds me 2 labels:
Why there are 2 labels? And how can I add this label particularly to the bottom-right of my message? Thanks in advance!
Check JSQMessagesCollectionViewCellIncoming.nib and JSQMessagesCollectionViewCellIncoming.nib and adjust the Cell bottom label as per your need to make it look like your design.Adjust Autolayout constraint and done.
Problem 1
Basically, you are creating every time new instance of label.
let timeLabel = UILabel()
timeLabel.frame = cell.textView.frame
timeLabel.text = "abc"
timeLabel.textColor = .blue
Due to the concept of reuses, the cell will reuse everything for the next time. So when you add the subview of timeLabel for the first time that is ready to reuse for the next time. and you are adding again it let timeLabel = UILabel() while the label already there and you are putting a new instance every time.
Solution 1
You have to add the subview once and reuse it by using the tag.
Declare the let timeLabel :UILabel? at class level means where your all variables are declare and check its reference in the cellForItemAt atIndexPath like
if timeLabel == nil {
timeLabel = UILabel()
timeLabel.frame = cell.textView.frame
timeLabel.text = "abc"
timeLabel.textColor = .blue
timeLabel.tag = 766
cell.addSubview(timeLabel)
}
And last get it with the tag in the cellForItemAt atIndexPath
Problem 2
That is not in the bottom right because after awakeFromNib() in JSQMessagesCollectionViewCell this is not adding means label adds before setupLayout.
Solution 2
A: You have to add the constraint manually.
B: OR you can try by setting the frame at last line before returning cell.
I have a UICollectionView with 2 sections. I want to select the cell when the user taps on it.
My code runs correctly every time a user taps on the cell, the cell become smaller and a checkmark appears in it ( it's the imageView I add as subview of the cell). The problem is that if I tap a cell on the first section, it selects another cell in the second section. This is weird as I use the indexPath.
This is my code:
func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
// handle tap events
let cell = collectionView.cellForItemAtIndexPath(indexPath)
let centerCell = cell?.center
if cell!.frame.size.width == cellWidth {
cell?.frame.size.width = (cell?.frame.size.width)!/1.12
cell?.frame.size.height = (cell?.frame.size.height)!/1.12
cell?.center = centerCell!
let imageView = UIImageView()
imageView.image = MaterialIcon.check?.imageWithColor(MaterialColor.white)
imageView.backgroundColor = MaterialColor.blue.accent2
imageView.frame = CGRectMake(1, 1, 20, 20)
imageView.layer.cornerRadius = imageView.frame.height/2
imageView.clipsToBounds = true
if indexPath.section == 0 {
imageView.tag = indexPath.row+4000
} else {
imageView.tag = indexPath.row+5000
}
print("IMAGEVIEW TAG: ",imageView.tag)
cell?.addSubview(imageView)
}
}
Be sure to have the multiple selection property on collectionView set to true in your viewDidLoad() or in storyboard
collectionView?.allowsMultipleSelection = true
I recently posted a question about a UITableView with custom UITableCells that was not smooth when the cell's subviews were positioned with AutoLayout. I got some comments suggesting the lack of smoothness was due to the complex layout of the cells. While I agree that the more complex the cell layout, the more calculation the tableView has to do to get the cell's height, I don't think 10-12 UIView and UILabel subviews should cause the amount of lag I was seeing as I scrolled on an iPad.
So to prove my point further, I created a single UIViewController project with a single UITableView subview and custom UITableViewCells with only 2 labels inside of their subclass. And the scrolling is still not perfectly smooth. From my perspective, this is the most basic you can get - so if a UITableView is still not performant with this design, I must be missing something.
The estimatedRowHeight of 110 used below is a very close estimate to the actual row height average. When I used the 'User Interface Inspector' and looked at the heights of each cell, one by one, they ranged from 103 - 124.
Keep in mind, when I switch the code below to not use an estimatedRowHeight and UITableViewAutomaticDimension and instead implement func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {, calculating the height with frame values, the UITableView scrolls like butter.
Screenshot of App (for reference)
Source code of the App (where the scrolling is not perfectly smooth)
// The custom `Quote` object that holds the
// properties for our data mdoel
class Quote {
var text: String!
var author: String!
init(text: String, author: String) {
self.text = text
self.author = author
}
}
// Custom UITableView Cell, using AutoLayout to
// position both a "labelText" (the quote itself)
// and "labelAuthor" (the author's name) label
class CellQuote: UITableViewCell {
private var containerView: UIView!
private var labelText: UILabel!
private var labelAuthor: UILabel!
override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
contentView.backgroundColor = UIColor.whiteColor()
containerView = UIView()
containerView.backgroundColor = UIColor(
red: 237/255,
green: 237/255,
blue: 237/255,
alpha: 1.0
)
contentView.addSubview(containerView)
containerView.translatesAutoresizingMaskIntoConstraints = false
containerView.leadingAnchor.constraintEqualToAnchor(contentView.leadingAnchor, constant: 0).active = true
containerView.trailingAnchor.constraintEqualToAnchor(contentView.trailingAnchor, constant: 0).active = true
containerView.topAnchor.constraintEqualToAnchor(contentView.topAnchor, constant: 4).active = true
containerView.bottomAnchor.constraintEqualToAnchor(contentView.bottomAnchor, constant: 0).active = true
labelText = UILabel()
labelText.numberOfLines = 0
labelText.font = UIFont.systemFontOfSize(18)
labelText.textColor = UIColor.darkGrayColor()
containerView.addSubview(labelText)
labelText.translatesAutoresizingMaskIntoConstraints = false
labelText.leadingAnchor.constraintEqualToAnchor(containerView.leadingAnchor, constant: 20).active = true
labelText.topAnchor.constraintEqualToAnchor(containerView.topAnchor, constant: 20).active = true
labelText.trailingAnchor.constraintEqualToAnchor(containerView.trailingAnchor, constant: -20).active = true
labelAuthor = UILabel()
labelAuthor.numberOfLines = 0
labelAuthor.font = UIFont.boldSystemFontOfSize(18)
labelAuthor.textColor = UIColor.blackColor()
containerView.addSubview(labelAuthor)
labelAuthor.translatesAutoresizingMaskIntoConstraints = false
labelAuthor.topAnchor.constraintEqualToAnchor(labelText.bottomAnchor, constant: 20).active = true
labelAuthor.leadingAnchor.constraintEqualToAnchor(containerView.leadingAnchor, constant: 20).active = true
labelAuthor.trailingAnchor.constraintEqualToAnchor(containerView.trailingAnchor, constant: -20).active = true
labelAuthor.bottomAnchor.constraintEqualToAnchor(containerView.bottomAnchor, constant: -20).active = true
self.selectionStyle = UITableViewCellSelectionStyle.None
}
func configureWithData(quote: Quote) {
labelText.text = quote.text
labelAuthor.text = quote.author
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
// The UIViewController that is a
class ViewController: UIViewController, UITableViewDataSource {
var tableView: UITableView!
var dataItems: [Quote]!
override func viewDidLoad() {
super.viewDidLoad()
tableView = UITableView()
tableView.dataSource = self
tableView.registerClass(CellQuote.self, forCellReuseIdentifier: "cellQuoteId")
tableView.backgroundColor = UIColor.whiteColor()
tableView.separatorStyle = UITableViewCellSeparatorStyle.None
tableView.estimatedRowHeight = 110
tableView.rowHeight = UITableViewAutomaticDimension
view.addSubview(tableView)
tableView.translatesAutoresizingMaskIntoConstraints = false
tableView.leadingAnchor.constraintEqualToAnchor(view.leadingAnchor).active = true
tableView.topAnchor.constraintEqualToAnchor(view.topAnchor, constant: 20).active = true
tableView.trailingAnchor.constraintEqualToAnchor(view.trailingAnchor).active = true
tableView.bottomAnchor.constraintEqualToAnchor(view.bottomAnchor).active = true
dataItems = [
Quote(text: "One kernel is felt in a hogshead; one drop of water helps to swell the ocean; a spark of fire helps to give light to the world. None are too small, too feeble, too poor to be of service. Think of this and act.", author: "Michael.Frederick"),
Quote(text: "A timid person is frightened before a danger, a coward during the time, and a courageous person afterward.", author: "Lorem.Approbantibus."),
Quote(text: "There is only one way to defeat the enemy, and that is to write as well as one can. The best argument is an undeniably good book.", author: "Lorem.Fruitur."),
// ... many more quotes ...
]
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
// MARK: - UITableViewDataSource
func numberOfSectionsInTableView(tableView: UITableView) -> Int {
return 1
}
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return dataItems.count
}
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("cellQuoteId") as! CellQuote
cell.configureWithData(dataItems[indexPath.row])
return cell
}
}
I like matt's suggestion below, but am still trying to tweak it to work for me:
class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
var cellHeights: [CGFloat] = [CGFloat]()
func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
if cellHeights.count == 0 {
var cellHeights = [CGFloat]()
let numQuotes: Int = dataItems.count
for index in 0...numQuotes - 1 {
let cell = CellQuote()
let quote = dataItems[index]
cell.configureWithData(quote)
let size = cell.systemLayoutSizeFittingSize(UILayoutFittingCompressedSize)
cellHeights.append(size.height)
}
self.cellHeights = cellHeights
}
return self.cellHeights[indexPath.row]
}
}
I've never found the automatic row height mechanism to be as smooth as the old calculated layout techniques that we used to use before auto layout came along. The bottleneck, as you can readily see by using Instruments, is that the runtime must call systemLayoutSizeFittingSize: on every new cell as it scrolls into view.
In my book, I demonstrate my preferred technique, which is to calculate the heights for all the cells once when the table view first appears. This means that I can supply the answer to heightForRowAtIndexPath instantly from then on, making for the best possible user experience. Moreover, if you then replace your call to dequeueReusableCellWithIdentifier with the much better and more modern dequeueReusableCellWithIdentifier:forIndexPath, you have the advantage that the cell comes to you with its correct size and no further layout is needed after that point.
the clear background from your two text labels is causing the performance issues. add these lines and you should see a performance increase:
labelText.backgroundColor = containerView.backgroundColor
labelAuthor.backgroundColor = containerView.backgroundColor
a good way to check any other potential issues is by turning on 'Color Blended Layers' in the iOS Simulator's 'Debug' menu option
UPDATE
usually what i do for dynamic cell heights is create a prototype cell and use it for sizing. here is what you'd do in your case:
class CellQuote: UITableViewCell {
private static let prototype: CellQuote = {
let cell = CellQuote(style: .Default, reuseIdentifier: nil)
cell.contentView.translatesAutoresizingMaskIntoConstraints = false
return cell
}()
static func heightForQuote(quote: Quote, tableView:UITableView) -> CGFloat {
prototype.configureWithData(quote)
prototype.labelText.preferredMaxLayoutWidth = CGRectGetWidth(tableView.frame)-40
prototype.labelAuthor.preferredMaxLayoutWidth = CGRectGetWidth(tableView.frame)-40
prototype.layoutIfNeeded();
return CGRectGetHeight(prototype.contentView.frame)
}
// existing code here
}
in your viewDidLoad remove the rowHeight and estimatedRowHeight lines and replace with becoming the delegate
class ViewController {
override func viewDidLoad() {
// existing code
self.tableView.delegate = self
// existing code
}
// get prototype cell height
func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
let quote = dataItems[indexPath.row]
return CellQuote.heightForQuote(quote, tableView: tableView)
}