iPhone : UIWebView like a rich text label

UILabel can’t show styled text … in this post UIWebView used like a “rich text label” (   SDK 4.2):

-A- How to use UIWebView with content by string
-B- How to intercept click action on link
-C- How to navigate subviews of UIWebView
-D- How to disable scroll bounce of UIWebView
-E- How to make transparent UIWebView and HTML page

UIWebView could be used in order to display rich text styles (thing that UILabel can’t do):
bold
, italic and underline styles … font sizes and styles, use CSS syntax…

For example in order to display label with mixed styles like this : ” Warning : you have to accept T&C before to start
you can’t use UILabel instead you have to use UIWebView.

-A- How to use UIWebView with content by string
-E- How to make transparent UIWebView and HTML page

Label / Strings: sometime it is useful to use “style” for labels ( underlined or bold portion of text )
Transparent : in order to use as a label we want transparence

Following code allow to do that :

/* webv_terms is instance of UIWebView */

/* Content from String with HTML code (note use of style="background-color: transparent;...)
In order to make Localized : NSLocalizedString(@"Please <B>localise</B> this string","") */
NSString *string_html=@"<html><head></head><body  text=\"#FFFFFF\" link=\"#000000\" style=\"background-color: transparent; font-family: Helvetica; font-size:14px\"><B> Warning </B> : <I> you have to accept <a href=\"http:www.google.it\">T&C</a> before to start </I></body></html>";

/* make transparent UIWebView... HTML background transparent
don't forget : style="background-color: transparent;....
which is present in html string */
[self.webv_terms setOpaque:FALSE];
[self.webv_terms setBackgroundColor:[UIColor clearColor]];

/* set html string */
[self.webv_terms loadHTMLString:string_html baseURL:nil];

-C- How to navigate subviews of UIWebView
-D- How to disable scroll bounce of UIWebView

Above code shows something like a label with a styled text. What isn’t good here is the bounce scroll that UIWebView has:
label doesn’t have that… so we have to stop UIWebView from “bouncing” vertically.
As we can suppose we have to disable it on UIScrollView that is part (a hidden layer) of UIWebView.
One approach is to change (using objectAtIndex:0 … at fixed zero position) the top view which is UIScrollView … but it isn’t a good idea and it is better doesn’t use fixed value for address the View. Instead we search for UIScrollView...

/* stop UIWebView “bouncing” vertically */
/* webv_terms is instance of UIWebView */
for(UIView *tmpView in ((UIWebView *)webv_terms).subviews){
  if([tmpView isKindOfClass:[UIScrollView class] ]){
   ((UIScrollView*)tmpView).scrollEnabled = NO;
   ((UIScrollView*)tmpView).bounces = NO;
  break;
 }
}

 -B- How to intercept click action on link

You have to create a class (let me call it WebViewDelegate) which extends <UIWebViewDelegate> and assign a its object instance how delegate for UIWebView.

/* webv_terms is instance of UIWebView */
/* webViewDelegate is instance of WebViewDelegate */
[webv_terms setDelegate:webViewDelegate];

Consider that we can use link (indeed webv_terms  has HTML content) with our defined schema (for example about:// instead of http://) :
  <a href=”about://#“>about us</a>

In class WebViewDelegate  you have to overwrite shouldStartLoadWithRequest.

// <a href="about://#">about us</a>
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
     if ([@"about" compare:[[request URL] scheme]]!=NSOrderedSame) { // 
       // Do something if user clicked on URL : for example flip the mainview and show about
     }
   return [@"about" compare:[[request URL] scheme]]==NSOrderedSame;
}

This method is called twice :

  1. a first time when HTML is loaded with : [self.webv_terms loadHTMLString:html baseURL:nil];
  2. and the second time if user clicks on the link.

It is for this reason that we check :
   if (@”about”compare:[[request URL] scheme]]!=NSOrderedSame)
In order to discover if user had clicked on link or it is the start loading event. Probably you would differentiate actions basing on which link is clicked by the user. In this case you can check(NSURLRequest *)requestin order to determinate which link is pressed.

Action sheet (uiwebview)
Action sheet (uiwebview)

Probably there are several better ways to do that …
Warning if you keep pressed link on the UIWebView an action-sheet is opened.

Powered by WP Review