iPhone: Showing HTML like content (help page) with scrolling

Question

I am currently designing a help page for my iPhone app using interface builder. IB seems lacking in terms of designing content that is larger than one page. I may want to put an image or two in between content to make the help more visually appealing and easier to understand. Currently I have one large label that flows off the screen which doesnt scroll.

So what is the best method to achieve a half decent help page, with basic text and images and scrolling. Am I best off simply creating a web page and embedding it in the app somehow then displaying it in a web control?

score 2 · Answer 1 · answered Jan 19 '12 at 21:26

2

You should look at Facebook's Three20 library ( http://three20.info ) and its TTStyledLabel. It can handle HTML-like formatting. If you need content larger thatn one page, you should consider using UIWebView for that.

answered Jan 19 '12 at 21:26

Ahmed Al Hafoudh

8,281
1
18
34

score 2 · Accepted Answer · edited May 23 '17 at 12:11

2

The UIWebView will handle HTML content given to it in a string.

If you want to load local images in the UIWebview, refer to this link:

Define path using:

NSString *path = [[NSBundle mainBundle] bundlePath];
NSURL *baseURL = [NSURL fileURLWithPath:path];
[webView loadHTMLString:htmlString baseURL:baseURL];

Then you can access the image using the standard

<img src="myimage.png">

This link is the original page.

edited May 23 '17 at 12:11

Community

1
1

answered Jan 19 '12 at 21:59

dgund

3,459
4
39
64

Any idea how I'd load local images in too? – Chris Jan 19 '12 at 22:09
Awesome thanks, P.s. I have tried this but the image doesnt load... Any ideas what I'm doing wrong or how I can debug this? – Chris Jan 19 '12 at 22:45
Are you using a .png file? Perhaps the second link that I added will help. It suggests putting your code in viewWillAppear, if you haven't done that. – dgund Jan 19 '12 at 23:43
Yes it is a png file, does that matter? – Chris Jan 20 '12 at 09:24
No its good because my sample code references a png file. Did the link help? – dgund Jan 20 '12 at 21:32
1

I re read your question and the link and it solved my issue, thanks! – Chris Jan 22 '12 at 12:53

score 1 · Answer 3 · answered Jan 19 '12 at 21:20

1

Put your text label inside a UIScrollView and set it's lineBreakMode to UILineBreakModeWordWrap:

textLabel.lineBreakMode = UILineBreakModeWordWrap;
textLabel.numberOfLines = 2;

answered Jan 19 '12 at 21:20

esqew

42,425
27
92
132

I can't seem to get this to work. I have a Scroll View with two labels inside, one heading and one with the content set to 0 lines and word wrap... – Chris Jan 19 '12 at 22:00

iPhone: Showing HTML like content (help page) with scrolling

3 Answers3