How to add a subView to all UITable Cells - swift

Without using storyboard.
I'm trying to add an error label to any cell where a value is not filled out/saved. I concluded that I dont need to show this logic and the issue is showing more than one error labels in all/more than one tableView's cell.
I've created this viewLabel to reuse:
struct Label {
static let errorLabel: UILabel = {
let label = UILabel()
label.frame = CGRect(x: 0, y: 0, width: 18, height: 18)
label.text = "!"
label.layer.cornerRadius = label.frame.height / 2
label.backgroundColor = UIColor.red
label.translatesAutoresizingMaskIntoConstraints = false
label.textAlignment = .center
label.textColor = UIColor.white
label.font = UIFont(name: "CircularStd-Black", size: 14)
label.clipsToBounds = true
return label
}()
}
Inside cellForRowAt:
// I'm using detailTextLabel
let cell = UITableViewCell(style: .value1, reuseIdentifier: cellId)
cell.addSubview(Label.errorLabel)
// [...] constraints for Label.errorLabel
return cell
Based on this example, I'd expect to show a red circle on all cells but instead, it shows on the last cell. Why?

A few things wrong here:
You should only add to cell contentView. (https://developer.apple.com/documentation/uikit/uitableviewcell/1623229-contentview)
Example:
cell.contentView.addSubview(myLabel)
Better reuse would be to add your, label once.
This can be done in interface builder or init or awakeFromNib. This way reuse will be more efficient.
And this is the main issue you are seeing:
You are adding one static label, again and again.
Meaning: only the last cell will display it because there is only one label (:
Better use a function to create the label (Factory function)
static func createLabel() -> UILabel {
let label = UILabel()
label.frame = CGRect(x: 0, y: 0, width: 18, height: 18)
label.text = "!"
label.layer.cornerRadius = label.frame.height / 2
label.backgroundColor = UIColor.red
label.translatesAutoresizingMaskIntoConstraints = false
label.textAlignment = .center
label.textColor = UIColor.white
label.font = UIFont(name: "CircularStd-Black", size: 14)
label.clipsToBounds = true
return label
}

Related

Access and update label.text or other UILabel properties inside a stackview programatically in Swift

I created a stackview with labels programatically in Swift. However, I was trying to find out how i can update the labels programmatically? (I did not use storyboard or IBOutlets)
let LabelStack: UIStackView = {
let label1: UILabel = {
let label = UILabel()
label.text = "Label 1"
label.font = .systemFont(ofSize: 14, weight: .bold)
label.numberOfLines = 0
label.backgroundColor = .clear
label.textAlignment = .left
label.sizeToFit()
return label
}()
let label2: UILabel = {
let label = UILabel()
label.text = "Label 2"
label.font = .systemFont(ofSize: 14, weight: .bold)
label.numberOfLines = 0
label.backgroundColor = .clear
label.textAlignment = .left
label.sizeToFit()
return label
}()
let stack = UIStackView(arrangedSubviews: [label1, label2])
stack.distribution = .equalSpacing
stack.spacing = 4.0
return stack
}()
When trying to update the label text with a function, I wasnt sure how to access the label properties to make this change. Normally, for a label created outside of the stack i could simply use:
func updateLabel() {
label1.text = "Updated Label 1 text"
label2.text = "Updated Label 2 text"
}
What is the syntax to use to access these label properties sitting inside the UIStackview with labels?
You can make them outside let labelStack: UIStackView = {
let label1: UILabel = {
let label = UILabel()
label.text = "Label 1"
label.font = .systemFont(ofSize: 14, weight: .bold)
label.numberOfLines = 0
label.backgroundColor = .clear
label.textAlignment = .left
label.sizeToFit()
return label
}()
let label2: UILabel = {
let label = UILabel()
label.text = "Label 2"
label.font = .systemFont(ofSize: 14, weight: .bold)
label.numberOfLines = 0
label.backgroundColor = .clear
label.textAlignment = .left
label.sizeToFit()
return label
}()
let labelStack: UIStackView = {
let stack = UIStackView(arrangedSubviews: [label1, label2])
stack.distribution = .equalSpacing
stack.spacing = 4.0
return stack
}()
Or do this
if let label1 = labelStack.arrangedSubviews.first as? UILabel {
// proceed
}
if let label2 = labelStack.arrangedSubviews.last as? UILabel {
// proceed
}
You can create them outside. But that will require you to add the arrangedSubviews later as it has not been initialized yet. So you could make the stackView Lazy, which waits for init to be run:
let label1: UILabel = {
let label = UILabel()
label.text = "Label 1"
label.font = .systemFont(ofSize: 14, weight: .bold)
label.numberOfLines = 0
label.backgroundColor = .clear
label.textAlignment = .left
label.sizeToFit()
return label
}()
let label2: UILabel = {
let label = UILabel()
label.text = "Label 2"
label.font = .systemFont(ofSize: 14, weight: .bold)
label.numberOfLines = 0
label.backgroundColor = .clear
label.textAlignment = .left
label.sizeToFit()
return label
}()
lazy var labelStack: UIStackView = {
let stack = UIStackView(arrangedSubviews: [label1, label2])
stack.distribution = .equalSpacing
stack.spacing = 4
return stack
}()
If you have to labels and 2 texts statically you can do this:
zip(labelStack.arrangedSubviews, ["textupdate1", "textupdate2"]).forEach { (element value) in
(element as? UILabel)?.text = value
}

Add label in center of imageView

I have the two images like in the picture at the end of the question (the image of a list and a red dot). I want to add a label in the center of the red dot. This is my code that doesn't work:
image = UIImageView(image: UIImage(named: "pallino"))
image.frame = CGRect(x: 55, y: self.view.frame.height-60, width: 22, height: 22)
self.view.addSubview(image)
image.layer.cornerRadius = image.frame.width/2
label = UILabel(frame: CGRect(x: self.image.center.x, y: self.image.center.y, width: image.frame.size.width, height: image.frame.size.height))
label.text = "4"
label.font = UIFont(name:"HelveticaNeue-Bold", size: 15.0)
label.translatesAutoresizingMaskIntoConstraints = false
label.textColor = UIColor.black
image.addSubview(label)
Can someone tell me were am I wrong?
Problem in this line:
label = UILabel(frame: CGRect(x: self.image.center.x, y: self.image.center.y, width: image.frame.size.width, height: image.frame.size.height))
self.image.center.x - The center point is specified in points in the coordinate system of its superview, it is mean that self.image.center is not center of image
You need frame for label, something like this:
let imageSize = 22
let frame = CGRect(x: 0, y: 0, width: imageSize, height: imageSize)
let label = UILabel(frame: frame)
label.aligment = .center
You can set constraint in your label(centered Horizontally and Vertically). Try with the following code.
let label = UILabel()
label.text = "4"
label.font = UIFont(name:"HelveticaNeue-Bold", size: 15.0)
label.translatesAutoresizingMaskIntoConstraints = false
label.textColor = UIColor.black
image.addSubview(label)
label.centerXAnchor.constraint(equalTo: self.image.centerXAnchor).isActive = true
label.centerYAnchor.constraint(equalTo: self.image.centerYAnchor).isActive = true
To center the label in UIImageView you can refer to this example which is tested and working solution.
extension UIImageView {
/// Create label programmatically
/// - Returns: UILabel
private func ageSensitiveLabel() -> UILabel {
let label = UILabel(frame: CGRect(x: 0, y: 0, width: self.bounds.width, height: self.bounds.height))
label.text = "Content"
label.font = .systemFont(ofSize: 5.0)
label.textAlignment = .center
label.numberOfLines = 0
label.minimumScaleFactor = 0.5
label.adjustsFontSizeToFitWidth = true
label.baselineAdjustment = .alignCenters
label.textColor = .white
return label
}
/// Add label as subview to UIImageView
func addAgeSensitiveLabel() {
self.subviews.forEach { view in
DispatchQueue.main.async {
view.removeFromSuperview()
}
}
self.addSubview(ageSensitiveLabel())
}
}
Use it with UIImageView
imageView.addAgeSensitiveLabel()

Label does not adjust Font Size to fit width

This is how my app looks although I entered this code inside my ViewController class:
#IBOutlet var label: UILabel!
override func viewDidLoad() {
super.viewDidLoad()
label.text = "Hello World"
label.adjustsFontSizeToFitWidth = true
label.numberOfLines = 1
label.minimumScaleFactor = 0.1
}
Your text data is not more than label width that's why label text font is same as already set.
IF your text data is more then label width then it will adjust font according to the width.
Please check with label text: "This is the demo to test label text is adjustable or not. You need to test it with this demo data"
Your label font will adjust according to the width.
The font will adjust if the given text is greater than the width of the label.
Try this in playground:
//: A UIKit based Playground for presenting user interface
import UIKit
import PlaygroundSupport
class MyViewController : UIViewController {
override func loadView() {
let view = UIView()
view.backgroundColor = .white
let label = UILabel()
label.frame = CGRect(x: 150, y: 200, width: 200, height: 20)
label.adjustsFontSizeToFitWidth = true
label.numberOfLines = 1
label.backgroundColor = UIColor.lightGray
label.text = "Hello World! How are you doing today? "
label.textColor = .black
view.addSubview(label)
self.view = view
}
}
// Present the view controller in the Live View window
PlaygroundPage.current.liveView = MyViewController()
The result is the following:
I was able to get my UILabel font to dynamically adjust to the necessary size to fit into its parent by following this simple gitconnected article (See link to get all required code!!). I only needed to make two adjustments which were adding the lines label.baselineAdjustment = .alignCenters and label.numberOfLines = 1 so that my label creation now looked like this...
let dynamicFontLabel: UILabel = {
let label = UILabel()
label.font = .systemFont(ofSize: 40)
label.textAlignment = .center
label.numberOfLines = 1;
label.textColor = .black
label.adjustsFontSizeToFitWidth = true
label.baselineAdjustment = .alignCenters
label.translatesAutoresizingMaskIntoConstraints = false
return label
}()
The label.baselineAdjustment = .alignCenters property ensured that if my font size was too large and needed to be downsized, my text would still remain centered vertically in the UILabel. I also only wanted my text to only span one line so if you want more than that you can just remove the label.numberOfLines = 1 property.

UITableViewCell accessoryView not showing in iOS9

Trying to display a number on the right side of a table view cell in a label as an 'accessoryView', but the cell only displays the text of cell label. What am I doing wrong?
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let item = items[indexPath.section][indexPath.row]
let cell = UITableViewCell(style:.Default,reuseIdentifier:nil)
if let label = cell.textLabel {
label.text = item.name
}
cell.selectionStyle = .None
let label = UILabel()
label.textColor = UIColor.blackColor()
label.text = String(item.count)
label.textAlignment = .Right
cell.accessoryView = label
return cell
}
I think frame for UILabel is missing.
let label = UILabel(frame: CGRect(x: 0, y: 0, width: 45, height: 45))
label.textColor = UIColor.blackColor()
label.text = String("8")
label.textAlignment = .Right
cell.accessoryView = label
let label = UILabel()
label.textColor = UIColor.blackColor()
label.text = String(item.count)
label.textAlignment = .Right
label.sizeToFit() // ADD THIS LINE
cell.accessoryView = label
should check if you have this part of code on your tableView
tableView.editing = true
Or
tableView.setEditing(true, animated:animated)
accessoryView will be hidden if editing mode is true

How to resize Title in a navigation bar dynamically

I have some views that show up in a navigation controller. Two of these views have a longer title for the navigation bar.
The problem is that when the title is too long to fit, some characters are truncated and "..." is added.
Is there any way I can tell the Navigation bar to re-size the title text automatically to fit?
Used the below code in ViewDidload .
Objective C
self.title = #"Your TiTle Text";
UILabel* tlabel=[[UILabel alloc] initWithFrame:CGRectMake(0,0, 200, 40)];
tlabel.text=self.navigationItem.title;
tlabel.textColor=[UIColor whiteColor];
tlabel.font = [UIFont fontWithName:#"Helvetica-Bold" size: 30.0];
tlabel.backgroundColor =[UIColor clearColor];
tlabel.adjustsFontSizeToFitWidth=YES;
tlabel.textAlignment = NSTextAlignmentCenter;
self.navigationItem.titleView=tlabel;
Swift Version
self.title = "Your Title Text"
let tlabel = UILabel(frame: CGRect(x: 0, y: 0, width: 200, height: 40))
tlabel.text = self.title
tlabel.textColor = UIColor.white
tlabel.font = UIFont.systemFont(ofSize: 30, weight: .bold)
tlabel.backgroundColor = UIColor.clear
tlabel.adjustsFontSizeToFitWidth = true
tlabel.textAlignment = .center
self.navigationItem.titleView = tlabel
Hope it works for you.Thanks
Swift version of Accepted Answer + putting the label text on center :
Swift 2.3:
self.title = "Your TiTle Text"
let tlabel = UILabel(frame: CGRectMake(0, 0, 200, 40))
tlabel.text = self.title
tlabel.textColor = UIColor.whiteColor()
tlabel.font = UIFont.boldSystemFontOfSize(17) //UIFont(name: "Helvetica", size: 17.0)
tlabel.backgroundColor = UIColor.clearColor()
tlabel.adjustsFontSizeToFitWidth = true
tlabel.textAlignment = .Center
self.navigationItem.titleView = tlabel
And Swift 3 :
self.title = "Your TiTle Text"
let frame = CGRect(x: 0, y: 0, width: 200, height: 40)
let tlabel = UILabel(frame: frame)
tlabel.text = self.title
tlabel.textColor = UIColor.white
tlabel.font = UIFont.boldSystemFont(ofSize: 17) //UIFont(name: "Helvetica", size: 17.0)
tlabel.backgroundColor = UIColor.clear
tlabel.adjustsFontSizeToFitWidth = true
tlabel.textAlignment = .center
self.navigationItem.titleView = tlabel
This works for me
Objective C
[UILabel appearanceWhenContainedInInstancesOfClasses:#[[UINavigationBar class]]].adjustsFontSizeToFitWidth = YES;
Swift Version
UILabel.appearance(whenContainedInInstancesOf: [UINavigationBar.self]).adjustsFontSizeToFitWidth = true
In case you have a view added into titleView, and you want to resize the view, you can use this code (Swift 3):
self.translatesAutoresizingMaskIntoConstraints = false
self.layoutIfNeeded()
self.sizeToFit()
self.translatesAutoresizingMaskIntoConstraints = true
None of the above solutions seam to work reliably for me.
However I found a solution by using different elements of the provides answers, its in Swift 2 and is really elegant as it does not require any custom code each time you change the label, it just uses property observers on the title.
Note that in my case, I had a back button on the left side of the navigation bar, which putted the text out of the center of the screen, to fix this I am using attributed text and the tailIndent. All comments/info in the code below :
class VCHowToTopic : UIViewController {
//add handlers so that any manipulation of the title is caught and transferred to the custom drawn UILabel
override var title : String? {
set {
super.title = newValue
configureTitleView()
}
get {
return super.title
}
}
//MARK: - lifecycle
func configureTitleView() {
//some large number that makes the navigationbar schrink down our view when added
let someVeryLargeNumber = CGFloat(4096)
//create our label
let titleLabel = UILabel(frame: CGRect(x: 0, y: 0, width: someVeryLargeNumber, height: someVeryLargeNumber))
//0 means unlimited number of lines
titleLabel.numberOfLines = 0
//define style of the text (we will be using attributed text)
let style = NSMutableParagraphStyle()
style.alignment = .Center
//top compensate for the backbutton which moves the centered text to the right side of the screen
//we introduce a negative tail indent, the number of 56 has been experimentally defined and might
//depend on the size of your custom back button (if you have one), mine is 22x22 px
style.tailIndent = -56
//create attributed text also with the right color
let attrText = NSAttributedString(string: title!, attributes: [NSParagraphStyleAttributeName : style,
NSForegroundColorAttributeName : UIColor.whiteColor()])
//configure the label to use the attributed text
titleLabel.attributedText = attrText
//add it as the titleview
navigationItem.titleView = titleLabel
}
}
You can create a UILabel as UINavigationItem's titleView and set it's adjustsFontSizeToFitWidth to true.
class MyViewController: UIViewController {
override var title: String? {
didSet {
(self.navigationItem.titleView as? UILabel)?.text = self.title
}
}
override func viewDidLoad() {
super.viewDidLoad()
self.navigationItem.titleView = UILabel().apply {
$0.font = .boldSystemFont(ofSize: 18)
$0.minimumScaleFactor = 0.5
$0.adjustsFontSizeToFitWidth = true
$0.text = self.title
}
}
}
Easy to use:
myViewController.title = "This is a long title, but don’t worry."
The apply closure in the above code is a trick, in order to make the programming experience better. There is also a with closure. Recommend to everyone.
protocol ScopeFunc {}
extension ScopeFunc {
#inline(__always) func apply(_ block: (Self) -> ()) -> Self {
block(self)
return self
}
#inline(__always) func with<R>(_ block: (Self) -> R) -> R {
return block(self)
}
}
extension NSObject: ScopeFunc {}
Swift 5 and iOS 13 / iOS 14
The answers from above don't work if you have a large title in Swift 5 and iOS 13 because they simply add another title to your navigation bar. Instead you could use the largeTitleTextAttributes property (available since iOS 11) to shrink your title when needed.
Assuming you have set your large title via storyboard or code already, you can use the following method:
private func configureNavigationTitle(_ title: String) {
let tempLabel = UILabel()
tempLabel.font = UIFont.systemFont(ofSize: 34, weight: .bold)
tempLabel.text = title
if tempLabel.intrinsicContentSize.width > UIScreen.main.bounds.width - 30 {
var currentTextSize: CGFloat = 34
for _ in 1 ... 34 {
currentTextSize -= 1
tempLabel.font = UIFont.systemFont(ofSize: currentTextSize, weight: .bold)
if tempLabel.intrinsicContentSize.width < UIScreen.main.bounds.width - 30 {
break
}
}
navigationController?.navigationBar.largeTitleTextAttributes = [NSAttributedString.Key.font : UIFont.systemFont(ofSize: currentTextSize, weight: .bold)]
}
self.title = title
}
So essentially we are ussing a helper label in order to get the width of our title and then we are going to shrink the font size until the title fits in our navigation bar.
Call it from viewDidLoad():
override func viewDidLoad() {
super.viewDidLoad(
configureNavigationTitle("A very long title which fits perfectly fine")
}
you need to customize the navigation bar title view with uilabel and provide adjust font size..
[self.navigationItem setTitleView:<"Include any UI View subclass">];
Just calling sizeToFit() on my view after the change worked for me
Here's an example in Swift that also allows for multiple lines. Using PureLayout to simplify auto layout.
override func viewDidLoad() {
super.viewDidLoad()
configureTitleView()
}
func configureTitleView() {
let titleLabel = UILabel()
titleLabel.numberOfLines = 0
titleLabel.textAlignment = .Center
titleLabel.font = UIFont.boldSystemFontOfSize(17.0)
titleLabel.text = searchLoc.mapItem.name
navigationItem.titleView = titleLabel
titleLabel.autoPinEdgesToSuperviewMargins() // PureLayout method
titleLabel.adjustsFontSizeToFitWidth = true
}
And a usage example:
Swift 4 and iOS 13
Adding this so my future self can find it. Views added to titleView for some reason don't like to automatically resize themselves. So you have to do it manually.
Example
(navigationItem.titleView as? UILabel)?.text = "A longer string..." // label not resized and text is cut off
Solution
navigationItem.titleView?.translatesAutoresizingMaskIntoConstraints = false
navigationItem.titleView?.setNeedsLayout()
navigationItem.titleView?.layoutIfNeeded()
navigationItem.titleView?.translatesAutoresizingMaskIntoConstraints = true
Thanks to #Paolo Musolino for leading me here.