How do I make UILabel display outlined text?

cocoa-touch, core-graphics, ios, iphone, objective-c

Solution

I was able to do it by overriding drawTextInRect:

- (void)drawTextInRect:(CGRect)rect {

  CGSize shadowOffset = self.shadowOffset;
  UIColor *textColor = self.textColor;

  CGContextRef c = UIGraphicsGetCurrentContext();
  CGContextSetLineWidth(c, 1);
  CGContextSetLineJoin(c, kCGLineJoinRound);

  CGContextSetTextDrawingMode(c, kCGTextStroke);
  self.textColor = [UIColor whiteColor];
  [super drawTextInRect:rect];

  CGContextSetTextDrawingMode(c, kCGTextFill);
  self.textColor = textColor;
  self.shadowOffset = CGSizeMake(0, 0);
  [super drawTextInRect:rect];

  self.shadowOffset = shadowOffset;

}

Problem

All I want is a one pixel black border around my white UILabel text. I got as far as subclassing UILabel with the code below, which I clumsily cobbled together from a few tangentially related online examples. And it works but it's very, very slow (except on the simulator) and I couldn't get it to center the text vertically either (so I hard-coded the y value on the last line temporarily). Ahhhh! ``` void ShowStringCentered(CGContextRef gc, float x, float y, const char *str) { CGContextSetTextDrawingMode(gc, kCGTextInvisible); CGContextShowTextAtPoint(gc, 0, 0, str, strlen(str)); CGPoint pt = CGContextGetTextPosition(gc); CGContextSetTextDrawingMode(gc, kCGTextFillStroke); CGContextShowTextAtPoint(gc, x - pt.x / 2, y, str, strlen(str)); } - (void)drawRect:(CGRect)rect{ CGContextRef theContext = UIGraphicsGetCurrentContext(); CGRect viewBounds = self.bounds; CGContextTranslateCTM(theContext, 0, viewBounds.size.height); CGContextScaleCTM(theContext, 1, -1); CGContextSelectFont (theContext, "Helvetica", viewBounds.size.height, kCGEncodingMacRoman); CGContextSetRGBFillColor (theContext, 1, 1, 1, 1); CGContextSetRGBStrokeColor (theContext, 0, 0, 0, 1); CGContextSetLineWidth(theContext, 1.0); ShowStringCentered(theContext, rect.size.width / 2.0, 12, [[self text] cStringUsingEncoding:NSASCIIStringEncoding]); } ``` I just have a nagging feeling that I'm overlooking a simpler way to do this. Perhaps by overriding "drawTextInRect", but I can't seem to get drawTextInRect to bend to my will at all despite staring at it intently and frowning really really hard.

Original source

Related problems