1

I'm trying to draw a border/outline around each letter of text to help the text stand out. Shadows aren't doing enough for me. I looked at another question, but it used Quartz to only draw a border around the textfield outline, not the text itself. Is there a relatively easy way to add a border to the text, or multiple sets of shadows to text?

Derek
  • 747
  • 3
  • 8
  • 13
  • 1
    I found the answer in a similar discussion helpful. http://stackoverflow.com/questions/1103148/how-do-i-make-uilabel-display-outlined-text – ram Jun 19 '12 at 16:44

3 Answers3

4

You can subclass the UILabel class and override the drawInRect method as such:

- (void)drawRect:(CGRect)rect {

    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSaveGState(context);

    CGContextSetLineWidth(context, 2);
    CGContextSetLineJoin(context, kCGLineJoinRound);

    CGContextSetTextDrawingMode(context, kCGTextStroke);

    [self drawTextInRect:rect];
}
Mike M
  • 4,879
  • 5
  • 38
  • 58
  • Good answer, but seems to only draw an outline of the letter, not a border. Def on the right track though, looks pretty cool. This is what I ended up using: http://stackoverflow.com/questions/1103148/how-do-i-make-uilabel-display-outlined-text – Vincil Bishop Mar 05 '15 at 16:55
2

When you apply shadow to a label, each letter gets the shadow around it. This is how say, section headers, by default, in a grouped table are drawn so as to look embossed.

So, just as you can do 

label.layer.shadowColor ...
etc

you may be able to do

label.layer.borderColor = [UIColor redColor].CGColor;
label.layer.borderWidth = 2;

I haven't tried this, but in theory it ought to work. There are instances I've run into where these kinds of things don't always work or work differently than you might expect in certain circumstances. Shadow is a good example, actually, with labels. I once expected that adding shadow to a label applied it around the label's rect. But in fact, it applies it around each letter in the label! Not what I expected, but pretty handy in hindsight.

Anyway, give this a try. If it doesn't work, and it is in fact a "border" around each letter that you want, you may have to use a thin shadow with a very contrasting color (from your text color) to achieve the highlight you desire.

Do use any of these layer effects, you need to

#import <QuartzCore/QuartzCore.h>

Good luck! Report back. :-)

EDIT: If you simply want a rectangular border around your label, you will have to embed your label in a UIView, and apply a border to that using the view's layer.borderXXX properties (as above).

Mark Granoff
  • 16,878
  • 2
  • 59
  • 61
  • Thanks for the answer Mark. I indeed want the border around each letter, and not the entire field. I've updated the question to help avoid the confusion. I ran into your answer in my research of this problem, and it does draw a border around the entire field, not each letter. – Derek Jun 28 '11 at 18:44
  • @Derek: What method, exactly, drew a border around the entire field? Using an enclosing UIView? Or, did using label.layer.borderXxx draw a rectangular border around the entire field? If the latter, then my "edit" is actually overkill (but not wrong. :-) – Mark Granoff Jun 28 '11 at 18:47
  • The label.layer.borderxxx methods drew a border around the entire textfield. I got it working very messy by making 4 labels stacked on top of each other, with clearColor backgrounds and different shadow positions... but that seems so ugly! – Derek Jun 28 '11 at 18:51
1

Or else you can make a subclass of UILable and draw whatever you want in drawRect method

you can use following lines to find text width and height

CGSize textSize = [[self text] sizeWithFont:[self font]];
    [[UIColor blackColor] set];
CGFloat strikeWidth = textSize.width;
    CGFloat strikeHeight=textSize.height;
vignesh kumar
  • 11
  • 1