iPhone: Draw rotated text?

Question

I want to draw some text in a view, rotated 90°. I'm pretty new to iPhone development, and poking around the web reveals a number of different solutions. I've tried a few and usually end up with my text getting clipped.

What's going on here? I am drawing in a fairly small space (a table view cell), but there has to be a "right" way to do this… right?

---

Edit: Here are a couple of examples. I'm trying to display the text "12345" along the black bar at the left.

1. First attempt, from RJShearman on the Apple Discussions

   CGContextRef context = UIGraphicsGetCurrentContext();
   CGContextSelectFont (context, "Helvetica-Bold", 16.0, kCGEncodingMacRoman);
   CGContextSetTextDrawingMode (context, kCGTextFill);
   CGContextSetRGBFillColor(context, 1.0, 0.0, 0.0, 1.0);
   CGContextSetTextMatrix (context, CGAffineTransformRotate(CGAffineTransformScale(CGAffineTransformIdentity, 1.f, -1.f ), M_PI/2));
   CGContextShowTextAtPoint (context, 21.0, 55.0, [_cell.number cStringUsingEncoding:NSUTF8StringEncoding], [_cell.number length]);
   CGContextRestoreGState(context);
   

   
   _{(source: deeptechinc.com)}

2. Second attempt, from zgombosi on iPhone Dev SDK. Identical results (the font was slightly smaller here, so there's less clipping).

   CGContextRef context = UIGraphicsGetCurrentContext();
   CGPoint point = CGPointMake(6.0, 50.0);
   CGContextSaveGState(context);
   CGContextTranslateCTM(context, point.x, point.y);
   CGAffineTransform textTransform = CGAffineTransformMakeRotation(-1.57);
   CGContextConcatCTM(context, textTransform);
   CGContextTranslateCTM(context, -point.x, -point.y);
   [[UIColor redColor] set];
   [_cell.number drawAtPoint:point withFont:[UIFont fontWithName:@"Helvetica-Bold" size:14.0]];
   CGContextRestoreGState(context);
   

   Attempt two. There is almost identical clipping http://dev.deeptechinc.com/sidney/share/iphonerotation/attempt2.png

Answer 1

It turns out that the my table cell was always initialized 44px high regardless of the row height, so all of my drawing was getting clipped 44px from the top of the cell.

To draw larger cells it was necessary to set the content view's autoresizingMask with

cellContentView.autoresizingMask = UIViewAutoresizingFlexibleHeight;

or

cellContentView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;

…and drawRect is called with the correct size. In a way, this makes sense, because UITableViewCell's initWithStyle:reuseIdentifier: makes no mention of the size of the cell, and only the table view actually knows how big each row is going to be, based on its own size and its delegate's response to tableView:heightForRowAtIndexPath:.

I read the Quartz 2D Programming Guide until the drawing model and functions started to make sense, and the code to draw my rotated text became simple and obvious:

CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSaveGState(context);
CGContextRotateCTM(context, -(M_PI/2));
[_cell.number drawAtPoint:CGPointMake(-57.0, 5.5) withFont:[UIFont fontWithName:@"Helvetica-Bold" size:16.0]];
CGContextRestoreGState(context);

Thanks for the tips, it looks like I'm all set.

Answer 2

Use :-

label.transform = CGAffineTransformMakeRotation(- 90.0f * M_PI / 180.0f);

where label is the object of UILabel.

Answer 3

Here's a tip. I presume you're doing this drawing in drawRect. Why don't you draw a frame around drawRect to see how big the rect is and if that is why you get clipping.

An alternative is to put your text in a UILabel, and then rotate that 90 degrees when you make your cells in cellForRowAtIndexPath.

Answer 4

You know about the UITableViewDelegate method heightForRowAtIndexPath right?

Here's a simple tutorial on various graphics level methods. Presuming you know how big your text is you should be able to size your table view row size appropriately.

Also, I'd check to make sure that the bounds after any transform actually meet your expectations. (Either use a debugger or log statement to verify this).