This is my Split View Controller with two controllers. In both I use UITableView. In both I implement tableView(viewForHeaderInSection:) method.
override func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
var title = "Some Title"
return UIView.viewForHeaderInSectionWithTitle(title)
}
My UIView extesion:
extension UIView {
class func viewForHeaderInSectionWithTitle(title: String) -> UIView? {
var headerView: UIView?
headerView = UIView(frame: CGRectMake(0, 0, CGRectGetWidth(UIScreen.mainScreen().bounds), 25))
headerView!.backgroundColor = UIColor.catskillWhite()
let frame = CGRectMake(15, 3, CGRectGetWidth(headerView!.frame) - 15, 19)
let label = UILabel(frame: frame)
label.text = title
label.numberOfLines = 0
label.textColor = UIColor.curiousBlue()
label.font = UIFont.latoLightFontWithSize(15)
label.sizeToFit()
headerView!.addSubview(label)
return headerView
}
}
So same source, but different result. Why? The height is different, and label is not centered in the second one. Any ideas?
Related
Apologies in advance but I've been going around in circles on this for days...
I have a UIViewController that is presented from another VC (in my case, a button is tapped). The new VC (code below) is made up of:
a UITextView which dynamically increases in height based on content the user types in
a UIView which has a fixed height
and then below that, to the bottom of the ViewController view, is a UICollectionView. This has 5 sections in it that horizontally scroll. I will be inserting different content into each of those 5 cells but am just having issues at the moment when the UICollectionView resizes. I've been able to get most of them cleared except for one.
This error can be reproduced whenever the UITextView increases in size to between 3-6 lines long, and again at 13 lines... This happens in the simulator using e.g. an iPhone 8 plus but on an iPhone 11 Pro Max, it only happens around 19 lines of text in the UITextView.
I am using TinyContraints here but I've tested using traditional programmatic constraints and had the same issue.
//
// NewItemVC.swift
//
import TinyConstraints
import UIKit
class NewItemVC: UIViewController {
let titleField = UITextView()
let bannerContainer = UIView(frame: .zero)
var flowLayout = UICollectionViewFlowLayout()
lazy var horizontalCV = UICollectionView(frame: .zero, collectionViewLayout: flowLayout)
let genericCellID = "genericCellID"
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .orange
setupHeaderArea()
setupBannerArea()
setupHorizontalCollectionView()
}
func setupHeaderArea(){
titleField.backgroundColor = .lightGray
titleField.textContainerInset.top = 55
titleField.textContainerInset.bottom = 20
titleField.textContainerInset.left = 15
titleField.textContainerInset.right = 15
titleField.font = UIFont.boldSystemFont(ofSize: 20)
// add to main view & position
view.addSubview(titleField)
titleField.topToSuperview()
titleField.leftToSuperview()
titleField.rightToSuperview()
titleField.isScrollEnabled = false
NotificationCenter.default.addObserver(self, selector: #selector(updateTextFieldHeight), name: UITextView.textDidChangeNotification, object: nil)
// add a header label
let headerLabel = UILabel()
headerLabel.textColor = .systemBlue
headerLabel.text = "NEW ITEM"
headerLabel.font = UIFont.systemFont(ofSize: 12)
view.addSubview(headerLabel)
headerLabel.topToSuperview(offset: 35)
headerLabel.leftToSuperview(offset: 20)
headerLabel.height(13)
// add card handle
let handle = UIView()
handle.backgroundColor = .black
handle.alpha = 0.2
handle.width(45)
handle.height(5)
handle.layer.cornerRadius = 5/2
view.addSubview(handle)
handle.topToSuperview(offset: 10)
handle.centerXToSuperview()
}
func setupBannerArea(){
// position container
view.addSubview(bannerContainer)
bannerContainer.topToBottom(of: titleField)
bannerContainer.edgesToSuperview(excluding: [.top, .bottom])
bannerContainer.height(62)
bannerContainer.backgroundColor = .cyan
}
func setupHorizontalCollectionView() {
horizontalCV = UICollectionView(frame: .zero, collectionViewLayout: flowLayout)
horizontalCV.dataSource = self
horizontalCV.delegate = self
horizontalCV.backgroundColor = .yellow
horizontalCV.contentInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
horizontalCV.scrollIndicatorInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
view.addSubview(horizontalCV)
horizontalCV.topToBottom(of: bannerContainer)
horizontalCV.edgesToSuperview(excluding: .top)
horizontalCV.isPagingEnabled = true
horizontalCV.contentInsetAdjustmentBehavior = .never
flowLayout.scrollDirection = .horizontal
flowLayout.minimumLineSpacing = 0
flowLayout.minimumInteritemSpacing = 0
horizontalCV.register(UICollectionViewCell.self, forCellWithReuseIdentifier: genericCellID)
}
#objc func updateTextFieldHeight() {
DispatchQueue.main.async{
self.horizontalCV.collectionViewLayout.invalidateLayout()
}
}
}
// MARK:- Delegates - UITextViewDelegate
extension NewItemVC: UITextViewDelegate {
func textViewDidChange(_ textView: UITextView) {
let size = CGSize(width: textView.frame.width, height: .infinity)
let estimatedSize = textView.sizeThatFits(size)
textView.constraints.forEach { (constraint) in
if constraint.firstAttribute == .height {
constraint.constant = estimatedSize.height
}
}
}
}
// MARK:- UICollectionView Data Source
extension NewItemVC: UICollectionViewDataSource {
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 5
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: genericCellID, for: indexPath)
if indexPath.row % 2 == 0 {
cell.backgroundColor = .orange
} else {
cell.backgroundColor = .red
}
return cell
}
}
// MARK:- Delegates - UICollectionView Flow Layout
extension NewItemVC: UICollectionViewDelegateFlowLayout {
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let requiredHeight = self.view.frame.height - (titleField.frame.height + bannerContainer.frame.height)
let requiredWidth = view.frame.width
return CGSize(width: requiredWidth, height: requiredHeight)
}
}
From what I've been able to tell, there's some issue randomly where the collectionView frame and the contentSize are out by 24 points but I can't work out why/where etc...
The error is as follows:
2020-02-06 20:39:18.425280+1100 Scrolling[67237:8005204] The behavior of the UICollectionViewFlowLayout is not defined because:
2020-02-06 20:39:18.425378+1100 Scrolling[67237:8005204] the item height must be less than the height of the UICollectionView minus the section insets top and bottom values, minus the content insets top and bottom values.
2020-02-06 20:39:18.425672+1100 Scrolling[67237:8005204] The relevant UICollectionViewFlowLayout instance is <UICollectionViewFlowLayout: 0x7fcf56d4a120>, and it is attached to <UICollectionView: 0x7fcf5785d000; frame = (0 208.667; 414 487.333); clipsToBounds = YES; gestureRecognizers = <NSArray: 0x600000ce8a50>; layer = <CALayer: 0x600000213a00>; contentOffset: {0, 0}; contentSize: {2070, 511}; adjustedContentInset: {0, 0, 0, 0}; layout: <UICollectionViewFlowLayout: 0x7fcf56d4a120>; dataSource: <Scrolling.NewItemVC: 0x7fcf56d20110>>.
2020-02-06 20:39:18.425760+1100 Scrolling[67237:8005204] Make a symbolic breakpoint at UICollectionViewFlowLayoutBreakForInvalidSizes to catch this in the debugger.
I'm building a chat application where each message are inserted into a row inside a table. Each row contains an avatar and a message. I want to set the width and height of the UITextArea as per the length of the text to put inside.
Below is the code I've used. But here, both height and width are constant (200x50)
PS: I'm a newbie to Swift and ios and I'm using Swift 3. Every code I got after searching is in objective-c or swift 2
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = Bundle.main.loadNibNamed("ChatBox1", owner: self, options: nil)?.first as! ChatBox1
let myTextField: UITextView = UITextView(frame: CGRect(x: 30, y: 20, width: 200.00, height: 50.00));
cell.addSubview(myTextField)
myTextField.isScrollEnabled = false
myTextField.isUserInteractionEnabled = false
myTextField.backgroundColor = UIColor.lightGray
myTextField.text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
myTextField.layer.cornerRadius = 5
print(myTextField.intrinsicContentSize)
let image = UIImage(named: "agent")
let imageView = UIImageView(image: image)
imageView.frame = CGRect(x: 0, y: 0, width: 40, height: 40)
cell.addSubview(imageView)
return cell
}
This two methods are done to set Height and width of textview according to the text on chat.
You can use these. (swift 2.3)
var screenrect = UIScreen.mainScreen().bounds
func GET_WIDTH(textView : UITextView , text : String)-> CGFloat
{
textView.text = text;
let size = textView.bounds.size
let newSizeWidth = textView.sizeThatFits(CGSize(width: CGFloat.max, height: size.height))
// Resize the cell only when cell's size is changed
if size.width != newSizeWidth.width
{
if( newSizeWidth.width > screenrect.width-120 )
{
textView.layer.frame.size.width = screenrect.width-120;
}
else if ( newSizeWidth.width < 40 )
{
textView.layer.frame.size.width = 40
}
else
{
textView.layer.frame.size.width = newSizeWidth.width;
}
}
return textView.layer.frame.size.width + 40;
}
func GET_HEIGHT(textView : UITextView , text : String)-> CGFloat
{
textView.text = text;
let size2 = textView.bounds.size
let newSize = textView.sizeThatFits(CGSize(width: size2.width, height: CGFloat.max))
if size2.height != newSize.height
{
if( newSize.height < 40 )
{
textView.layer.frame.size.height = 40
}
else
{
textView.layer.frame.size.height = newSize.height
}
}
return textView.layer.frame.size.height + 15;
}
You have to call the functions of the textview like this to set height and width.
let textViewRight=UITextView(frame: CGRectMake(0, 4, 40, 40));
textViewRight.layer.frame.size.width = GET_WIDTH(textViewRight, text: currentObject.chat_userMessage)
textViewRight.layer.frame.size.height = GET_HEIGHT(textViewRight, text: currentObject.chat_userMessage)
Try this code:
Answer 1:
func tableView(tableView:UITableView!, numberOfRowsInSection section: Int) -> Int {
yourTableViewName.estimatedRowHeight = 44.0 // Standard tableViewCell size
yourTableViewName.rowHeight = UITableViewAutomaticDimension
return yourArrayName.count }
And also put this code inside your Cell for incase...
yourCell.sizeToFit()
Answer 2:
override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return UITableViewAutomaticDimension
}
override func tableView(_ tableView: UITableView, estimatedHeightForRowAt indexPath: IndexPath) -> CGFloat {
return UITableViewAutomaticDimension
}
in viewDidLoad Add this
tableView.estimatedRowHeight = 44.0
tableView.rowHeight = UITableViewAutomaticDimension
Just add these two lines and your problem will b solved
Take textView height constraint and set it equal to the content size of the textView.
Alternatively, if you use autolayout you can set the content hugging and compression property to 1000. It should expand your cell according to the content.
So I have been trying to create a generic chat bubble-ish look with a resizable view and label inside a UITableView cell. Things were working well until I tried to add in the resizable feature. It cuts off just a bit at the bottom (or does not give any margin), and I have not worked with completely dynamic cells like this before so I am not sure how to fix this. I tried adding a 20px buffer but it did not help. I appreciate the help!
(Code below)
import QuartzCore
import UIKit
class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
#IBOutlet weak var tableView: UITableView!
var listOfStrings = [String] ()
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
// When I Uncomment the 2 lines below, the cell cuts off and only displays a little bit of the blue view.
// self.tableView.rowHeight = UITableViewAutomaticDimension
// self.tableView.estimatedRowHeight = 75
listOfStrings.append("Switch, Button, Segmented Control, Slider, Textfield")
listOfStrings.append("Switch, Button, Segmented Control, Slider, Textfield")
listOfStrings.append("Switch, Button, Segmented Control, Slider, Textfield")
}
func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
print(indexPath.row)
}
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = self.tableView.dequeueReusableCellWithIdentifier("someCell") as! SomeTableViewCell
cell.contentView.viewWithTag(0)!.backgroundColor = UIColor.clearColor()
let size = cell.layer.bounds
let tableSize = self.tableView.layer.bounds
let viewCGR = CGRect(x: size.minX, y: size.height/2, width: tableSize.width, height: size.height/2)
let view: UIView = UIView(frame: viewCGR)
let labelCGR = CGRect(x: 0, y: 0, width: viewCGR.width, height: viewCGR.height)
let label: UILabel = UILabel(frame: labelCGR)
label.numberOfLines = 0
label.preferredMaxLayoutWidth = CGRectGetWidth(tableView.bounds)
label.textAlignment = NSTextAlignment.Center
label.text = listOfStrings[indexPath.row]
label.sizeToFit()
self.tableView.updateConstraints()
let newViewCGR = CGRect(x: viewCGR.minX, y: viewCGR.minY, width: label.frame.width+20, height: label.frame.height+20)
view.frame = newViewCGR
view.sizeToFit()
label.textColor = UIColor.blackColor()
label.center.x = view.center.x
// self.tableView.updateConstraints()
view.addSubview(label)
self.tableView.updateConstraints()
view.backgroundColor = UIColor.blueColor()
view.layer.cornerRadius = 6
cell.addSubview(view)
self.tableView.updateConstraints()
return cell
}
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return listOfStrings.count
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
Btw I am not using autolayout + constraints to get the functionality of having the bubble be able to appear on the left or right (depending on incoming or outgoing).
After the new API by apple you don't calculate height. You just use autolayout to do the work. I think this link could help you a lot. By the way there is a nice tutorial Self-sizing Table View Cells
you don't have to calculate height row for height cell .
you add this code in viewDidLoad()
tableView.rowHeight = UITableViewAutomaticDimension
tableView.estimatedRowHeight = 50
#Ryan find the height of the cell with the text using following method,
CGRect textRect =
[attributedText boundingRectWithSize:CGSizeMake(cellWidth, CGFLOAT_MAX)
options:(NSStringDrawingUsesLineFragmentOrigin|NSStringDrawingUsesFontLeading)
context:nil];
call this method from
heightForRowAtIndexPath:
and set the height of the cell here as textRect.size.height
Does anyone know of a built in method or custom way to access and change styles of the CURRENT section header in a UITableView (style plain) as the UITableView is scrolled in Swift.
My preset style for the header is:
override func tableView(tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
let header: UITableViewHeaderFooterView = view as! UITableViewHeaderFooterView //recast your view as a UITableViewHeaderFooterView
header.textLabel.font = UIFont(name: "HelveticaNeue-CondensedBold", size: 14)
header.contentView.backgroundColor = UIColor.groupTableViewBackgroundColor()
header.textLabel.textColor = UIColor.grayColor()
}
Specifically I would like to change the header background color to black and the text color to white only for the current section header as the view scrolls. The style for other headers remain in the preset style.
In a current Application of mine:
override public func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView?
{
let view: UIView
if let _view: UIView = tableView.headerViewForSection(section)
{
view = _view
} else {
let dxOffset: CGFloat = 16.0
view = UIView(frame: CGRectMake(dxOffset, 0, tableView.frame.size.width - dxOffset, TableViewViewsHeight.sectionHeight))
}
// create our label
let label: UILabel = UILabel(frame: view.frame)
label.textColor = UIColor.appEmptyTextColor()
label.text = "\(self.letters[section])"
label.font = UIFont.systemFontOfSize(UIFont.smallSystemFontSize() + 4.0)
// create the separator frame
var separatorFrame: CGRect = view.frame
separatorFrame.size = CGSizeMake(separatorFrame.size.width, 1.0)
separatorFrame.offset(dx: 0.0, dy: view.frame.size.height - 1.0)
// create the separator
let imageView: UIImageView = UIImageView(frame: separatorFrame)
imageView.backgroundColor = UIColor.appEmptyGolfTrainingTextColor()
imageView.alpha = 0.4
// add subviews
view.addSubview(label)
view.addSubview(imageView)
// setup the view
view.backgroundColor = UIColor.whiteColor()
return view
}
This creates a header with a white background, a separator and a label containing a letter.
You should be using func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? to change the appearance of your section header.
I'm trying to use the built-in textLabel in a UITableViewHeaderFooterView in order display titles in the section headers of a UITableView.
These titles have an unknown amount of content and so need to cover multiple lines.
If this was a table cell then myCell.numberOfLines = 0 would work (along with estimatedHeightForRowAtIndexPath returning UITableViewAutomaticDimension). But I can't get anything similar to work with table headers.
I've tried setting textLabel.numberOfLines = 0 in viewForHeaderInSection and/or in willDisplayHeaderView. I've also tried setting it in a custom subclass I've created that the headers are using (set up with let sectionHeader = tableView.dequeueReusableHeaderFooterViewWithIdentifier("myIdentifier") as MyTableSectionHeaderSubclass). In that subclass I've tried setting textLabel.numberOfLines = 0 in the init function, as well as in layoutSubviews()
I've already set the correct height of each header by calculating the amount of space the text string will take up (using CGSizeMake in heightForHeaderInSection, can provide more info about this if it's of any help). So, there's enough vertical space for the labels to expand - they're just stuck on one line, with their text cut off and ending with an ellipsis.
I'm trying this approach in order to avoid using a custom UILabel to display the title. While I can apply multiline that way, this brings other problems such as label position/frame being lost when table rows are added or deleted.
Does anyone know if multi-line text is even possible with a UITableViewHeaderFooterView's built-in textLabel? Or is a custom UILabel my only option?
Many thanks!
I do think using a custom UILabel is a better approach as you can take control on all attributes.
First of all, a handy function to calculate the UILabel height. (Below is my version for my specific project). Notice that I set the NSMutableParagraphStyle which I think is the best way to handle line break, line spacing etc.
internal func heightForLabel(attributedString:NSMutableAttributedString, font:UIFont, width:CGFloat, lineSpacing: CGFloat) -> CGFloat{
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.lineSpacing = lineSpacing
let label:UILabel = UILabel(frame: CGRect(x:0, y:0, width:width, height:CGFloat.greatestFiniteMagnitude))
label.numberOfLines = 0
label.lineBreakMode = .byWordWrapping
label.font = font
label.textAlignment = .left
attributedString.addAttribute(NSParagraphStyleAttributeName, value:paragraphStyle, range:NSMakeRange(0, attributedString.length))
label.attributedText = attributedString
label.sizeToFit()
return label.frame.height
}
Then in your view controller, pre-calculate the section header heights
fileprivate let sectionHeaders = ["Header1", "Loooooooooooooooooooooong Header which occupies two lines"]
fileprivate var sectionHeaderHeights : [CGFloat] = []
override func viewDidLoad() {
super.viewDidLoad()
//Calculate the label height for each section headers, then plus top and down paddings if there is any. Store the value to `sectionHeaderHeights`
}
UITableViewDelegate methods
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
return sectionHeaderHeights[section]
}
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let sectionHeader = UIView(frame: CGRect(x: 0, y: 0, width: view.frame.width, height: sectionHeaderHeights[section]-paddings))
sectionHeader.backgroundColor = .clear
let sectionTitleLabel = UILabel()
sectionTitleLabel.text = sectionTitles[section]
sectionTitleLabel.font = UIFont(name: "GothamPro", size: 18)
sectionTitleLabel.textColor = .black
sectionTitleLabel.backgroundColor = .clear
sectionTitleLabel.frame = CGRect(x: padding, y: sectionHeader.frame.midY, width: sectionTitleLabel.frame.width, height: sectionTitleLabel.frame.height)
sectionHeader.addSubview(sectionTitleLabel)
return sectionHeader
}
In the Interface Builder drug the Label above the prototype cell. In the Attribute Inspector set number of lines = 0, Line Break to Word Wrap and enter your text.
Use this one:
self.tableView.sectionHeaderHeight = UITableViewAutomaticDimension
Keep in mind that autosizing works only with:
lineBreakMode="tailTruncation"
numberOfLines="0"
One you do that, make sure that inside your cell the contentView constraints are set to top, left, bottom, right related to your textfield.
This way iOS will size the cell to textfield size.