CODEWITHSUNDEEP
iosswifttext
bitops
bitops

Reputation: 4292

How to add outline to text in a UITextView?

I'm a newcomer to text programming in iOS and a bit stumped at the moment. I am creating an example project to learn how to make a lolcat app (start with something fun!).

I have a UIImage with the cat and I'm putting some text on top of it by having a UITextView on top with text.

I'd like to end up with something like this for the text:

lolcat

I was able to successfully pull this off when I had the text in a UILabel. I used code I found on SO that used drawTextInRect to accomplish the magic.

Now, I'd like to do the same thing in the UITextView (I want to be able to scroll the text).

**EDIT: ** so here is what I'm trying so far:

var foo = NSAttributedString(string: text, attributes: [
        NSStrokeColorAttributeName : UIColor.blackColor(),
        NSForegroundColorAttributeName : UIColor.whiteColor(),
        NSStrokeWidthAttributeName : NSNumber(float: -4.0),
        NSFontAttributeName : UIFont.systemFontOfSize(30.0)
 ])

That gets me a result like this:

enter image description here

If I now double the stroke width to -8.0 I get the below result which looks pretty darn bad in my estimation. It seems like there is a tradeoff between the stroke width and how much of the fill I can see. Ideally I'd like the stroke to just get wider without eating up the white text.

enter image description here

Upvotes: 3

Views: 5918

Answers (2)

sbakdemir
sbakdemir

Reputation: 21

You can use the help of library DrawingLabel without any CoreGraphics code

DrawingStroke *blackStroke = [DrawingStroke new];
blackStroke.strokeWidth = 3.0;
blackStroke.strokeColor = [UIColor blackColor];

Upvotes: 2

matt
matt

Reputation: 535138

You need to read up on NSAttributedString. You can give letters an outline stroke:

https://developer.apple.com/library/ios/documentation/UIKit/Reference/NSAttributedString_UIKit_Additions/#//apple_ref/doc/constant_group/Character_Attributes

Use the NSStrokeColorAttributeName and NSStrokeWidthAttributeName to configure the outline stroke.

Once you have your attributed string you can put it an a label, put it in a text view, or draw it directly, as you please.

enter image description here

Might look a little better if you add some expansion and a tiny bit of shadow:

enter image description here

Upvotes: 3

Related Questions