IOS wrapping text around image

Question

I have a few short paragraphs of text that I would like to put in the image in the application. Typically, the image will be on the left side of the text, and the text will flow as you normally expect. The image has different heights and widths and size files of 4-30 kilobytes in size. The text has different lengths and can be from 2 to several paragraphs. There is markup with text, so different lines can be formatted accordingly.

I use UIWebView in my UIView to do this in the fastest way, but I noticed that although my text and images are local, there is a noticeable delay when the UIWebView loads and displays the image and text. Basically, you see the viewing area empty, and then after a short period of time you see the image loading. In most cases, the text appears as loaded in front of the image.

I use the UIWebView 'loadHTMLString' to load local html text and images.

What I want to achieve will look like this:

 | [ ] | Some text starts here and is long enough to fil until the end of the line. Then | [image] | the text continues so it wraps around a few more lines to fit the entire | [ ] | height of the image. Eventually, we'll show the text below the image, just like you see in a newspaper. The content would continue at variable length for the rest of the screen. 

Is there a better way to display formatted text with images? If there is something better than UIWebView, I would like to move on to this.

Answer 1

I think that your main strategy should be (1) to achieve an acceptable level of UIWebView performance and (2) if this fails, and this is really important, roll up your own text layout code.

Some ideas:

• Try loading the content into the UIWebView class as early as possible before it appears on the screen.
• See if inline styles (instead of the linked stylesheet) use load time.
• See if inline images (using <img src="data:..." ) use load time.

If none of this works and you want to minimize it yourself, you will have to write your own text layout code. Perhaps you could do this using the NSString UIKit add-ons: split text into words, calculate the size of each word (using sizeWithFont: and lay out the text line by line. You should probably figure out in stages, but actually draw a whole line at a time, which should work better. Or you could create a new line with new lines inserted in the right places and do it all in one go.

Good luck

Answer 2

Try the following. It is without CoreText and HTML

UIBezierPath * imgRect = [UIBezierPath bezierPathWithRect: CGRectMake (0, 0, 100, 100)];

 UIImageView *imageView= [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 100, 100)]; imageView.image=[UIImage imageNamed:@"defaultImage"]; [self.textView addSubview:imageView]; self.textView.textContainer.exclusionPaths = @[imgRect];