I have a simple application which I've added a custom line chart to. While drawing this chart in on of my UIViews everything is fine, but when I added the chart to a simplified view I suddenly experience a situation where all the text I draw is clear/not present.
There are some static variables involved because of the way the animations need to be handled (iOS/Android/Web) compatibility in the algorithm so the full example is rather complex.
To explain this I added a simple drawing method at the end of my CALayer.draw override
//TEST CODE
let box = CGRect(x: 0, y: 0, width: 100, height: 100)
let textToDraw = "I AM A TEST"
let font = UIFont.boldSystemFont(ofSize: 10)
let boxSize = fontSize.space
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.alignment = .right
let attrs = [
NSFontAttributeName: font,
NSParagraphStyleAttributeName: paragraphStyle,
NSForegroundColorAttributeName: UIColor.black
]
ctx.setStrokeColor(UIColor.orange.cgColor)
ctx.beginPath()
ctx.move(to: CGPoint.zero)
ctx.addLine(to: CGPoint(x: box.width, y: box.height))
ctx.addLine(to: CGPoint(x: box.origin.x + box.width, y: box.origin.y + box.height))
ctx.strokePath()
// print("fontSize:\(fontSize) string:\(textToDraw)")
//textToDraw.draw(with: offset , options: .usesLineFragmentOrigin, attributes: attrs, context: nil)
textToDraw.draw( in: box, withAttributes: attrs)
However, and this is frustrating, if I visit the OTHER view where the chart draws (or any other custom drawings happens) I end up with this:
I'm having trouble tracing this down and I have a (justifiably) annoyed client.
The Code for "reloading the view" is basically view.dismiss(animated:true)
followed by a
performSegue("brokenView")
Has anyone run into this behavior before? Are there any pointers you can offer to getting the text to stick. I'm at the point I'm debating dropping a hidden UIView with drawing on my home screen to fix it but there has to be a better way.
The orange lines were put in to verify that my "bounding boxes" were not off the screen.
The layer in question is basically this:
Related
I am drawing text within a PDF using this method:
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.alignment = .center
paragraphStyle.lineBreakMode = .byWordWrapping
let textAttributes = [
NSAttributedString.Key.paragraphStyle: paragraphStyle,
NSAttributedString.Key.font: UIFont(name: "MySpecialFont", size: 16)!,
NSAttributedString.Key.foregroundColor: UIColor.black
]
let attributedText = NSAttributedString(
string: myTextArray.first,
attributes: textAttributes
)
let textRect = CGRect(
x: 400,
y: 40,
width: 80,
height: 40
)
attributedText.draw(in: textRect)
Above draws the text fine. However, sometimes, the string passed on to it seem to be too long and go on for 3 lines instead of 2. In these cases, I want to textRect to be taller. Basically to know how many lines it would take so textRect could be adjusted.
There are several functions within NSAttributedString that gives string length, but thats the length if it was in a single line.
Is there a way to know how many lines the final attributedText would take inside textRect?
Use NSAttributedString.boundingRect(with:options:context:) to compute the size required. You should pass .usesLineFragmentOrigin as an option so that it'll compute it for multiple lines. Pass the width you want; the height doesn't really matter, because it'll expand the height to contain the full string, and you can use that to work out your final rectangle.
That said, from your description, it sounds like you can just make the height very large (10,000 is the usual value; but maybe you want to just give room for three lines). Since you're just drawing here; it shouldn't matter if the available rect is taller than required. It only matters if it's shorter.
I have been trying for hours now to find the boundingRect of a string in a UILabel I have, but nothing seems to be working.
From what I understand, boundingRect returns the size of the actual text in the label, not the label's size or something like that. This is true, right?
I have a UILabel called messageLabel which contains some text that wraps to an unlimited number of lines.
The code I have now is this:
let labelRect = (message as NSString).boundingRect(with: messageLabel.frame.size,
options: .usesLineFragmentOrigin,
attributes: [NSFontAttributeName : messageLabel.font],
context: nil)
Unfortunately, this returns totally wrong dimensions for my text.
What is the correct way to return the dimensions of text in a multiline UILabel?
Use:
let sizeToFit = CGSize(width: messageLabel.frame.size.width,
height: CGFloat.greatestFiniteMagnitude)
let textSize = messageLabel.sizeThatFits(sizeToFit)
Anyway, the way you did it should work as well (you can see on playground both functions return same size):
I've added a sample view to the playground, so you can see, the label has black border, and the text fits inside, and is smaller than label. Size is computer properly with both sizeToFit and boundingRect methods (but boundingRect returns not rounded values). I've use this computed size to create a green background view under the text, and it fits it properly.
I think you need to Try this
let messageLabel = UILabel(frame: CGRect(x: 0, y: 0, width: _screenSize.width - 30, height: 5))
messageLabel.font = self.txtDescription.font
messageLabel.numberOfLines = 0
messageLabel.text = "Your Massage"
messageLabel.numberOfLines = 0
messageLabel.sizeToFit()
print(messageLabel.frame.size.height)
Remove all code Just try this Hope it will wirk
I have two apps, one with a UILabel and one using SpriteKit with a SKLabelNode. I'd like to add a black outline around the white text.
I can't find any outline or border properties or anything like that within swift. I've tried just creating new labels with slightly bigger, black font behind them but that didn't look right at all.
Here is my game with SpriteKit
title.position = CGPoint(x: self.frame.width / 2, y: self.frame.height / 2)
title.text = "Tap to start!"
title.fontName = "Arial"
title.zPosition = 10
title.fontSize = 50
self.addChild(title)
And here is my other one that uses UILables (It's within a red rectangle so it's easier to see)
let rectangle = UIView(frame:CGRect(x: self.view.frame.size.width / 2 - 150, y: self.view.frame.size.height / 2 - 75, width: 300, height: 150))
rectangle.backgroundColor = UIColor.red
self.view.addSubview(rectangle)
let label = UILabel(frame: CGRect(x: rectangle.frame.size.width / 2 - 75, y: rectangle.frame.size.height / 2 - 10, width: 150, height: 20))
label.textAlignment = .center
label.text = "Tap to Start!"
label.textColor = UIColor.white
label.font = UIFont(name: "Arial", size: 20)
rectangle.addSubview(label)
How do I outline these labels?
For SKLabelNode's, there is no 'easy' way of outlining text. There is however a 'hack'. It involves adding 8 additional duplicate nodes around the label that are coloured black (or whatever colour you want the outline to be), have a zPosition less than the original and otherwise, be identical.
It's important that each label has the same font size as the original.
Your attempt at doing this involved increasing the font size of your one outline copy label. As you said in the question, it doesn't work. You have to use multiple labels so the effect appears seamlessly.
You would place one copy directly above the original, one directly below, one to the left, one to the right, then one on each corner (top right, top left, bottom right, and bottom left). This gives the effect of an outline, however is not efficient and should be taken with a grain of salt.
Note: Keep the amount shifted from the original consistent for all the copies, so the 'outline' is evenly sized.
This should work for UILabels too, however I think there might be an easier way to do this with UILabels.
How can I calculate UITextView first baseline position?
I tried calculating it this way:
self.textView.font!.descender + self.textView.font!.leading
However, the value I'm getting is not correct. Any ideas, hints?
There is a diagram from the Apple document
From my understanding, font.descender + font.leading gives the distance between the first baseline and starting of the second line.
I would imagine font.lineHeight would give you the right number, if UITextField doesn't have a secret padding.
EDIT
UITextField and UITextView shared same UIFont property.
For UITextView, there's an extra textContainerInset can be set.
EDIT 2
A further look at the UITextView gives more clue about what can be achieved:
It actually has a textContainer property, which is a NSTextContainer.
The NSTextContainer class defines a region in which text is laid out. An NSLayoutManager object uses one or more NSTextContainer objects to determine where to break lines, lay out portions of text, and so on.
And it's been used by layoutManager, theoretically the padding to the top of first line of text could be found by usedRectForTextContainer(_:).
I will need to test this once I have a Mac in hand. :)
Based on the documentation zcui93 gives, font.ascender will give you the offset to the baseline within the font. To get the baseline of the font within the UITextView you need to add in textContainerInset.top:
extension UITextView {
func firstBaseline() -> CGFloat {
let font = self.font ?? UIFont.systemFontOfSize(UIFont.systemFontSize())
return font.ascender + textContainerInset.top
}
}
There's a little bit of assumption here in defaulting to the system font if no font is set, but I'm not sure what a better guess would be.
Running the following in the playground will demonstrate the effect:
class Container : UITextView {
override func drawRect(rect: CGRect) {
let context = UIGraphicsGetCurrentContext()
CGContextSaveGState(context)
let containerRect = UIEdgeInsetsInsetRect(bounds, textContainerInset)
UIColor(red: 1, green: 0, blue: 0, alpha: 0.25).setFill()
CGContextFillRect(context, containerRect)
let baseline = firstBaseline()
UIColor(red: 1, green: 0, blue: 0, alpha: 0.75).setStroke()
CGContextSetLineWidth(context, 1)
CGContextMoveToPoint(context, containerRect.origin.x, baseline)
CGContextAddLineToPoint(context, containerRect.origin.x + containerRect.width, baseline)
CGContextStrokePath(context)
super.drawRect(rect)
}
}
let textView = Container(frame: CGRect(x: 0, y: 0, width: 100, height: 30))
textView.font = UIFont.systemFontOfSize(UIFont.systemFontSize())
textView.text = "My Text"
And the result:
In my case I was extending UITextField class and I just wanted to draw a line in the textfield baseline and I succeed with the following chunk:
self.svwLine = UIView(frame: CGRectMake(0,self.frame.size.height+(self.font?.descender)!,self.frame.size.width,2))
self.svwLine.backgroundColor = UIColor.whiteColor()
self.addSubview(self.svwLine)
I have written a custom graph UIView subclass, and I use it to graph some basic data, and insert some user-defined data. As a final step, I'd like to add a UILabel on top of the graph with the user-defined data-point called out.
I highlight the point, and then create and add the UILabel:
if(graphPoints[i] == highlightPoint){
var point2 = CGPoint(x:columnXPoint(i), y:columnYPoint(graphPoints[i]))
point2.x -= 8.0/2
point2.y -= 8.0/2
let circle2 = UIBezierPath(ovalInRect:
CGRect(origin: point2,
size: CGSize(width: 8.0, height: 8.0)))
highlightColor.setFill()
highlightColor.setStroke()
circle2.fill()
let circle = UIBezierPath(ovalInRect:
CGRect(origin: point,
size: CGSize(width: 5.0, height: 5.0)))
UIColor.whiteColor().setFill()
UIColor.whiteColor().setStroke()
circle.fill()
var pointLabel : UILabel = UILabel()
pointLabel.text = "Point = \(graphPoints[i])"
pointLabel.frame = CGRectMake(point2.x, point2.y, 100, 50)
self.addSubview(pointLabel)
} else {
let circle = UIBezierPath(ovalInRect:
CGRect(origin: point,
size: CGSize(width: 5.0, height: 5.0)))
UIColor.whiteColor().setFill()
UIColor.whiteColor().setStroke()
circle.fill()
}
This looks like it should work, but the UILabel is added twice. What am I doing wrong?
This code is probably in drawRect. You're doing subview-adding in drawRect which is incorrect. drawRect gets called at least twice as the view appears, and perhaps many times after that.
You should be overriding some early lifecycle method, like awakeFromNib() or the constructor. In that, construct your label and add it as a child view. This way the addSubView() happens once as it should. The label will be invisible having no contents, so don't worry about that.
In drawRect, just update all the necessary attributes of the label including the frame.
If you find you're actually needing lots of text "labels" that come and go, different quantity for every graph, you don't really want UILabels as subviews after all. Consider directly drawing text on screen with someString.drawAtPoint(...)