How Can I Draw Image with Text Wrapping on iOS?

Question

I want to draw text just like the following style -- the image is always on the top right corner, and the text is around the image.

Could anyone tell me how to implement this on iOS? Do I need to use Core Text?

Thanks in advance!

Inning

Answer 1

Yes, CoreText is the best way to do this. The code to do it is a little long to post here. Some code that may point you in the right direction is in the article "Clipping a CGRect to a CGPath." If the process for doing it is still confusing, ping me and I finally write the blog post I've been meaning to write on the subject.

Attire

I think I need your help. I don't quite understand the code in your blog post. Could you please write an article on this subject? Thank you! – Inning

Haven't forgotten about this; it's just taken a bit to put it together. – Attire

It's a bit rough, but hopefully it'll get you moving in the right direction. robnapier.net/blog/wrapping-text-around-shape-with-coretext-540 – Attire

Answer 2

Step 1 : Create an object inherited from UIView

Step 2 : Override - (void)drawRect:(CGRect)rect method

Step 3 : Add Following code to this method

/* Define some defaults */
float padding = 10.0f;

/* Get the graphics context for drawing */
CGContextRef ctx = UIGraphicsGetCurrentContext();

/* Core Text Coordinate System is OSX style */
CGContextSetTextMatrix(ctx, CGAffineTransformIdentity);
CGContextTranslateCTM(ctx, 0, self.bounds.size.height);
CGContextScaleCTM(ctx, 1.0, -1.0);
CGRect textRect = CGRectMake(padding, padding, self.frame.size.width - padding*2, self.frame.size.height - padding*2);

/* Create a path to draw in and add our text path */
CGMutablePathRef pathToRenderIn = CGPathCreateMutable();
CGPathAddRect(pathToRenderIn, NULL, textRect);

/* Add a image path to clip around, region where you want to place image */ 
CGRect clipRect = CGRectMake(padding,  self.frame.size.height-50, 50, 40);
CGPathAddRect(pathToRenderIn, NULL, clipRect);

/* Build up an attributed string with the correct font */
NSMutableAttributedString *attrString = [[NSMutableAttributedString alloc] initWithString:self.Text];

//setFont
 CTFontRef font = CTFontCreateWithName((CFStringRef) [UIFont systemFontOfSize:10].fontName, [UIFont systemFontOfSize:10].lineHeight, NULL);
CFAttributedStringSetAttribute(( CFMutableAttributedStringRef) attrString, CFRangeMake(0, attrString.length), kCTFontAttributeName,font);

//set text color
 CGColorRef _white=[UIColor whiteColor].CGColor;
CFAttributedStringSetAttribute(( CFMutableAttributedStringRef)(attrString), CFRangeMake(0, attrString.length),kCTForegroundColorAttributeName, _white);

/* Get a framesetter to draw the actual text */
CTFramesetterRef fs = CTFramesetterCreateWithAttributedString(( CFAttributedStringRef) attrString);
CTFrameRef frame = CTFramesetterCreateFrame(fs, CFRangeMake(0, attrString.length), pathToRenderIn, NULL);

/* Draw the text */
CTFrameDraw(frame, ctx);

/* Release the stuff we used */
CFRelease(frame);
CFRelease(pathToRenderIn);
CFRelease(fs);

Step 4 : Use as follows;

TextLayoutView *TextWrappingImage=[[TextLayoutView alloc] init...your own constructor...];

 TextWrappingImage.backgroundColor=[UIColor clearColor];

 [cell addSubview:TextWrappingImage]; //Add as subview where you want

Jato

Answer 3

Similar problem. I solved it by creating my text-with-graphics document in HTML using standard markup tags, added the html and pngs to my project, and displayed it using a UIWebView. :-)

Asseverate

+1. It may not be the most elegant solution however I used this method and it's one line of code to handle this and just some simple CSS on a div element.. width:95px; height:95px; margin:5px 5px 5px 0px; border:1px solid #eee; float:left; background:url(%@) center center; background-repeat:no-repeat; background-size: contain; Much smaller and easier to implement in my opinion. Thanks – Noteworthy