How to draw text around the image

Question

I have to make sometging like this working on iOS 6 and iOS 7:

But I don't know how to do it. Can you help me?

Answer 1

To draw your text around the image, with CoreText, you need to create a CTFramesetterRef, then create a CTFrameRef with a path that specifies the shape of the frame by calling CTFramesetterCreateFrame.

A sample code that's draw an image in the top-left corner of an UIView and some text around the image :

@implementation MyView
- (void)drawRect:(CGRect)rect
{
    UIImage *image = [UIImage imageNamed:@"YourArrowImage"];

    // create the transform to flip the path and text drawing
    CGAffineTransform transform = CGAffineTransformMakeTranslation(0, rect.size.height);
    transform = CGAffineTransformScale(transform, 1., -1.);

    // create a path that's exclude the image rect { .origin = CGPointZero, .size = [image size] } from the rect
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathMoveToPoint(path, &transform, [image size].width, 0);
    CGPathAddLineToPoint(path, &transform, rect.size.width, 0);
    CGPathAddLineToPoint(path, &transform, rect.size.width, rect.size.height);
    CGPathAddLineToPoint(path, &transform, 0, rect.size.height);
    CGPathAddLineToPoint(path, &transform, 0, [image size].height);
    CGPathAddLineToPoint(path, &transform, [image size].width, [image size].height);
    CGPathCloseSubpath(path);

    // setup your text with the desired attributes
    NSAttributedString *attributedString = [[NSAttributedString alloc] initWithString:@"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus."
                                                                           attributes:@{ NSFontAttributeName :[UIFont systemFontOfSize:24.],
                                                       NSForegroundColorAttributeName: [UIColor grayColor] }];

    // create CoreText framesetter and the text frame to draw
    CTFramesetterRef framesetter = CTFramesetterCreateWithAttributedString((CFAttributedStringRef)attributedString);

    [attributedString release];

    CTFrameRef frame = CTFramesetterCreateFrame(framesetter, CFRangeMake(0,0), path, NULL);

    CFRelease(path);
    CFRelease(framesetter);

    CGContextRef ctx = UIGraphicsGetCurrentContext();

    // save graphics state
    CGContextSaveGState(ctx);

    // apply the transfom to draw the text
    CGContextConcatCTM(ctx, transform);
    // draw the text frame
    CTFrameDraw(frame, ctx);

    // restore graphics state
    CGContextRestoreGState(ctx);

    CFRelease(frame);

    // draw the image
    [image drawAtPoint:CGPointMake(0,0)];
}
@end

Answer 2

I can not suggest you how to implement it for iOS6. But in iOS7 it is easily implemented with

UIBezierPath* exclusionPath = ... create exclusion path here
_textView.textContainer.exclusionPaths  = @[exclusionPath];

Very good tutorial - http://www.raywenderlich.com/50151/text-kit-tutorial