Label in a UITableViewCell, change second line font size, add margins? - ios

I have a tableview that uses UITableViewCell and is populated by data from parse.com. In the UITableViewCell there is a LABEL that has 2 lines, that shows data from parse.com.
I am wondering if it is possible to change the font size of the second line of the LABEL (leave the first line's font size the same), also is there is there a way to add margins to the left and right of the label?
EDIT: mistyped, i want to change the font size of the second line of a LABEL, as well as add margins to the left and right of the label.

In my solution I have made an used the attributedText of the UILabel to add attributed string to the label
var attributedString = NSMutableAttributedString(string:"My first line \n")
//creating NSMutableAttributedString that will be later appended with your second line
var secondLine = "My attributed second line"
let secondLineAttribute = [NSFontAttributeName : UIFont(name: label.font.fontName, size: 22)!]
//replace 22 with the size of text you want for second line
var newAttributedSecondLine: NSAttributedString = NSAttributedString(string: secondLine, attributes: secondLineAttribute)
attributedString.appendAttributedString(newAttributedSecondLine)
label.attributedText = attributedString
Dont forget to add label.numberOfLines=2 before the above code

Try this:
cell.textLabel!.font = UIFont(name: "Gotham-Book", size: 16)
Hope this might help you.

UITableViewCell has two labels textLabel and detailTextLabel if created with Subtitle style. Configure detailTextLabel as you like. Otherwise make your own UITableViewCell subclass.

Related

UILabel with attributedText in custom UITableViewCell: Color not rendering until reuse (iOS10)

I have a convenience extension like this:
extension NSMutableAttributedString {
func append(string: String, attributes: [String: Any]) {
let attributed = NSMutableAttributedString(string: string)
let range = NSRange(location: 0, length: string.utf16.count)
for (attribute, value) in attributes {
attributed.addAttribute(attribute, value: value, range: range)
}
append(attributed)
}
}
I'm styling text in my UILabel thusly:
let normalAttributes = [NSForegroundColorAttributeName: darkGray]
let lightAttributes = [NSForegroundColorAttributeName: lightGray]
let text = NSMutableAttributableString()
text.append("Part 1", attributes: normalAttributes)
text.append("Part 2", attributes: lightAttributes)
All of this within a custom UITableViewCell class. What's happening is that the text is rendering with the base color in the NIB file, rather than the custom foreground color as per my attributed string - until I do something (like scroll around) that causes cell reuse, after which suddenly the colors render correctly.
I can't seem to find anything wrong with the lifecycle of the object, and there's no other place that's messing with this label. The label, fwiw, is an IBOutlet, so I'm not creating a new one each time or anything strange.
Turns out it's the same problem as:
Attributed string in tableviewcell not showing bold text until the cell is dequeued and reloaded
So it's solved by setting the font & color to nil on the label before setting the attributeText. Annoying, but easy enough to do that work-around.
As #Kiril Savino suggested. Setting up Font & Color of UILabel to nil is do easy work-around to get it done.
But one more thing I noticed today is Default Font used from Storyboard or XIB.
It should be System Font from Storyboard or XIB to make this work.
If you have used other Custom Font, then it won't work.
So, make sure Default Font of UILabel should System Font.
Thank you.

convert sketch line height into ios line 'height multiple' property

My designer send me sketch file which says 'Line height: 22' for label. How can i achieve this in xcode interface builder.
Is there any way to define this line height using code or UI builder.
#bbjay did put me on the right track.
If you want to obtain the exact result of Sketch, the formula is:
paragraphStyle .lineSpacing = sketchLineHeight - font.lineHeight
Provided that the font was given sketchFontSize
I've found the following formula to work well for me.
It converts form Sketch line height to iOS line spacing:
lineSpacing = sketchLineHeight - sketchFontSize - (font.lineHeight - font.pointSize)
In code, for your case this would be:
let font = UIFont.systemFont(ofSize: 18) // or whatever font you use
textLabel.font = font
let attributedString = NSMutableAttributedString(string: "your text")
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.lineSpacing = 22 - 18 - (font.lineHeight - font.pointSize)
attributedString.addAttribute(.paragraphStyle, value: paragraphStyle, range: NSMakeRange(0, attributedString.length))
textLabel.attributedText = attributedString
Line height is coming from CSS, so your designer must have a web designer background. On the mobile platforms, we do not specify line height, but line spacing.
In general NSMutableParagraphStyle offers capabilities to modify multiline labels for iOS.
NSMutableParagraphStyle has a property called maximumLineHeight, but this will only set the maximum line height to a certain value, if the containment of the label would exceed a certain value.
To set this up in IB, you need to add the label, and change the Text property to Attributed. Than click on paragraph style icon, and set the line spacing for the label. Looking at the design, it is around 2 points of line spacing, what you need. You can either ask your designer to provide you with line spacing attribute or try to find the right line spacing value by randomly trying out different values.
In storyboard, use the Atributed style of UILabel. Below is example with 2.5 line height

Make label only as wide as it needs to be?

I have 3 labels next to each other inside a horizontal stack view like this
The first and last label are going to be dynamically filled with a word of variable length, while the middle one is always going to contain the word "with", for example: "Coding with Swift!"
I don't want there to be extra space between each word as it would look strange if the words are short. Is there any way to make the labels only be as wide as they need to be to fit their text? That way it all looks like one label (except I'm making the middle label have smaller text).
Add 3 labels inside a UIView instead of stack view.
And set constraints as shown in image.
How about using autolayout?
You could give a horizontal space of 0 between the labels and a constraint of width for the middle one.
If u wish to have different fonts for the content in a label you can use NSAttributedString
let boldFontDict:[String: AnyObject] = [NSForegroundColorAttributeName : UIColor.black, NSFontAttributeName: <UI Font>]
let 1stString = NSAttributedString(string: "Hello")
let 2ndString = NSAttributedString(string: "hii", attributes: boldFOntDict)
let finalAttrStr = NSMutableAttributedString(attributedString: 1stString)
finalAttrStr.append(2ndString)
myLabel.attributedText = finalAttrStr
You can take one label instead of taking three label
and and set the text on label as
label.text= firstLabel.text + "with" + lastLabel.text
You can use autolayout to fix this problem.

how to make UITextView text alignemnt right and Justified at the same time

I need my long text inside UITextView to be aligned right and Justified at the same time . But I notice that I could just select right or justified .How can I have both Alignments for my UItextView at the same time ?
You can do it like this (Swift 3,4):
var yourString = String()
let yourTextView = UITextView()
let attrText = NSMutableAttributedString(string: yourString)
let paragraph = NSMutableParagraphStyle()
paragraph.baseWritingDirection = .rightToLeft
paragraph.alignment = .justified
attrText.addAttribute(NSParagraphStyleAttributeName, value: paragraph, range: NSMakeRange(0, yourString.length))
yourTextView.attributedText = attrText
The best option available for your requirement at the moment is this
You cannot achieve both alignment at the same time, But you can add a right alignment when entering the text in the textview, after you finished editing the textview set the text alignment to justify,
So Whenever you start editing the textview use right alignment and once you have finished editing set justify , simple :)
Hack it!(kidding:)). Set text alignment to the justified, set width that is less than screen width, move the text view to the right edge of the screen. Voila, it's right aligned and justified. Good luck!

Weird swift behaviour on UITextField

Scenario:
I'm setting the text font and size for my UITextField.
They also have placeholders.
The code bellow is in my UIViewController:
let font = UIFont(name: "FlamaSemicondensed-Book", size: 18)
let attributesDictionary = [NSForegroundColorAttributeName: DefaultSystemColor.DarkRed]
// Textfileds without borders (and placeholders)
UsernameTextField.borderStyle = UITextBorderStyle.None
UsernameTextField.font = font
UsernameTextField.textColor = DefaultSystemColor.DarkRed
UsernameTextField.attributedPlaceholder = NSAttributedString(string: "Email", attributes: attributesDictionary)
I'm configuring (in AppDelegate) a global UI setting, that formats all of my UILabels for a certain font size.
The code bellow is in my GlobalUISettings class:
let font = UIFont(name: "FlamaSemicondensed-Book", size: 13)!
var labelAppearace = UILabel.appearance()
labelAppearace.font = font
What's weird in here:
When this UITextField is selected and I'm typing the format is the one I set for the text field (the placeholder are OK too).
But when I leave the field it assumes the behaviour of the UILabel.
I know that because if I comment the UILabel format the textField works properly.
Does anybody have any idea why does it happens?
Try changing the let font to let labelFont because 'font' is global. It might be affecting.
This is correct behavior.
To change the font of the placeholder you have to add the NSFontAttributeName attribute with the desired font as value to the NSAttributedString you assign to attributedPlaceholder.
Example:
let attributesDictionary = [
NSFontAttributeName: font,
NSForegroundColorAttributeName: DefaultSystemColor.DarkRed
]

Resources