Tuesday, July 26, 2011

Implement UIWebView With a Transparent background in iPhone


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 .
@interface WebViewAppDelegate : NSObject  {
UIWindow *window;
UINavigationController *myNavController;
}
@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet UINavigationController *myNavController;
Step 7: In the AppDelegate.m file , make the following changes :
- (void)applicationDidFinishLaunching:(UIApplication *)application {
[window addSubview:myNavController.view];
[window makeKeyAndVisible];
}
Step 8: We added UIWebView in the WebViewController.h file, so make the following changes:
@interface WebViewController : UIViewController {
UIWebView *webView;
}
@property (nonatomic, retain) IBOutlet UIWebView *webView;
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.
- (void)viewDidLoad
{
NSString *path = [[NSBundle mainBundle]  pathForResource:@"WebView"ofType:@"html"];
NSFileHandle *readHandle = [NSFileHandle   fileHandleForReadingAtPath:path];
NSString *htmlString = [[NSString alloc] initWithData:
[readHandle readDataToEndOfFile]   encoding:NSUTF8StringEncoding];
webView.opaque = NO;
webView.backgroundColor = [UIColor clearColor];
[self.webView loadHTMLString:htmlString baseURL:nil];
[htmlString release];
}
Step 11: Compile and run the application in the Simulator.
You can Download SourceCode from here WebView

No comments:

Post a Comment