使用Objective-C /核心图形的水平中心文本

Question

I'm trying to center a text on an iPhone screen using Core Graphics and I found this code .

CGRect screenRect = [[UIScreen mainScreen] bounds];
CGFloat screenWidth = screenRect.size.width;
CGFloat screenHeight = screenRect.size.height;
NSString * text = @"text";
CGFloat minHeight = 40;
float widthIs = [text boundingRectWithSize:CGSizeMake(CGFLOAT_MAX, minHeight) options:NSStringDrawingUsesLineFragmentOrigin
attributes:@{ NSFontAttributeName:[UIFont systemFontOfSize:22.0] }
context:nil].size.width;
CGContextSetFillColorWithColor(context, [UIColor colorWithRed:1 green:1 blue:1 alpha:1].CGColor);
[text drawAtPoint:CGPointMake((screenWidth - widthIs)/2, (screenHeight - minHeight)/2) withFont: [UIFont systemFontOfSize:22.0]];

But trying this code for my own I can not really get it working. The text is not really centered on my screen and I have no idea how to edit the code to solve my problem.

This is the result I get:

Answer 1

This looks basically right: A few minor observations:

1. Rather than referring to the UIScreen , I'd just refer to the view in which the text was rendered. Eg if actually in some UIView subclass implementation, you'd just refer to self.bounds.size .

2. I would use the attributes rendition for not only getting the size of the bounding rect, but for drawAtPoint , too. Eg Use drawAtPoint:withAttributes: instead of drawAtPoint:withFont: .

3. The font color should be part of the attributes dictionary, too.

For example:

CGSize viewSize = self.bounds.size;
NSString *text = @"text";
CGFloat minHeight = 40;
NSDictionary *attributes = @{NSFontAttributeName: [UIFont systemFontOfSize:22.0], NSForegroundColorAttributeName: [UIColor redColor]};
CGSize textSize = [text boundingRectWithSize:CGSizeMake(CGFLOAT_MAX, minHeight)
                                     options:NSStringDrawingUsesLineFragmentOrigin
                                  attributes:attributes
                                     context:nil].size;
[text drawAtPoint:CGPointMake((viewSize.width - textSize.width)/2, (viewSize.height - textSize.height)/2) withAttributes:attributes];

If it's still not centered after you do this, you'd want to confirm the frame of the UIView in which you are rendering this, and make sure the it is where you think it should be. You can run the app in the debugger and then use the view debugger to confirm where the view is located.

Answer 2

Others have stated that your code is basically correct, so why is it not displaying the text where you expect?

My guess is that you are not drawing in the view you think you are and/or are confused over coordinate systems.

Using the current view's bounds instead of the screen will centre your text in that view , which is fine if the view itself is centered on the screen but would also display off centre if not.

You should figure out what view you are actually drawing in and/or read up on coordinate systems.

To draw the text in the centre of the screen regardless of the view you can calculate the origin as you have in screen coordinates and then convert it to the view's coordinates and draw there. Eg if your code is inside a view's drawRect then something like:

// Save the point in screen coordinates 
CGPoint onScreenOrigin = CGPointMake((screenWidth - widthIs)/2, (screenHeight - minHeight)/2);
// Convert from screen to current view's coordinates
CGPoint inViewOrigin = [self convertPoint:onScreenOrigin fromView:nil];
// Draw the text
[text drawAtPoint:inViewOrigin ...];

This will draw the text in the centre of the screen regardless of the size and position of the view - provided of course that the view covers the area of the screen where the text needs to be, if it doesn't the text will be cropped to the view and may incomplete or completely invisible!

HTH