How to create Web View with Activity Indicator in Objective-C ?

Web View with Activity Indicator in Objective-C

In this tutorial, we are creating an app of Web View to display web content in your iOS application with Activity Indicator. To do so we need to use UIWebView class and further need to send it a request to load web content. Like Facebook or Twitter app, we have browsing web content in its own app.

An activity indicator is used to show that a task is in progress and it appears as a “gear” that is either spinning or stopped.

Follow below steps to create Web View project using Objective-C Language:

Step 1: Launch Xcode and create new project by clicking on Single View Application template under iOS tab as shown in below image and click Next  button.

Step 2: Enter product name as WebViewDemo and select Language as Objective-C then again click on Next button as shown in below image. Later click on Create button to create project on the next pop-up window.

Step 3: Adding Web View & Activity Indicator on View Controller

Before adding any object, just go to main.storyboard file available in the project navigator. Further, search Web View in Object Library on the right-bottom side and drag & drop that object by pressing Ctrl button and place it on the storyboard.

After placing object on View Controller, set its constraints and pin it from all four sides to zero as seen in below screenshot.

In the same manner, you need to search Activity Indicator and place it into the View Controller using drag and drop method. 

Now, set its constraints also as mentioned in below screenshot.

  

Change its style and colour from Attribute Inspector as shown in screenshot. 

Step 4: Setting up properties for those objects

Now, set the property for web view object and activity indicator object by using drop & drop method as shown in below screenshots. 

Step 5: Setting up Web View Delegate protocol

Web View needs delegate protocol which is to be added in ViewController.h file as mentioned below.

We also have to set the value to self for UIWebViewDelegate protocol in viewDidLoad() method of ViewController.m file.

ViewController.h file 

ViewController.m file 

UIWebViewDelegate protocol is needed to implement in .m file because its pre-defined methods are required for the functioning of activity indicator object and those methods are as follows:

1. webViewDidStartLoad()
2. webViewDidFinishLoad()

In 1st method, this method is invoked when web view started loading web content. During this process, activity indicator should start to animate.

- (void)webViewDidStartLoad:(UIWebView *)webView{

[self.activityIndicator startAnimating];

}

In 2nd method, this is invoked when web view finish loading web content. During this task, activity indicator should stop to animate and also hide when stopped.

- (void)webViewDidStartLoad:(UIWebView *)webView{

[self.activityIndicator stopAnimating];

self.activityIndicator.hidesWhenStopped = YES;

}

Step 6: Finally, Run the Simulator

You are Ready with your Web View and Activity Indicator. Just Run the program & will be seen below result in simulator.

NOTE: Make sure you have internet connection while running this project because url will load web content using internet.

I hope this video tutorial is helpful to you. Enjoy 👍🏻

You can also watch this blog’s video mentioned in below link:

https://www.youtube.com/watch?v=sOphjoA3mSI