UITableViewCell height incorrect, sizeToFit sizes incorrectly - ios

I am attempting to create a custom UITableViewCell, and having issues with the cell frame having the proper height. This is troubling because the cell sizes correctly for iPhones 4s/5s running iOS 8.4, but not for iPhones 6/6+ running the same OS.
Chaos ensues around calling sizeToFit on messageLabel. Some of the labels almost appear to have extra, blank lines below, but clearly are not as tall as the cell makes them out to be.
Below is the custom cell. The label that appears to cause the trouble is the messageLabel. To view the frames of the labels, let borders = true
//
// NotesTableViewCell.swift
// urchin
//
// Created by Ethan Look on 6/17/15.
// Copyright (c) 2015 Tidepool. All rights reserved.
//
import Foundation
import UIKit
let noteCellHeight: CGFloat = 128
let noteCellInset: CGFloat = 16
let labelSpacing: CGFloat = 6
class NoteCell: UITableViewCell {
let borders = false
var cellHeight: CGFloat = CGFloat()
let usernameLabel: UILabel = UILabel()
let timedateLabel: UILabel = UILabel()
var messageLabel: UILabel = UILabel()
func configureWithNote(note: Note) {
usernameLabel.text = note.user!.fullName
usernameLabel.font = UIFont(name: "OpenSans-Bold", size: 17.5)!
usernameLabel.textColor = UIColor.blackColor()
usernameLabel.sizeToFit()
let usernameX = noteCellInset
let usernameY = noteCellInset
usernameLabel.frame.origin = CGPoint(x: usernameX, y: usernameY)
let dateFormatter = NSDateFormatter()
dateFormatter.dateFormat = "EEEE M.d.yy h:mm a"
var dateString = dateFormatter.stringFromDate(note.timestamp)
dateString = dateString.stringByReplacingOccurrencesOfString("PM", withString: "pm", options: NSStringCompareOptions.LiteralSearch, range: nil)
dateString = dateString.stringByReplacingOccurrencesOfString("AM", withString: "am", options: NSStringCompareOptions.LiteralSearch, range: nil)
timedateLabel.text = dateString
timedateLabel.font = UIFont(name: "OpenSans", size: 12.5)!
timedateLabel.textColor = UIColor.blackColor()
timedateLabel.sizeToFit()
let timedateX = contentView.frame.width - (noteCellInset + timedateLabel.frame.width)
let timedateY = usernameLabel.frame.midY - timedateLabel.frame.height / 2
timedateLabel.frame.origin = CGPoint(x: timedateX, y: timedateY)
messageLabel.frame.size = CGSize(width: contentView.frame.width - 2 * noteCellInset, height: CGFloat.max)
let hashtagBolder = HashtagBolder()
let attributedText = hashtagBolder.boldHashtags(note.messagetext)
messageLabel.attributedText = attributedText
messageLabel.adjustsFontSizeToFitWidth = false
messageLabel.lineBreakMode = NSLineBreakMode.ByWordWrapping
messageLabel.numberOfLines = 0
messageLabel.sizeToFit()
let messageX = noteCellInset
let messageY = usernameLabel.frame.maxY + 2 * labelSpacing
messageLabel.frame.origin = CGPoint(x: messageX, y: messageY)
contentView.addSubview(usernameLabel)
contentView.addSubview(timedateLabel)
contentView.addSubview(messageLabel)
cellHeight = noteCellInset + usernameLabel.frame.height + 2 * labelSpacing + messageLabel.frame.height + noteCellInset
if (borders) {
usernameLabel.layer.borderWidth = 1
usernameLabel.layer.borderColor = UIColor.redColor().CGColor
timedateLabel.layer.borderWidth = 1
timedateLabel.layer.borderColor = UIColor.redColor().CGColor
messageLabel.layer.borderWidth = 1
messageLabel.layer.borderColor = UIColor.redColor().CGColor
self.contentView.layer.borderWidth = 1
self.contentView.layer.borderColor = UIColor.blueColor().CGColor
}
self.contentView.frame.size = CGSize(width: self.contentView.frame.width, height: cellHeight)
}
}
And heightForRowAtIndexPath:
func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
let cell = NoteCell(style: .Default, reuseIdentifier: nil)
cell.configureWithNote(notes[indexPath.row])
return cell.cellHeight
}
The project is open source and on Github, so feel free to clone the repository and check out all of the code yourself.
Thank you!

Unfortunately, you can't do it that way because tableView(_:heightForRowAtIndexPath) is called first and the value you return is used to create the cell that you will dequeue in tableView(_:cellForRowAtIndexPath). The cell can't set its own size because by the time it could do so (e.g. awakeFromNib or prepareForResuse), the table view will already have a height value for it. There are some whacky workarounds for this that I've used, but it's easier to just use self-sizing table view cells.
Check it:
http://www.appcoda.com/self-sizing-cells/

Instead of creating an entirely new cell in heightForRowAtIndexPath:, I simply create the UI elements that determine the cell height (usernameLabel and messageLabel), size them appropriately with sizeToFit, then do a simple calculation to determine the cell height.
By doing this, I never create a new cell which is later dequeued.
func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
let usernameLabel = UILabel(frame: CGRectZero)
usernameLabel.font = UIFont(name: "OpenSans-Bold", size: 17.5)!
usernameLabel.text = notes[indexPath.row].user!.fullName
usernameLabel.sizeToFit()
let messageLabel = UILabel(frame: CGRect(x: 0, y: 0, width: self.view.frame.width - 2*noteCellInset, height: CGFloat.max))
let hashtagBolder = HashtagBolder()
let attributedText = hashtagBolder.boldHashtags(notes[indexPath.row].messagetext)
messageLabel.attributedText = attributedText
messageLabel.adjustsFontSizeToFitWidth = false
messageLabel.lineBreakMode = NSLineBreakMode.ByWordWrapping
messageLabel.numberOfLines = 0
messageLabel.sizeToFit()
let cellHeight = noteCellInset + usernameLabel.frame.height + 2 * labelSpacing + messageLabel.frame.height + noteCellInset
return cellHeight
}

Related

Programmatically center UIImage inside parent view vertically

I am on Swift 5.
The goal is to center a UIImageView vertically inside a view. Currently it looks like
Note all the image bubbles are running off of the cell.
This is the code that lead to this:
let imageView = UIImageView()
let width = self.frame.width
let height = self.frame.height
let img_width = height //* 0.8
let img_height = height
let y = (height - img_height)/2
let x = width*0.05
imageView.frame = CGRect(
x: x
, y: CGFloat(y)
, width: img_width
, height: img_height
)
let rounded = imageView
.makeRounded()
.border(width:1.0, color:Color.white.cgColor)
self.addSubview(rounded)
The imageView extension functions are:
func makeRounded() -> UIImageView {
self.layer.borderWidth = 0.5
self.layer.masksToBounds = false
self.layer.borderColor = Color.white.cgColor
self.layer.cornerRadius = self.frame.width/2
self.clipsToBounds = true
// see https://developer.apple.com/documentation/uikit/uiview/contentmode
self.contentMode = .scaleAspectFill
return self
}
func border( width: CGFloat, color: CGColor ) -> UIImageView{
self.layer.borderWidth = width
self.layer.borderColor = color
return self
}
Which is very vanilla.
This is odd because I laid out the textview vertically in the exact same way, that is: (parentHeight - childHeight)/2, and it is centered. You can see it in the blue text boxes in cell two and three.
____ EDIT _______
This is how I laid out the cell
let data = dataSource[ row - self._data_source_off_set ]
let cell = tableView.dequeueReusableCell(withIdentifier: "OneUserCell", for: indexPath) as! OneUserCell
// give uuid and set delegate
cell.uuid = data.uuid
cell.delegate = self
// render style: this must be set
cell.hasFooter = false //true
cell.imageSource = data
cell.headerTextSource = data
cell.footerTextSource = data
// color schemes
cell.backgroundColor = Color.offWhiteLight
cell.selectionColor = Color.graySecondary
Add these constraints to you imageView and remove frame and its calculations
self.contentView.addSubview(rounded)
self.mimageView.translatesAutoresizingMaskIntoConstraints = false
self.mimageView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor,constant: 20).isActive = true
self.mimageView.centerYAnchor.constraint(equalTo: contentView.centerYAnchor).isActive = true
self.mimageView.heightAnchor.constraint(equalTo: contentView.heightAnchor).isActive = true
self.mimageView.widthAnchor.constraint(equalTo: contentView.heightAnchor).isActive = true

UICollectionView edge to edge layout

Goal: edge-to-edge UICollectionView with 2 cells on all size iPhones.
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
let screenSize = collectionView.bounds
let screenWidth = screenSize.width
print("Zhenya: \(screenWidth)") // prints correct 375, which is half of iPhone 6
let cellEdgeLength: CGFloat = screenWidth / 2.0
return CGSize(width: cellEdgeLength, height: cellEdgeLength)
}
Also
override func viewDidLoad() {
super.viewDidLoad()
collectionView.delegate = self
collectionView.dataSource = self
let flow = UICollectionViewFlowLayout()
flow.scrollDirection = UICollectionViewScrollDirection.vertical
flow.minimumInteritemSpacing = 0
flow.minimumLineSpacing = 0
collectionView.collectionViewLayout = flow
}
However on iPhone 6:
Collection Cell attributes:
Collection View attributes:
Update:
func for gradient, that actually gets the right width:
(located at custom UICollectionViewCell class)
func addGradient () {
let gradient = CAGradientLayer()
gradient.frame = gradientView.bounds
let topColor = UIColor(red:0.07, green:0.07, blue:0.07, alpha:1)
let botomColor = UIColor.clear
gradient.colors = [topColor.cgColor, botomColor.cgColor]
if gradientWasRemoved == false {
gradientView.layer.insertSublayer(gradient, at: 0)
} else if gradientWasRemoved == true {
self.addSubview(gradientView)
}
Update 2:
Note: Testing on iPhone 7 Plus.
I found that UICollectionViewFlowLayout overrides cell size crated in sizeForItemAtIndexPath: (seems like it)
With this code:
let flow = UICollectionViewFlowLayout()
let screenSize = collectionView.bounds
let screenWidth = screenSize.width
let cellEdgeLength: CGFloat = screenWidth / 2.0
flow.itemSize = CGSize(width: cellEdgeLength, height: cellEdgeLength)
flow.scrollDirection = UICollectionViewScrollDirection.vertical
flow.minimumInteritemSpacing = 0
flow.minimumLineSpacing = 0
collectionView.collectionViewLayout = flow
I have this:
Then I decided manual specify cell edge length (half of iPhone7Plust width = 207):
let cellSide: CGFloat = 207
flow.itemSize = CGSize(width: cellSide, height: cellSide)
flow.scrollDirection = UICollectionViewScrollDirection.vertical
flow.minimumInteritemSpacing = 0
flow.minimumLineSpacing = 0
collectionView.collectionViewLayout = flow
I get this:
Found the solution.
Problem was in the inner imageView autolayout settings. I didn't specify them.
Why that little piece of BS was getting on the way of my flow.itemSize, I don't know.
What is more weird to me, is why when manually specified cellEdgeLength as 207 in the second update, all of the sudden, it did override the lack of imageView constraints.

Swift: tableview cell content is added again and again with each reload?

Ok, I am fairly this Objective C question had the same problem = Cell Label text overlapping in cells but I haven't found any answers in Swift. Im also very new to tableviews/cells and would just like to know the proper way to do this as clearly Im doing it wrong-
I have custom cells in my tableview that I created in storyboard. I need to add the content of my cells (labels, etc) programmatically. I have done this here -
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("eventCell", forIndexPath: indexPath) as! EventTableCellTableViewCell
// cell.eventTitle.text = names[indexPath.row]
// cell.eventDescription.text = descriptions[indexPath.row]
cell.contentView.clipsToBounds = false
//cell UIX
let eventTitleLabel = UILabel()
let dateLabel = UILabel()
let authorLabel = UILabel()
let locationLabel = UILabel()
let categoryView = UIImageView()
//border
let botBorder: CALayer = CALayer()
botBorder.frame = CGRectMake(0.0, cell.frame.height-1, cell.frame.width, 1.0)
botBorder.backgroundColor = colorWithHexString("#C5C7C9").CGColor
//initalize cell items
eventTitleLabel.text = names[indexPath.row]
eventTitleLabel.frame = CGRectMake(0, 0, cell.frame.width * 0.5, cell.frame.height * 0.3)
eventTitleLabel.tag = indexPath.row
eventTitleLabel.textAlignment = .Left
eventTitleLabel.font = UIFont(name: "Montserrat-Bold", size: screenSize.height * (24/568))
eventTitleLabel.textColor = UIColor.blackColor()
eventTitleLabel.center = CGPointMake(cell.contentView.frame.width * 0.35, cell.contentView.frame.height * 0.35)
dateLabel.textColor = colorWithHexString("#C5C7C9")
let dateString = "\(dates[indexPath.row]) \(times[indexPath.row])"
dateLabel.text = dateString
dateLabel.frame = CGRectMake(0, 0, cell.frame.width * 0.5, cell.frame.height * 0.3)
dateLabel.tag = indexPath.row
dateLabel.textAlignment = .Left
dateLabel.font = UIFont(name: "Montserrat-Regular", size: screenSize.height * (10/568))
dateLabel.center = CGPointMake(cell.contentView.frame.width * 0.35, cell.contentView.frame.height * 0.6)
//for setting bottom label
//Code sets label (yourLabel)'s text to "Tap and hold(BOLD) button to start recording."
let boldAttribute = [
//You can add as many attributes as you want here.
NSFontAttributeName: UIFont(name: "Montserrat-Bold", size: 11.0)!]
let regularAttribute = [
NSFontAttributeName: UIFont(name: "Montserrat-Regular", size: 11.0)!]
let beginningAttributedString = NSAttributedString(string: authors[indexPath.row], attributes: boldAttribute )
//let boldAttributedString = NSAttributedString(string: locationNames[indexPath.row], attributes: boldAttribute)
let boldAttributedString = NSAttributedString(string: "Monterey, CA USA", attributes: regularAttribute)
let fullString = NSMutableAttributedString()
fullString.appendAttributedString(beginningAttributedString)
fullString.appendAttributedString(NSAttributedString(string: " ", attributes: regularAttribute)) //space
fullString.appendAttributedString(boldAttributedString)
//------
authorLabel.attributedText = fullString
authorLabel.textColor = colorWithHexString("#C5C7C9")
authorLabel.frame = CGRectMake(0, 0, cell.frame.width, cell.frame.height * 0.3)
authorLabel.tag = indexPath.row
authorLabel.textAlignment = .Left
authorLabel.center = CGPointMake(cell.contentView.frame.width * 0.5, cell.contentView.frame.height * 0.8)
categoryView.frame = CGRectMake(0, 0, screenSize.width * (50/screenSize.width), screenSize.width * (50/screenSize.width))
categoryView.layer.cornerRadius = categoryView.frame.width * 0.5
categoryView.center = CGPointMake(cell.contentView.frame.width * 0.7, cell.contentView.frame.height * 0.35)
categoryView.backgroundColor = colorWithHexString("#3dccff")
cell.contentView.addSubview(categoryView)
cell.contentView.addSubview(eventTitleLabel)
cell.contentView.addSubview(dateLabel)
cell.contentView.addSubview(locationLabel)
cell.contentView.addSubview(authorLabel)
cell.contentView.layer.addSublayer(botBorder)
print("called cell")
return cell
}
And this works the first time. However I learned from the print to console that this is called every time you scroll, and also after I add new items that take up new cells in my tableview. When that happens I get this overlapping -
How do I fix this? I looked also at TableViewCell is piled up and appear again and again and tried putting cell.contentView.removeFromSuperView() at the beginning of this function so it would clear out the old content but that resulted in absolutely nothing showing up.
What is the right way to add content programmatically?
The tableview cells are recycled, therefore each time a cell is presented its going to have whatever you put in it last, you will need to appropriately handle a cell that comes back filled with the labels you have put in. Probably should have some kind of init method of the cell that is called only once per new cell, and is ignored when the cell is recycled, then just edit the labels and what ever else as normal. This kind of functionality should be built into the cells custom class itself instead of inside the cellForRowAtIndexPath

Custom tableview Cell position is wrong

I want to implement the chat bubble for my app,everything goes fine except the positioning of those cells. I wonder if there is a way to haddle this, this is so awkward to have a screen like this
(I have only 1 section and 2 rows in this tableview)
Thx for attence the cells look like this
http://imgur.com/9F6JH39
The 2nd line should be in the second cell but it appers in the 3rd one and i dont know why
These are the code for my custom view for my custom class:
class DialogCell: UITableViewCell {
#IBOutlet var iconImageView: UIImageView!
#IBOutlet var messageBackgroundView: UIImageView!
#IBOutlet var messageContentTextView: UITextView!
var maximumSize:CGSize = CGSize(width: 150, height: 1000)
var padding:CGFloat = 10
var exactSize:CGSize = CGSize(width: 0, height: 0)
let magicNumber:CGFloat = 50
func setViews(icon:UIImage,messageContent:String,backgroungImage:UIImage){
iconImageView = UIImageView()
messageContentTextView = UITextView()
messageBackgroundView = UIImageView()
iconImageView.layer.cornerRadius = magicNumber / 8
iconImageView.layer.masksToBounds = true
let orginX = self.frame.origin.x
let orginY = self.frame.origin.y
self.iconImageView.frame.origin.x = orginX + padding
self.iconImageView.frame.origin.y = orginY + padding
self.iconImageView.image = icon
self.iconImageView.frame.size = CGSize(width: magicNumber, height: magicNumber)
messageContentTextView.text = messageContent
exactSize = messageContentTextView.sizeThatFits(maximumSize)
self.messageContentTextView.frame = CGRect(origin: CGPoint(x: orginX + 3 * padding + magicNumber, y: orginY + padding),
size: exactSize)
self.messageContentTextView.allowsEditingTextAttributes = false
// self.messageContentTextView.
self.messageContentTextView.backgroundColor = UIColor.clearColor()
// exactSize.height
exactSize.width += 1.5 * padding
exactSize.height += 0.5 * padding
var new_image = backgroungImage.resizableImageWithCapInsets(UIEdgeInsets(top: 15, left: 10, bottom: 5, right: 5), resizingMode: UIImageResizingMode.Tile)
messageBackgroundView.image = new_image
self.messageBackgroundView.frame = CGRect(origin: CGPoint(x: orginX + 2 * padding + magicNumber, y: orginY + padding),
size: exactSize)
self.layer.opacity = 0.3
self.addSubview(iconImageView)
self.addSubview(messageBackgroundView)
self.addSubview(messageContentTextView)
}
![}][2]
And the main method in my tableView Controller
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier(reuseIdentifier, forIndexPath: indexPath) as DialogCell
// dialogues[indexPath.row % dialogues.count]
var str:String = "\(indexPath.row) Line"
for _ in 0...2 {
str += str
}
cell.textLabel?.text = "\(indexPath.row) Line"
cell.setViews(UIImage(named: "minion")!, messageContent: str, backgroungImage: UIImage(named: "dialogue")!)
return cell}
I don't know the exact answer but I can advise a different way which I did.
You can add an UIScrollView to your controller and every time when a message received add it to your scrollView dynamically and change the contentSize of scroll.Also you need to control your label positions every time. This can be another way but it's not your answer.

Automatically Resize UILabel

In Xcode 6 Beta 5, I had a chat interface that looks like the iOS 7 messages app, where the UILabel that the text was inside sized to the width of the text itself. When I updated to Beta 6, I noticed an option for UILabel in interface builder that I hadn't noticed before:
When I have the explicit width set, the width doesn't change at all based on the width of the text. When I uncheck explicit, the width of the text is at least 234, so it expands out of the view.
I am using a UICollectionView inside of a UIViewController, and here is my cell for item at index path method:
func collectionView(collectionView: UICollectionView!, cellForItemAtIndexPath indexPath: NSIndexPath!) -> UICollectionViewCell! {
let defaults = NSUserDefaults.standardUserDefaults()
let row = indexPath.row
var cell: UICollectionViewCell
let path = UIBezierPath()
let object: AnyObject = (messages[row] as NSDictionary).objectForKey("user_id")!
let uid: AnyObject = defaults.objectForKey("user_id")!
if "\(object)" == "\(uid)" {
cell = collectionView.dequeueReusableCellWithReuseIdentifier(right_chat_bubble, forIndexPath: indexPath) as UICollectionViewCell
path.moveToPoint(CGPointMake(0, 0))
path.addLineToPoint(CGPointMake(0, 10))
path.addLineToPoint(CGPointMake(12, 5))
path.addLineToPoint(CGPointMake(0, 0))
}
else {
cell = collectionView.dequeueReusableCellWithReuseIdentifier(left_chat_bubble, forIndexPath: indexPath) as UICollectionViewCell
path.moveToPoint(CGPointMake(0, 5))
path.addLineToPoint(CGPointMake(12, 10))
path.addLineToPoint(CGPointMake(12, 0))
path.addLineToPoint(CGPointMake(0, 5))
}
let initial_view = cell.viewWithTag(101) as UILabel
initial_view.layer.cornerRadius = 20
initial_view.layer.masksToBounds = true
let name = (messages[row] as NSDictionary).objectForKey("name")! as String
let name_array = name.componentsSeparatedByString(" ")
let first_initial = name_array[0]
let last_initial = name_array[1]
let first_char = first_initial[0]
let last_char = last_initial[0]
let initials = first_char + last_char
initial_view.text = initials
let circle: UIView = cell.viewWithTag(103)! as UIView
let mask = CAShapeLayer()
mask.frame = circle.bounds
mask.path = path.CGPath
circle.layer.mask = mask
let message = cell.viewWithTag(102) as ChatLabel
message.enabledTextCheckingTypes = NSTextCheckingType.Link.toRaw()
message.delegate = self
message.text = (messages[row] as NSDictionary).objectForKey("content")! as String
message.layer.cornerRadius = 15
message.layer.masksToBounds = true
message.userInteractionEnabled = true
return cell
}
take a look at sizeThatFits: and sizeToFit:
https://developer.apple.com/library/prerelease/ios/documentation/UIKit/Reference/UIView_class/index.html#//apple_ref/occ/instm/UIView/sizeThatFits:
https://developer.apple.com/library/prerelease/ios/documentation/UIKit/Reference/UIView_class/index.html#//apple_ref/occ/instm/UIView/sizeToFit
A UILabel can call sizeThatFits like :
myLabelLbl.text = #"some text"
CGSize maximumLabelSize = CGSizeMake(200, 800)
CGSize expectedSize = [myLabelLbl sizeThatFits:maximumLabelSize]
myLabelLbl.frame = CGRectMake(0, 0, expectedSize.width, expectedSize.height) //set the new size

Resources