I've been having this problem for weeks and I think I am not able to solve it.
I have a tableView which has custom tableViewCells and they are filled with data. The tableViewCell has two UILabels and one UIView.
The problem appears when I scroll several times the drawings on the UIViews are overlapped one with another, I think they are redrawn. I know that this behavior is because of the reuse of the cells but I can't even locate the origin of the problem.
UIViews show perfectly when opening the app
UIViews get overlapped after scrolling
My UITableView's cellForRowAtIndexPath is:
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let CellIdentifier = "Cell"
let cell: CustomTableViewcell = self.tableView.dequeueReusableCellWithIdentifier(CellIdentifier, forIndexPath: indexPath) as! CustomTableViewcell
//self.tableView.dequeueReusableCellWithIdentifier(CellIdentifier) as! CustomTableViewcell
cell.prepareForReuse()
self.createUIForCell(cell)
self.configureCell(cell, indexPath: indexPath)
print("\t\(parsedData[indexPath.row].stationName): \(parsedData[indexPath.row].freeBikes)")
return cell
}
func createUIForCell(cell: CustomTableViewcell) {
cell.distanceLabel.textColor = UIColor.whiteColor()
cell.distanceLabel.backgroundColor = UIColor.clearColor()
cell.bikeStationLabel.textColor = UIColor.whiteColor()
cell.bikeStationLabel.backgroundColor = UIColor.clearColor()
}
func configureCell(cell: CustomTableViewcell, indexPath: NSIndexPath) {
let stations = parsedData[indexPath.row]
if indexPath.row % 2 == 0 {
cell.stackView.arrangedSubviews.first!.backgroundColor = cellBackgroundColor1
cell.progressView.backgroundColor = cellBackgroundColor2
} else {
cell.stackView.arrangedSubviews.first!.backgroundColor = cellBackgroundColor2
cell.progressView.backgroundColor = cellBackgroundColor1
}
cell.progressView.getWidth(stations.freeBikes, freeDocks: stations.freeDocks)
cell.getLocation(stations.latitude, longitude: stations.longitude)
cell.getParameters(stations.freeBikes, freeDocks: stations.freeDocks)
cell.bikeStationLabel.text = stations.stationName
if stations.distanceToLocation != nil {
if stations.distanceToLocation! < 1000 {
cell.distanceLabel.text = String(format: "%.f m", stations.distanceToLocation!)
} else {
cell.distanceLabel.text = String(format: "%.1f km", stations.distanceToLocation! / 1000)
}
} else {
cell.distanceLabel.text = ""
}
}
For the before mentioned UIVIew inside my custom cell I have created a separated class for it to handle the drawing and it looks like this:
import UIKit
class ProgressViewBar: UIView {
var freeBikes = 0
var freeDocks = 0
var text: UILabel? = nil
var text2: UILabel? = nil
func getWidth(freeBikes: Int, freeDocks: Int) {
self.freeBikes = freeBikes
self.freeDocks = freeDocks
}
override func drawRect(rect: CGRect) {
let path = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: rect.width * (CGFloat(freeBikes) / (CGFloat(freeBikes) + CGFloat(freeDocks))), height: frame.height), cornerRadius: 0)
let shapeLayer = CAShapeLayer()
shapeLayer.path = path.CGPath
shapeLayer.strokeColor = UIColor.whiteColor().CGColor
shapeLayer.fillColor = UIColor.whiteColor().CGColor
self.layer.addSublayer(shapeLayer)
drawText(rect)
}
func drawText(rect: CGRect) {
if freeBikes != 0 {
text?.removeFromSuperview()
text = UILabel(frame: CGRect(x: 2, y: 0, width: 20, height: 20))
text!.text = String("\(freeBikes)")
text!.textAlignment = NSTextAlignment.Left
text!.font = UIFont(name: "HelveticaNeue-Thin", size: 17)
text!.backgroundColor = UIColor.clearColor()
text!.textColor = UIColor(red: 1/255, green: 87/255, blue: 155/255, alpha: 1)
self.addSubview(text!)
}
text2?.removeFromSuperview()
text2 = UILabel(frame: CGRect(x: rect.width * (CGFloat(freeBikes) / (CGFloat(freeBikes) + CGFloat(freeDocks))) + 2, y: 0, width: 20, height: 20))
text2!.text = String("\(freeDocks)")
text2!.textAlignment = NSTextAlignment.Left
text2!.font = UIFont(name: "HelveticaNeue-Thin", size: 17)
text2!.backgroundColor = UIColor.clearColor()
text2!.textColor = UIColor.whiteColor()
self.addSubview(text2!)
}
}
The view needs two parameters to be drawn and I pass them using the func getWidth(freeBikes: Int, freeDocks: Int) method calling it from the `ViewController. If any other piece of code is needed you can look at the repo.
The problem is that when reusing the cell you call drawRect once again and don't clear the already drawn rect. Clear it before drawing another one.
I'm using XIB files to design cells in my UITableView. I also use the dequeue mecanism, for instance : let cell = tableView.dequeueReusableCellWithIdentifier("articleCell", forIndexPath: indexPath) as! ArticleTableViewCell. I precalculate all my row height in the viewDidLoad of my ViewController so the method func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat returns instantly the right value. All of this works.
In my UITableViewCell, I'm using many dynamic height labels (lines = 0). The layout is like this :
I don't use transparent background, all my subviews are opaque with a specified background color. I checked with the Color Blended Layers (everything is green) and Color Misaligned Images (nothing is yellow).
Here is my cellForRowAtIndexPath method :
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let tableViewSection = tableViewSectionAtIndex(indexPath.section)
let tableViewRow = tableViewSection.rows.objectAtIndex(indexPath.row) as! TableViewRow
switch tableViewRow.type! {
case TableViewRowType.Article :
let article = tableViewRow.article!
if article.type == TypeArticle.Article {
let cell = tableView.dequeueReusableCellWithIdentifier("articleCell", forIndexPath: indexPath) as! ArticleTableViewCell
return cell
} else {
let cell = tableView.dequeueReusableCellWithIdentifier("chroniqueCell", forIndexPath: indexPath) as! ChroniqueTableViewCell
return cell
}
default:
return UITableViewCell()
}
}
And then, in the willDisplayCell method :
func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) {
let tableViewSection = tableViewSectionAtIndex(indexPath.section)
let tableViewRow = tableViewSection.rows.objectAtIndex(indexPath.row) as! TableViewRow
let article = tableViewRow.article!
if cell.isKindOfClass(ArticleTableViewCell) {
let cell = cell as! ArticleTableViewCell
cell.delegate = self
cell.article = article
if let imageView = articleImageCache[article.id] {
cell.articleImage.image = imageView
cell.shareControl.image = imageView
} else {
loadArticleImage(article, articleCell: cell)
}
} else {
let cell = cell as! ChroniqueTableViewCell
cell.delegate = self
cell.article = article
if let chroniqueur = article.getChroniqueur() {
if let imageView = chroniqueurImageCache[chroniqueur.id] {
cell.chroniqueurImage.image = imageView
} else {
loadChroniqueurImage(article, articleCell: cell)
}
}
}
}
All my images are downloaded in a background thread, so there is no image loading when scrolling.
The layout is modified in my ArticleTableViewCell when I set the "article" property : cell.article = article :
var article: Article? {
didSet {
updateUI()
}
}
And my updateUI function :
func updateUI() -> Void {
if let article = article {
if let surtitre = article.surtitre {
self.surtitre.text = surtitre.uppercaseString
self.surtitre.setLineHeight(3)
} else {
self.surtitre.hidden = true
}
self.titre.text = article.titre
self.titre.setLineHeight(3)
if let amorce = article.amorce {
self.amorce.text = amorce
self.amorce.setLineHeight(3)
} else {
self.amorce.hidden = true
}
if let section = article.sectionSource {
if section.couleurFoncee != "" {
self.bordureSection.backgroundColor = UIColor(hexString: section.couleurFoncee)
self.surtitre.textColor = UIColor(hexString: section.couleurFoncee)
}
}
}
}
The problem is when setting the label text, this causes the lag. The setLineHeight method transforms the text of the label into an NSAttributedString to specify the line height, but even when removing this code and simply setting the text label, a small lag occurs when displaying a new cell.
If I remove all the label setup code, the cells displays the default label text and the tableview scroll is perfectly smooth, and the heights are correct too. Whenever I set a label text, the lag occurs.
I'm running the app on my iPhone 6s. On the 6s simulator, there's absolutely no lag at all, perfectly smooth.
Any idead? Maybe it's because I'm using a UIStackView to embed my labels? I did it so because it's easier to hide labels when empty, so the other elements are moved up, to avoid having spacing where the empty label is.
I tried many thing but can't get the tableview to scroll smoothly, any help would be appreciated.
All my optimizations made it almost 100% fluid on a 6s device but on a 5s, it's really not smooth. I even don't wanna test on a 4s device! I reached the autolayout performance limit when using multiple multiline labels.
After a deep analysis of the Time Profiler, the result is that dynamic labels height (3 in my case) with constraint between them, and those label have attributed text (used to set the line height, but this is not the bottleneck), it seems like the lag is caused by the UIView::layoutSubviews which renders the labels, update the constraints, etc... This is why what when I don't change the label text, everything is smooth. The only solution here is not to use autolayout and layout de subviews programmatically in layoutSubviews method of a custom UITableViewCell subclass.
For those wondering how to do this, I achieved to make a 100% smooth scroll without autolayout and multiple lables with dynamic height (multiline). Here is my UITableView subclass (I use a base class because I have 2 similar cell types) :
//
// ArticleTableViewCell.swift
//
import UIKit
class ArticleTableViewCell: BaseArticleTableViewCell {
var articleImage = UIImageView()
var surtitre = UILabel()
var titre = UILabel()
var amorce = UILabel()
var bordureTop = UIView()
var bordureLeft = UIView()
var articleImageWidth = CGFloat(0)
var articleImageHeight = CGFloat(0)
override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
self.articleImage.clipsToBounds = true
self.articleImage.contentMode = UIViewContentMode.ScaleAspectFill
self.bordureTop.backgroundColor = UIColor(colorLiteralRed: 219/255, green: 219/255, blue: 219/255, alpha: 1.0)
self.bordureLeft.backgroundColor = UIColor.blackColor()
self.surtitre.numberOfLines = 0
self.surtitre.font = UIFont(name: "Graphik-Bold", size: 11)
self.surtitre.textColor = UIColor.blackColor()
self.surtitre.backgroundColor = self.contentView.backgroundColor
self.titre.numberOfLines = 0
self.titre.font = UIFont(name: "PublicoHeadline-Extrabold", size: 22)
self.titre.textColor = UIColor(colorLiteralRed: 26/255, green: 26/255, blue: 26/255, alpha: 1.0)
self.titre.backgroundColor = self.contentView.backgroundColor
self.amorce.numberOfLines = 0
self.amorce.font = UIFont(name: "Graphik-Regular", size: 12)
self.amorce.textColor = UIColor.blackColor()
self.amorce.backgroundColor = self.contentView.backgroundColor
self.contentView.addSubview(articleImage)
self.contentView.addSubview(surtitre)
self.contentView.addSubview(titre)
self.contentView.addSubview(amorce)
self.contentView.addSubview(bordureTop)
self.contentView.addSubview(bordureLeft)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func layoutSubviews() {
super.layoutSubviews()
if let article = article {
var currentY = CGFloat(0)
let labelX = CGFloat(18)
let labelWidth = fullWidth - 48
// Taille de l'image avec un ratio de 372/243
articleImageWidth = ceil(fullWidth - 3)
articleImageHeight = ceil((articleImageWidth * 243) / 372)
self.bordureTop.frame = CGRect(x: 3, y: 0, width: fullWidth - 3, height: 1)
// Image
if article.imagePrincipale == nil {
self.articleImage.frame = CGRect(x: 0, y: 0, width: 0, height: 0)
self.bordureTop.hidden = false
} else {
self.articleImage.frame = CGRect(x: 3, y: 0, width: self.articleImageWidth, height: self.articleImageHeight)
self.bordureTop.hidden = true
currentY += self.articleImageHeight
}
// Padding top
currentY += 15
// Surtitre
if let surtitre = article.surtitre {
self.surtitre.frame = CGRect(x: labelX, y: currentY, width: labelWidth, height: 0)
self.surtitre.preferredMaxLayoutWidth = self.surtitre.frame.width
self.surtitre.setTextWithLineHeight(surtitre.uppercaseString, lineHeight: 3)
self.surtitre.sizeToFit()
currentY += self.surtitre.frame.height
currentY += 15
} else {
self.surtitre.frame = CGRect(x: 0, y: 0, width: 0, height: 0)
}
// Titre
self.titre.frame = CGRect(x: labelX, y: currentY, width: labelWidth, height: 0)
self.titre.preferredMaxLayoutWidth = self.titre.frame.width
self.titre.setTextWithLineHeight(article.titre, lineHeight: 3)
self.titre.sizeToFit()
currentY += self.titre.frame.height
// Amorce
if let amorce = article.amorce {
currentY += 15
self.amorce.frame = CGRect(x: labelX, y: currentY, width: labelWidth, height: 0)
self.amorce.preferredMaxLayoutWidth = self.amorce.frame.width
self.amorce.setTextWithLineHeight(amorce, lineHeight: 3)
self.amorce.sizeToFit()
currentY += self.amorce.frame.height
} else {
self.amorce.frame = CGRect(x: 0, y: 0, width: 0, height: 0)
}
// Boutons
currentY += 9
self.updateButtonsPosition(currentY)
self.layoutUpdatedAt(currentY)
currentY += self.favorisButton.frame.height
// Padding bottom
currentY += 15
// Couleurs
self.bordureLeft.frame = CGRect(x: 0, y: 0, width: 3, height: currentY - 2)
if let section = article.sectionSource {
if let couleurFoncee = section.couleurFoncee {
self.bordureLeft.backgroundColor = couleurFoncee
self.surtitre.textColor = couleurFoncee
}
}
// Mettre à jour le frame du contentView avec la bonne hauteur totale
var frame = self.contentView.frame
frame.size.height = currentY
self.contentView.frame = frame
}
}
}
And the base class :
//
// BaseArticleTableViewCell.swift
//
import UIKit
class BaseArticleTableViewCell: UITableViewCell {
var backgroundThread: NSURLSessionDataTask?
var delegate: SectionViewController?
var favorisButton: FavorisButton!
var shareButton: ShareButton!
var updatedAt: UILabel!
var fullWidth = CGFloat(0)
var article: Article? {
didSet {
// Update du UI quand on set l'article
updateArticle()
}
}
override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
self.selectionStyle = UITableViewCellSelectionStyle.None
self.contentView.backgroundColor = UIColor(colorLiteralRed: 248/255, green: 248/255, blue: 248/255, alpha: 1.0)
// Largeur de la cellule, qui est toujours plein écran dans notre cas
// self.contentView.frame.width ne donne pas la bonne valeur tant que le tableView n'a pas été layouté
fullWidth = UIScreen.mainScreen().bounds.width
self.favorisButton = FavorisButton(frame: CGRect(x: fullWidth - 40, y: 0, width: 28, height: 30))
self.shareButton = ShareButton(frame: CGRect(x: fullWidth - 73, y: 0, width: 28, height: 30))
self.updatedAt = UILabel(frame: CGRect(x: 18, y: 0, width: 0, height: 0))
self.updatedAt.font = UIFont(name: "Graphik-Regular", size: 10)
self.updatedAt.textColor = UIColor(colorLiteralRed: 138/255, green: 138/255, blue: 138/255, alpha: 1.0)
self.updatedAt.backgroundColor = self.contentView.backgroundColor
self.addSubview(self.favorisButton)
self.addSubview(self.shareButton)
self.addSubview(self.updatedAt)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
// Avant qu'une cell soit réutilisée, faire un cleanup
override func prepareForReuse() {
super.prepareForReuse()
// Canceller un background thread si y'en a un actif
if let backgroundThread = self.backgroundThread {
backgroundThread.cancel()
self.backgroundThread = nil
}
resetUI()
}
// Updater le UI
func updateArticle() {
self.favorisButton.article = article
self.shareButton.article = article
if let delegate = self.delegate {
self.shareButton.delegate = delegate
}
}
// Faire un reset du UI avant de réutiliser une instance de Cell
func resetUI() {
}
// Mettre à jour la position des boutons
func updateButtonsPosition(currentY: CGFloat) {
// Déjà positionnés en X, width, height, reste le Y
var shareFrame = self.shareButton.frame
shareFrame.origin.y = currentY
self.shareButton.frame = shareFrame
var favorisFrame = self.favorisButton.frame
favorisFrame.origin.y = currentY + 1
self.favorisButton.frame = favorisFrame
}
// Mettre à jour la position du updatedAt et son texte
func layoutUpdatedAt(currentY: CGFloat) {
var frame = self.updatedAt.frame
frame.origin.y = currentY + 15
self.updatedAt.frame = frame
if let updatedAt = article?.updatedAtListe {
self.updatedAt.text = updatedAt
} else {
self.updatedAt.text = ""
}
self.updatedAt.sizeToFit()
}
}
On the viewDidLoad of my ViewController, i pre-calculate all the row height :
// Créer une cache des row height des articles
func calculRowHeight() {
self.articleRowHeights = [Int: CGFloat]()
// Utiliser une seule instance de chaque type de cell
let articleCell = tableView.dequeueReusableCellWithIdentifier("articleCell") as! BaseArticleTableViewCell
let chroniqueCell = tableView.dequeueReusableCellWithIdentifier("chroniqueCell") as! BaseArticleTableViewCell
var cell: BaseArticleTableViewCell!
for articleObj in section.articles {
let article = articleObj as! Article
// Utiliser le bon type de cell
if article.type == TypeArticle.Article {
cell = articleCell
} else {
cell = chroniqueCell
}
// Setter l'article et refaire le layout
cell.article = article
cell.layoutSubviews()
// Prendre la hauteur générée
self.articleRowHeights[article.id] = cell.contentView.frame.height
}
}
Set the row height for the requested cell :
func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
let tableViewSection = tableViewSectionAtIndex(indexPath.section)
let tableViewRow = tableViewSection.rows.objectAtIndex(indexPath.row) as! TableViewRow
switch tableViewRow.type! {
case TableViewRowType.Article :
let article = tableViewRow.article!
return self.articleRowHeights[article.id]!
default:
return UITableViewAutomaticDimension
}
}
Return the cell in cellForRowAtIndexPath (I have multiple cell types in my tableView, so there's a couple of checks to do) :
// Cellule pour un section/row spécifique
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let tableViewSection = tableViewSectionAtIndex(indexPath.section)
let tableViewRow = tableViewSection.rows.objectAtIndex(indexPath.row) as! TableViewRow
switch tableViewRow.type! {
case TableViewRowType.Article :
let article = tableViewRow.article!
if article.type == TypeArticle.Article {
let cell = tableView.dequeueReusableCellWithIdentifier("articleCell", forIndexPath: indexPath) as! ArticleTableViewCell
cell.delegate = self
cell.article = article
if let imageView = articleImageCache[article.id] {
cell.articleImage.image = imageView
cell.shareButton.image = imageView
} else {
cell.articleImage.image = placeholder
loadArticleImage(article, articleCell: cell)
}
return cell
}
return UITableViewCell()
default:
return UITableViewCell()
}
}
I'm trying to use UICollectionView to bind different cells with an XIB file and set a design for it.
I know how to bind different cells and it's works fine in my application.
Here the code to bind:
override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
var cell : UICollectionViewCell
mCurrentIndexPath = indexPath
// HEADER
switch indexPath.section {
case 0:
cell = configureModuleHeaderCell(indexPath)
default:
// Local
let theme = getThemeFromIndex(indexPath.section - 1)
mCurrentDocuments = getDocumentsFromTheme(theme)
let cours : DownloadableDocument? = (mCurrentDocuments != nil) ? getCoursForTheme() : nil
mCurrentDocuments = deleteCoursFromDocAnnexe()
mCurrentDocuments = sortDocumentDoublePDF()
if indexPath.row == 0 {
cell = configureThemeHeaderCell(theme, cours: cours)
}
// NORMAL
else {
cell = configureThemeDocCell()
cell.layer.borderWidth = 1.0
cell.layer.borderColor = UIColor.grayColor().CGColor
}
break
}
return cell
}
override func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
if mFetchedResultController != nil {
mCurrentIndexPath = NSIndexPath(forRow: 0, inSection: 0)
return mFetchedResultController!.fetchedObjects!.count + 1
}
return 0
}
override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
var counter : Int = 1
switch section {
case 0:
counter = 1
break
default:
mCurrentDocuments = getDocumentsFromTheme(getThemeFromIndex(section - 1))
mCurrentDocuments = checkDoubleCours()
counter = (mCurrentDocuments != nil) ? mCurrentDocuments!.count : 0
counter += (!documentsContainsCours(mCurrentDocuments)) ? 1 : 0
break
}
return counter
}
Then I want to set a border for each section. Is that possible ?
I can set a border for cell by :
cell.layer.borderWidth = 1.0
cell.layer.borderColor = UIColor.grayColor().CGColor
But I want to do it for a section.
I've finally found a solution !
I just need to calculate the height of all cells of a section, set this height on the view and position it well.
EDIT:
Update for #Urmi
Add this function to instanciate a cardView with frame
func instanciateCardView(frame : CGRect) -> UIView {
// Declaration
let view = UIView(frame : frame)
// Basic UI
view.backgroundColor = UIColor.whiteColor()
view.layer.backgroundColor = UIColor.whiteColor().CGColor
view.layer.borderWidth = 1.0
view.layer.borderColor = ColorsUtil.UIColorFromRGB(0xAB9595).CGColor
// Shadow (cardview style)
view.layer.shadowPath = UIBezierPath(rect: view.bounds).CGPath
view.layer.shouldRasterize = true
view.layer.shadowColor = ColorsUtil.UIColorFromRGB(0xD5C6C6).CGColor
view.layer.shadowOpacity = 1
view.layer.shadowOffset = CGSizeMake(1, 1);
view.layer.shadowRadius = 1.0
if !mCardViewList.contains(view) {
// Add view to container - Just to save the instance
mCardViewList.append(view)
// Add view to main view
self.collectionView?.addSubview(view)
self.collectionView?.sendSubviewToBack(view)
}
return view
}
And in the cellForItemAtIndexPath :
override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
var cell : UICollectionViewCell
mCurrentIndexPath = indexPath
switch indexPath.section {
case 0:
cell = configureModuleHeaderCell(indexPath)
// Basic UI
cell.backgroundColor = UIColor.whiteColor()
cell.layer.borderWidth = 1.0
cell.layer.borderColor = ColorsUtil.UIColorFromRGB(0xAB9595).CGColor
// Shadow (cardview style)
cell.layer.shadowPath = UIBezierPath(rect: view.bounds).CGPath
cell.layer.shouldRasterize = true
cell.layer.shadowColor = ColorsUtil.UIColorFromRGB(0xD5C6C6).CGColor
cell.layer.shadowOpacity = 1
cell.layer.shadowOffset = CGSizeMake(1, 1);
cell.layer.shadowRadius = 1.0
break
default:
let theme = getThemeFromIndex(indexPath.section - 1)
mCurrentDocuments = getDocumentsFromTheme(theme)
let cours : DownloadableDocument? = (mCurrentDocuments != nil) ? getCoursForTheme() : nil
mCurrentDocuments = deleteCoursFromDocAnnexe()
mCurrentDocuments = sortDocumentDoublePDF(mCurrentDocuments)
if indexPath.row == 0 {
cell = configureThemeHeaderCell(theme, cours: cours)
if mCurrentDocuments != nil {
if mCurrentDocuments!.count == 0 {
instanciateCardView(CGRectMake(cell.frame.origin.x - 30, cell.frame.origin.y - 10, cell.frame.width + 60, cell.frame.height + 20))
}
}
}
else {
cell = configureThemeDocCell()
if indexPath.row == mCollectionView.numberOfItemsInSection(indexPath.section) - 1 {
// Attribute
let index = NSIndexPath(forRow: 0, inSection: indexPath.section)
let headerAttribute : UICollectionViewLayoutAttributes = mCollectionView.layoutAttributesForItemAtIndexPath(index)!
let height = (cell.frame.origin.y + cell.frame.height) - (headerAttribute.frame.origin.y - 10)
instanciateCardView(CGRectMake(headerAttribute.frame.origin.x - 30, headerAttribute.frame.origin.y - 10, headerAttribute.frame.width + 60, height + 20))
}
}
break
}
return cell
}
I've found that is not the best solution, but it works. Now i've declare a UITableView and add a UICollectionView in each UITableViewCell
Don't forget to upvote if it helps you :)
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("Cell", forIndexPath: indexPath) as! StackingCell
let data = stack[indexPath.row]
cell.stackDeatils = data
cell.floorNumber_Label.text = data.floorNo
let floorDetails = data.floorDetails!
if floorDetails == "NA"{
cell.floor_View.backgroundColor = UIColor.lightGrayColor()
}
else {
for items in floorDetails
{
let floorArr = items.1
cell.floor_View.backgroundColor = UIColor.orangeColor()
//Number of Units passing value to cell
cell.secitons = floorArr.count
for units in floorArr {
let unit = units.1
let compName = unit["companyName"].string!
if compName == "Vacant" {
cell.floor_View.backgroundColor = UIColor(red: 94/255, green: 198/255, blue: 162/255, alpha: 1.0)
}
}
}
}
}
let shadowPath = UIBezierPath(rect: cell.floor_View.bounds)
cell.floor_View.layer.masksToBounds = false
cell.floor_View.layer.shadowColor = UIColor.blackColor().CGColor
cell.floor_View.layer.shadowOffset = CGSize(width: 1, height: 0.5)
cell.floor_View.layer.shadowOpacity = 0.2
cell.floor_View.layer.shadowPath = shadowPath.CGPath
return cell
}
CustomTableCell method for adding vertical line to TableViewCell
var stackDeatils:StackingModel!{
didSet
{
dispatch_async(dispatch_get_main_queue()) {
self.updateData()
}
}
}
func updateData(){
let unit = self.stackDeatils.isUnitsDrawn
if unit == true {
self.stackDeatils.isUnitsDrawn = false
let stack_width = self.floor_View.frame.width
let stack_height = self.floor_View.frame.height
xCor = stack_width/CGFloat(self.secitons)
var x = xCor
for var i = 1;i < self.secitons; i++ {
let line = UIView(frame: CGRectMake(x, 0, 2,stack_height))
line.backgroundColor = UIColor.whiteColor()
//print(xCor)
self.floor_View.addSubview(line)
x += xCor
}
}
else {
print(self.stackDeatils.isUnitsDrawn)
}
}
I'm creating a chat app using swift. On my storyboard, I have one View Controller that is responsible for showing the messages. I have 3 swift files :
ChatingViewController : Class associated with the View Controller on the storyboard
CustomChatingTableViewController
CellChatingTableViewCell
Each message is displayed in a cell. I create the tableView programmatically.
- ChatingViewController
import UIKit
class ChatingViewController: UIViewController {
var messageController = [[String:String]]()
var tableViewController = CustomChatingTableViewController()
override func viewDidLoad() {
let sizeTableView = CGSize(width: view.frame.size.width - 2 * margin, height: view.frame.size.height - sizeTextField.height - 2 * margin - self.navigationController!.navigationBar.frame.size.height)
let originTableView = CGPoint(x: margin, y: 2 * margin + self.navigationController!.navigationBar.frame.size.height)
tableViewController.tableView.frame = CGRect(origin: originTableView, size: sizeTableView)
tableViewController.tableView.registerClass(CellChatingTableViewCell.self, forCellReuseIdentifier: "Cell")
tableViewController.data = messageController
tableViewController.tableView.separatorStyle = .None
view.addSubview(tableViewController.tableView)
}
- CustomChatingTableViewController
import UIKit
class CustomChatingTableViewController: UITableViewController {
var data:[[String:String]]!
override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return data.count
}
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
var cell = tableView.dequeueReusableCellWithIdentifier("Cell") as CellChatingTableViewCell
cell.setCell(data[indexPath.row]["name"] as String!, date: data[indexPath.row]["date"] as String!, message: data[indexPath.row]["message"] as String!)
return cell
}
override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
return 150
}
}
** -CellChatingTableViewCell**
import UIKit
class CellChatingTableViewCell: UITableViewCell {
var date = UILabel()
var message = UILabel()
func setCell(name:String,date:String,message:String){
let imageContainerMessage = UIImage(named: "orange.png")!.stretchableImageWithLeftCapWidth(24, topCapHeight: 15)
self.date.font = UIFont(name: "Arial", size: 10)
self.date.text = date
self.date.numberOfLines = 0
self.date.lineBreakMode = NSLineBreakMode.ByWordWrapping
let sizeDateLabelMax = CGSizeMake(self.frame.size.width, 9999)
let expectedSizeDate = self.date.sizeThatFits(sizeDateLabelMax)
self.date.frame = CGRect(origin: CGPoint.zeroPoint, size: expectedSizeDate)
self.message.font = UIFont(name: "Arial", size: 15)
self.message.text = message
self.message.numberOfLines = 0
self.message.lineBreakMode = NSLineBreakMode.ByWordWrapping
let sizeMessageLabelMax = CGSizeMake(self.frame.size.width, 9999)
let expectedSizeMessage = self.message.sizeThatFits(sizeMessageLabelMax)
self.message.frame = CGRect(origin: CGPoint(x: 15, y: 10), size: expectedSizeMessage)
var imageContainer = UIImageView(frame: CGRect(origin: CGPoint(x: 0, y: expectedSizeDate.height + 5), size:
CGSizeMake(expectedSizeMessage.width + 25, expectedSizeMessage.height + 25)))
imageContainer.image = imageContainerMessage
self.addSubview(self.date)
self.addSubview(imageContainer)
imageContainer.addSubview(self.message)
}
}
When I load the ViewController, everything does work fine but when I scroll the tableView, it turns horrible:
Before scrolling :
After scrolling :
Any suggestion?
Thanks in advance
In your cellForRowAtIndexPath, you are reusing cells. But then in your custom UITableViewCell, you are adding (self.addSubView) self.date and self.message multiple times (yikes), and adding new instances of imageContainer.
You should either clear the cells before re-adding them, or invalidate them with new data but do not do self.addSubView again.