Implement UIWebView With A Transparent Background In iPhone

In this application we will see how to add WebView with a transparent background. It is a very simple application. Let see how it is worked.

Step 1: Create a Window base application using template. Give the name of the application “WebView”.

Step 2: Xcode automatically creates the directory structure and adds essential frameworks to it. You can explore the directory structure to check out the content of the directory.

Step 3: We need to add the resource file called as “Background.png” into the resource folder. Select resources and add files existing sources and select theBackground.png.

Step 4: Now we’ll add view controller class to the project. Choose New file -> Select cocoa touch classes group and then select UIViewController subclass. Give the name WebViewController.

Step 5: We create a WebView.html from where the data will be display.

Step 6: In the AppDelegate.h file, we define UINavigationController. Make the following changes in the AppDelegate.h file .

 

 

Step 7: In the AppDelegate.m file , make the following changes :

 

 

 

Step 8: We added UIWebView in the WebViewController.h file, so make the following changes:

 

 

 

Step 9: Double click the MainWindow.xib file and open it to the Interface Builder. Drag Navigation Controller from the library and place it in the MainWindow. Once again open library, and drag view, place it on the window. Drag ImageView from the library and place in to the View window.Single click View window and bring up attribute inspector select “Backgroung.png”. Now drag WebView from the library and place it to the  View Window , drag Navigation Item from the library and place it top of the View Window. Double click it and change the name into WebView. Now select Navigation Controller and bring up connection inspector ViewController to the View window and select  “Web View”.

Step 10: Now make the following changes in the WebViewController.m file.

 

 

 

Step 11: Compile and run the application in the Simulator.

You can Download SourceCode from here WebView

Leave a Comment:

7 comments
Avers says May 16, 2010

Why NSFileHandle?

NSString* htmlString = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];

Reply
Sushant says May 17, 2010

We need to add html file in the resource folder, from there we get the data for display in the screen.

Basically we used NSFileHandle, for the work with Files,
using this method we opens the file for reading.

I have uploaded source code, may be this will helpful for you.

Reply
praveen says August 28, 2010

Thank God

This code has helped me much.

thanks again

Reply
wm says October 20, 2010

Yes, thanks – works great!

Reply
Rahul Nagpal says October 23, 2010

how it will be done without use of xib
thanx in advance

Reply
twister says November 23, 2010

thanks helpful for my work

Reply
daveg says August 10, 2012

Thanks much! Spent a few hours trying to get this working, found your tutorial and it was done in 15 mins! Well done!

Reply
Add Your Reply