fuzionpro

Posted: 04 Feb 2014 07:06 AM PST

Now a days, In most of the iOS applications showing multimedia and rich contents are very common and also its necessary to keep the user engaging when displaying the contents.

Displaying contents alone doesn’t make the user happy but how we are showing is where we can capture the real user happiness and get more hooked to the app.

In this tutorial, We are going to discuss on Detecting Images in UIWebview and show them separately and interactively like the example shown below.

Download Source

Steps for detecting images in UIWebView

Step 1

Create a SingleView Application and add the UIWebView Controller to the ViewController Xib
Connect the WebView and Delegate of the UiWebView to the ViewController

Step 2

In the viewDidLoad of the ViewController, Do the initial setup for the loading the url into the UIWebView as shown below
Where requesting the http://www.apple.com/iphone to load in the UIWebView

//Assign the Url to loaded  NSString *urladdress = @"http://www.apple.com/iphone/";  //Add the url to the NSURL  NSURL *url = [NSURL URLWithString:urladdress];  //Request the Url to load  NSURLRequest *req = [NSURLRequest requestWithURL:url];  [_webView loadRequest:req];

Step 3

Add the tap gesture to UIWebview to detect the images by using the below snippet

UITapGestureRecognizer *doubleTapGesture = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(doubleTapGesture:)];  //Set the no. of taps  doubleTapGesture.numberOfTapsRequired = 2;  //Set the delegate   doubleTapGesture.delegate = self;  //Add the gesture to the webview  [self.webView addGestureRecognizer:doubleTapGesture];

For the Tap gesture to work with webview we need to add the delegate method named

- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer {  	return YES;  }

When the user double taps on the webview, where we are getting the tagname of the all the image elements present in the webpage using the javascript and adding all the images into the array like the code given below

var names = []; var a = document.getElementsByTagName(\"IMG\");  for (var i=0, len=a.length; i<len; i++)  {  names.push(document.images[i].src);  }  String(names);

So the method goes like this

- (void)doubleTapGesture:(UITapGestureRecognizer *)sender {      NSString *script = @"var names = []; var a = document.getElementsByTagName(\"IMG\");for (var i=0, len=a.length; i<len; i++){names.push(document.images[i].src);}String(names);";  }

Inorder to execute the above mentioned javascript, we have a god blessed method called “stringByEvaluatingJavaScriptFromString” to get all the images from the webview

NSString *urls = [self.webView stringByEvaluatingJavaScriptFromString:script];

Finally, we got all the image sources in the string variable “urls” and how we are going to make use of the urls to display image sources will be seen in the next step

Step 4

Add an another ViewController named “ContentPopViewController ” and also add the WebView to its xib
Create a NSMutableArray variable to hold the urls of the image source and some label for displaying the images count and title
So the full implementation of the method doubleTapGesture is

- (void)doubleTapGesture:(UITapGestureRecognizer *)sender {      NSString *script = @"var names = []; var a = document.getElementsByTagName(\"IMG\");for (var i=0, len=a.length; i<len; i++){names.push(document.images[i].src);}String(names);";      NSString *urls = [self.webView stringByEvaluatingJavaScriptFromString:script];      //ViewController to display images      ContentPopViewController * contentPopVC = [[ContentPopViewController alloc] initWithNibName:@"ContentPopViewController_iPhone" bundle:nil];      [contentPopVC setModalPresentationStyle:UIModalPresentationPageSheet];      [contentPopVC setModalTransitionStyle:UIModalTransitionStyleCoverVertical];      contentPopVC.imageIndentifier = @"gallery";      contentPopVC.imagesArray = (NSMutableArray *)[urls componentsSeparatedByString:@","];      [self presentViewController:contentPopVC animated:YES completion:nil];  }

Step 5

Now we are moving into the “ContentPopViewController” where we are showing the images that we got from the WebView.

In the viewDidLoad call the method [self displayImage:imagesArray]; to load the image source

- (void)displayImage:(NSMutableArray *)imageArray {  	NSMutableString *html = [NSMutableString string];   	for (NSString *str in imageArray) {  		[html appendFormat:@"<div style=\"text-align:center;margin:10px;hspace=\"20\"><img src='%@' ></div>", str];  	}  	_webContent.contentMode = UIViewContentModeScaleAspectFit;  	[_webContent loadHTMLString:html baseURL:nil];  }

Step 6

Add the networkActivityIndicator to show that the content is loading in the view to give a cue that image is loading in the delegate methods of the webview like
webViewDidStartLoad
webViewDidFinishLoad
In webViewDidStartLoad add the below method

[UIApplication sharedApplication].networkActivityIndicatorVisible = YES;

In webViewDidFinishLoad add the below method

[UIApplication sharedApplication].networkActivityIndicatorVisible = NO;

Finally, output is show in the image below

Download Source

That’s it from this tutorial. Do checkout this space for more amazing and exciting tutorials to come !!!

The post Detecting Images in UIWebView iOS appeared first on Fuzionpro.

fuzionpro

fuzionpro

Steps for detecting images in UIWebView

Next

Newer Post

Previous

Older Post