I want to display a subtitle below my main text in the center of the pie chart to let users know what the number represents. Is this possible? Right now I have a number that I converted to a string.
Below is my code:
func setCenter(days: Int){
let circleColor = UIColor.black
var textColor = UIColor.white
pieChart.holeRadiusPercent = 0.3
pieChart.transparentCircleRadiusPercent = 0.0
let dayString = String(describing: days)
let centerText = NSAttributedString(string: dayString , attributes: [
NSForegroundColorAttributeName:textColor,NSFontAttributeName: UIFont(name: "SubwayLogo",size:30)!])
pieChart.centerAttributedText = centerText
pieChart.centerTextRadiusPercent = 1.0
pieChart.holeColor = circleColor
}
Let me know if you need to see other parts of the code. Thanks!
Nvm, I figured it out. You have to create 2 mutable attributed strings and then concatenate them with the second having a "\n"
func setCenter(days: Int){
let circleColor = UIColor.black
let textColor = UIColor.white
pieChart.holeRadiusPercent = 0.3
pieChart.transparentCircleRadiusPercent = 0.0
let dayString = String(describing: days)
let centerText = NSMutableAttributedString()
let numberText = NSMutableAttributedString(string: " " + dayString, attributes: [NSForegroundColorAttributeName:textColor,NSFontAttributeName: UIFont(name: "SubwayLogo",size:30)!])
let descriptionText = NSMutableAttributedString(string: "\n Days Left", attributes: [NSForegroundColorAttributeName:textColor,NSFontAttributeName: UIFont(name: "SubwayLogo",size:8)!])
centerText.append(numberText)
centerText.append(descriptionText)
pieChart.centerAttributedText = centerText
pieChart.centerTextRadiusPercent = 1.0
pieChart.holeColor = circleColor
}
Make sure to play around with the spacing and sizes of the 2 mutable strings. I added an extra space before dayString to get it to align, pieChart is a little finicky.
Related
I am trying to implement following idea.
The description should be shown in a dynamically sized tableview cell with height not exceeding 4 lines. In case it exceeds 4 lines, only part of it should be shown ending it with ellipsis i.e (...)
I used solution from this stack overflow link
I am getting output like following screen
What I want is that, tableView cell has to show/display dynamic size. The title is fixed 1 line and the description label has to max 4 lines if it has that data and of that data/text exceeds 4 lines ...then we have to show (...) at the end of label with 4 lines. Please check following image
If description text contains 1 or 2 lines data it has to show normal text like following.
How I can fix this issue ? or is there any option to implement it?
Here is the project
Here i have tried with different solution. I have created a function which returns you first 4 lines of label in String. Then append (...) at the end of string.
*Set label's numberOfLines to 0
*Assuming leading and trailing space of label = 20.
func getLinesFromLabel(label:UILabel) -> String? {
let text:NSString = label.text! as NSString
let font:UIFont = label.font
let myFont:CTFont = CTFontCreateWithName(font.fontName as CFString, font.pointSize, nil)
let attStr:NSMutableAttributedString = NSMutableAttributedString(string: text as String)
attStr.addAttribute(NSAttributedString.Key(rawValue: String(kCTFontAttributeName)), value:myFont, range: NSMakeRange(0, attStr.length))
let frameSetter:CTFramesetter = CTFramesetterCreateWithAttributedString(attStr as CFAttributedString)
let path:CGMutablePath = CGMutablePath()
//set width of label here (i assumed leading and trailing is 20)
path.addRect(CGRect(x:0, y:0, width:UIScreen.main.bounds.width - 50, height:100000))
let frame:CTFrame = CTFramesetterCreateFrame(frameSetter, CFRangeMake(0, 0), path, nil)
let lines = CTFrameGetLines(frame) as NSArray
// if lines are more than 4 then return first 4 lines
if lines.count > 4 {
var str = ""
for line in 0..<4 {
let lineRange = CTLineGetStringRange(lines[line] as! CTLine)
let range:NSRange = NSMakeRange(lineRange.location, lineRange.length)
let lineString = text.substring(with: range)
str += lineString
}
let updatedStr = str.suffix(17)
str = String(str.dropLast(17))
let strArr = updatedStr.components(separatedBy: " ")
if strArr.count > 2 {
if strArr[0].count < 5 {
str += strArr[0]
}
}
return str
} else {
return nil
}
}
your cellForRowAt method
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "NoticeListTableViewCell") as! NoticeListTableViewCell
cell.titleLabel.text = titleArray[indexPath.row]
cell.descriptionLabel.text = descriptionArray[indexPath.row]
let readmoreFont = UIFont(name: "Helvetica Neue", size: 16.0)!
let readmoreFontColor = UIColor.blue
let lines = getLinesFromLabel(label: cell.descriptionLabel)
if let first4line = lines {
print(first4line)
let answerAttributed = NSMutableAttributedString(string: first4line, attributes: [NSAttributedString.Key.font: cell.descriptionLabel.font!])
let readMoreAttributed = NSMutableAttributedString(string: " (...)", attributes: [NSAttributedString.Key.font: readmoreFont, NSAttributedString.Key.foregroundColor: readmoreFontColor])
answerAttributed.append(readMoreAttributed)
cell.descriptionLabel.attributedText = answerAttributed
}
return cell
}
Download Demo Project From Here
I want to highlight or add a background only on a text on a label that is not center-aligned.
I already tried Attributed Strings (https://stackoverflow.com/a/38069772/676822) and using regex but didn't get near a good solution.
NSAttributedString won't work because my label is not centered and it doesn't contain line breaks. It's just a long text that takes multiple lines.
This is what I'm trying to accomplish:
Note: It's not "Evangelizing\nDesign\nThinking" it's "Evangelizing Design Thinking"
Thanks!
As far as I have tried its not possible to get what you want simply with attributed text because using:
let attributedText = NSMutableAttributedString(string: "Evangelizing Desing Thinking",
attributes: [
.font: UIFont.systemFont(ofSize: 14),
.backgroundColor: UIColor.gray
]
)
Will add extray gray background at the end of each line. My previous answer was not good neither because it only adds a gray background on each word, not on spaces, and as #Alladinian noticed, ranges can be wrong in some cases.
So here is a hack you can use to achieve what you want. It uses multiple labels but it can be easily improved by putting labels in a custom view. So, in your viewDidLoad / CustomView function add:
// Maximum desired width for your text
let maxLabelWidth: CGFloat = 80
// Font you used
let font = UIFont.systemFont(ofSize: 14)
// Your text
let text = "Eva ngel izing Des ing a Thin king"
// Width of a space character
let spaceWidth = NSString(string: " ").size(withAttributes: [NSAttributedString.Key.font: font]).width
// Width of a row
var currentRowWidth: CGFloat = 0
// Content of a row
var currentRow = ""
// Previous label added (we keep it to add constraint betweeen labels)
var prevLabel: UILabel?
let subStrings = text.split(separator: " ")
for subString in subStrings {
let currentWord = String(subString)
let nsCurrentWord = NSString(string: currentWord)
// Width of the new word
let currentWordWidth = nsCurrentWord.size(withAttributes: [NSAttributedString.Key.font: font]).width
// Width of the row if you add a new word
let currentWidth = currentRow.count == 0 ? currentWordWidth : currentWordWidth + spaceWidth + currentRowWidth
if currentWidth <= maxLabelWidth { // The word can be added in the current row
currentRowWidth = currentWidth
currentRow += currentRow.count == 0 ? currentWord : " " + currentWord
} else { // Its not possible to add a new word in the current row, we create a label with the current row content
prevLabel = generateLabel(with: currentRow,
font: font,
prevLabel: prevLabel)
currentRowWidth = currentWordWidth
currentRow = currentWord
}
}
// Dont forget to add the last row
generateLabel(with: currentRow,
font: font,
prevLabel: prevLabel)
Then you have to create the generateLabel function:
#discardableResult func generateLabel(with text: String,
font: UIFont,
prevLabel: UILabel?) -> UILabel {
let leftPadding: CGFloat = 50 // Left padding of the label
let topPadding: CGFloat = 100 // Top padding of (first) label
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
self.view.addSubview(label)
label.leftAnchor.constraint(equalTo: self.view.leftAnchor, constant: leftPadding).isActive = true
if let prevLabel = prevLabel {
label.topAnchor.constraint(equalTo: prevLabel.bottomAnchor).isActive = true
} else {
label.topAnchor.constraint(equalTo: self.view.topAnchor, constant: topPadding).isActive = true
}
label.font = font
label.text = text
label.backgroundColor = .gray
return label
}
Previous answer:
As Yogesh suggested, you can use attributed string:
// Init label
let label = UILabel(frame: CGRect(x: 50, y: 50, width: 90, height: 120))
self.view.addSubview(label)
label.lineBreakMode = .byTruncatingTail
label.numberOfLines = 0
label.backgroundColor = .white
// Create attributed text
let text = "Evangelizing Desing Thinking"
let attributedText = NSMutableAttributedString(string: text,
attributes: [
.font: UIFont.systemFont(ofSize: 14)
]
)
// Find ranges of each word
let subStrings = text.split(separator: " ")
let ranges = subStrings.map { (subString) -> Range<String.Index> in
guard let range = text.range(of: subString) else {
fatalError("something wrong with substring") // This case should not happen
}
return range
}
// Apply background color for each word
ranges.forEach { (range) in
let nsRange = NSRange(range, in: text)
attributedText.addAttribute(.backgroundColor, value: UIColor.gray, range: nsRange)
}
// Finally set attributed text
label.attributedText = attributedText
I have a class called "rectangle" to make custom UILabels. I override "draw" in the rectangle class. When I instantiate the label, I want the FIRST line of text to show up in bolded font. I know how to solve this by manually getting the range for each string... however, I have more than 300 strings to do. The strings are currently in an array, formatted like so: "Happy \n Birthday". How can I make the word "Happy" bold?
var messageText = "Happy \n Birthday"
let rectanglePath = UIBezierPath(rect: rectangleRect)
context.saveGState()
UIColor.white.setFill()
rectanglePath.fill()
context.restoreGState()
darkPurple.setStroke()
rectanglePath.lineWidth = 0.5
rectanglePath.lineCapStyle = .square
rectanglePath.lineJoinStyle = .round
rectanglePath.stroke()
let rectangleStyle = NSMutableParagraphStyle()
rectangleStyle.alignment = .center
let rectangleFontAttributes = [
.font: UIFont.myCustomFont(true),
.foregroundColor: UIColor.black,
.paragraphStyle: rectangleStyle,
] as [NSAttributedString.Key: Any]
let rectangleTextHeight: CGFloat = messageText.boundingRect(with: CGSize(width: rectangleRect.width, height: CGFloat.infinity), options: .usesLineFragmentOrigin, attributes: rectangleFontAttributes, context: nil).height
context.saveGState()
context.clip(to: rectangleRect)
messageText.draw(in: CGRect(x: rectangleRect.minX, y: rectangleRect.minY + (rectangleRect.height - rectangleTextHeight) / 2, width: rectangleRect.width, height: rectangleTextHeight), withAttributes: rectangleFontAttributes)
context.restoreGState()
You can find the first by separating the string by newline:
let firstLine = "Happy \n Birthday".split(separator: "\n").first
This will give you the first line of the string. (long text multi lining doesn't count) then you can find the range using this and apply the bold effect.
How this works:
You need to set the label the way that accepts multiline:
Find the range of first line
Convert it to nsRange
Apply attributes to the range
Here is a fully working example:
import UIKit
import PlaygroundSupport
extension StringProtocol where Index == String.Index {
func nsRange(from range: Range<Index>) -> NSRange {
return NSRange(range, in: self)
}
}
class MyViewController : UIViewController {
override func loadView() {
let view = UIView()
view.backgroundColor = .white
let label = UILabel()
label.numberOfLines = 0
label.text = "Happy \n Birthday"
label.textColor = .black
let text = "Happy \n Birthday"
let attributedString = NSMutableAttributedString(string: text)
let firstLine = text.split(separator: "\n").first!
let range = text.range(of: firstLine)!
attributedString.addAttributes([.font : UIFont.boldSystemFont(ofSize: 14)], range: text.nsRange(from: range))
label.attributedText = attributedString
label.sizeToFit()
view.addSubview(label)
self.view = view
}
}
PlaygroundPage.current.liveView = MyViewController()
I'm adding an icon to a UILabel using NSTextAttachment inside an NSMutableAttributedString like this:
//Setting up icon
let moneyIcon = NSTextAttachment()
moneyIcon.image = UIImage(named: "MoneyIcon")
let moneyIconString = NSAttributedString(attachment: moneyIcon)
//Setting up text
let balanceString = NSMutableAttributedString(string: " 1,702,200")
balanceString.insert(moneyIconString, at: 0)
//Adding string to label
self.attributedText = balanceString
self.sizeToFit()
But for some reason the icon isn't vertically aligned
Does anybody know how can I align it?
Thank you!
use bounds property of NSTextAttachment.
//Setting up icon
let moneyIcon = NSTextAttachment()
moneyIcon.image = UIImage(named: "MoneyIcon")
let imageSize = moneyIcon.image!.size
moneyIcon.bounds = CGRect(x: CGFloat(0), y: (font.capHeight - imageSize.height) / 2, width: imageSize.width, height: imageSize.height)
let moneyIconString = NSAttributedString(attachment: moneyIcon)
//Setting up text
let balanceString = NSMutableAttributedString(string: " 1,702,200")
balanceString.insert(moneyIconString, at: 0)
//Adding string to label
self.attributedText = balanceString
self.sizeToFit()
This answer, which is about vertically centering two differently sized fonts in a single NSAttributedString, mentions using the baseline offset to calculate the center of the string.
You can use the same approach when using an image:
Subtract the font size from the image's height and divide it by 2.
Subtract the font's descender from the value (since font size isn't the same as the ascent of your font). The font that you are particularly using (Baloo-Regular) has a descender value that differs from the standard and it should be divided by 2. Other fonts (including San Fransisco) don't need that fix or require a different divisor.
This code covers most cases, if your font behaves differently, you should check out the guide for managing texts in Text Kit.
// *Setting up icon*
let moneyIcon = NSTextAttachment()
// If you're sure a value is not and will never be nil, you can use "!".
// Otherwise, avoid it.
let moneyImage = UIImage(named: "MoneyIcon")!
moneyIcon.image = moneyImage
let moneyIconString = NSAttributedString(attachment: moneyIcon)
// *Setting up NSAttributedString attributes*
let balanceFontSize: CGFloat = 16
let balanceFont = UIFont(name: "Baloo", size: balanceFontSize)!
let balanceBaselineOffset: CGFloat = {
let dividend = moneyImage.size.height - balanceFontSize
return dividend / 2 - balanceFont.descender / 2
}()
let balanceAttr: [NSAttributedString.Key: Any] = [
.font: balanceFont,
.baselineOffset: balanceBaselineOffset
]
// *Setting up text*
let balanceString = NSMutableAttributedString(
string: " 1,702,200",
attributes: balanceAttr
)
balanceString.insert(moneyIconString, at: 0)
so i have a String which looks like this : Swift , VisualBasic , Ruby
i wanna convert this string to something like this :
basically i wanna create a background behind a single word , yeah i can use the NSTokenField libraries for getting this behaviour but my text is not manually entered by user its pre structured (from an array) and i dont want the whole behaviour of NSTokeField i just want the appearance like this and selection (by selection i mean to clear a word at one single tap on backspace , the whole word not a letter )
well i know how to change the colour of a text something like this
func getColoredText(text: String) -> NSMutableAttributedString {
let string:NSMutableAttributedString = NSMutableAttributedString(string: text)
let words:[String] = text.componentsSeparatedByString(" ")
var w = ""
for word in words {
if (word.hasPrefix("{|") && word.hasSuffix("|}")) {
let range:NSRange = (string.string as NSString).rangeOfString(word)
string.addAttribute(NSForegroundColorAttributeName, value: UIColor.redColor(), range: range)
w = word.stringByReplacingOccurrencesOfString("{|", withString: "")
w = w.stringByReplacingOccurrencesOfString("|}", withString: "")
string.replaceCharactersInRange(range, withString: w)
}
}
return string
}
but i dont know how to achieve what i want if somebody can provide me some guidance then it'll be so helpful for me
P.s if my question is not clear enough then please let me know i'll add some more details
It's going to be much easier to just use several UILabels if you want to get rounded corners.
If that's acceptable you can first generate an array of attributed strings like:
func getAttributedStrings(text: String) -> [NSAttributedString]
{
let words:[String] = text.componentsSeparatedByString(" , ")
let attributes = [NSForegroundColorAttributeName: UIColor.whiteColor(), NSBackgroundColorAttributeName: UIColor.blueColor()]
let attribWords = words.map({
return NSAttributedString(string: " \($0) ", attributes: attributes)
})
return attribWords
}
For each attributed string we need to create UILabel. To do so we can create a function that passes in an NSAttributedString and returns a UILabel:
func createLabel(string:NSAttributedString) ->UILabel
{
let label = UILabel()
label.backgroundColor = UIColor.blueColor()
label.attributedText = string
label.sizeToFit()
label.layer.masksToBounds = true
label.layer.cornerRadius = label.frame.height * 0.5
return label
}
Now we'll convert our input string into labels by saying:
let attribWords = getAttributedStrings("Java , Swift , JavaScript , Objective-C , Ruby , Pearl , Lisp , Haskell , C++ , C")
let labels = attribWords.map { string in
return createLabel(string)
}
Now we just need to display them in a view:
let buffer:CGFloat = 3.0
var xOffset:CGFloat = buffer
var yOffset:CGFloat = buffer
let view = UIView(frame: CGRect(x: 0.0, y: 0.0, width: 320.0, height: 400.0))
view.backgroundColor = UIColor.lightGrayColor()
for label in labels
{
label.frame.origin.x = xOffset
label.frame.origin.y = yOffset
if label.frame.maxX > view.frame.maxX
{
xOffset = buffer
yOffset += label.frame.height + buffer
label.frame.origin.x = xOffset
label.frame.origin.y = yOffset
}
view.addSubview(label)
xOffset += label.frame.width + buffer
}
We can also at this point resize our view to the height of the labels by saying:
if let labelHeight = labels.last?.frame.height
{
view.frame.height = yOffset + labelHeight + buffer
}
Throwing this code in a swift playground results in:
If you can't use labels, if you want an editable UITextView for example, I would give up on rounded corners and just say something like:
let attribWords = getAttributedStrings("Java , Swift , JavaScript , Objective-C , Ruby , Pearl , Lisp , Haskell , C++ , C")
let attribString = NSMutableAttributedString()
attribWords.forEach{
attribString.appendAttributedString(NSAttributedString(string: " "))
attribString.appendAttributedString($0)
}
textView.attributedText = attribString