UIProgressView Tutorial: Show download progress to users in IOS8

Tags: #UIProgressView #Tutorial #IOS8 #Download #Percentage

Most of the apps made are based on a centralised database and which means interactivity with server using internet. For app developers, its a common situation/scenario to make apps that interact with centralised database commonly know as server. Its a most important thing to give user a good experience by showing how much data has been loaded from server while making a request. You can think of a scenario where image is getting loaded from server, commonly in that case we can show UIActivityIndicatorView to user letting them know that something is going on. In this post, i am telling you that how can we show download percentage to user.

Create a new Xcode project and name it ProgressCalculator and press create.

ProgressCalculator Xcode Project creation

Open viewController.h file and create following instance variables

IBOutlet UIImageView *wallpaperImageView;

IBOutlet UIProgressView *progress;

    NSURLConnection *connectionRequest;
    NSMutableData *responseData;
    float expectedBytes ;

Here, we created an IBOutlet to our UIImageView in which we are going to display our image coming from server. UIProgressView is used to display progress. NSURLConnection is used to make a connection to server. NSMutableData is used to receive data coming from server, expectedBytes is taken to count our downloading progress. Also please specify that we are going to implement NSURLConnectionDelegate, shown below

@interface ViewController : UIViewController

Declare an IBAction, so that we can initiate download of image from server.

-(IBAction)loadImage:(id)sender;

Now open .xib file and drag an UIImageView over view object, connect IBOutlet to it by right click on FileOwner or viewController(in case of using storyboard), then drag UIProgressView and add our IBAction to it TouchupInside event.

Open up .m file and in its define our action add the code shown below

-(IBAction)loadImage:(id)sender

{

progress.progress=0.0;

NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL URLWithString:@”http://i62.tinypic.com/13yjcqh.png”]

cachePolicy:NSURLRequestUseProtocolCachePolicy

timeoutInterval:60.0];

connectionRequest = [[NSURLConnection alloc] initWithRequest:request delegate:self];

responseData = [[NSMutableData alloc]initWithCapacity:0];

}

In above code, we are making an request to a server by specifying our image path or image URL.In first line we set our progress to zero or starting position. We are using NSURLCachePolicy so that if we try to load same image again and again then it loads faster in comparison to when it loads first time. Then we wrap our request into our NSURLConnection object and allocate our responsedata instance. Now its time to implement delegate methods of NSURLConnection class and is most important part in terms of showing progress of our image download process.

– (void)connection:(NSURLConnection *)connection didFailWithError:(NSError *)error
{
   //Show failure alert here
}
– (void)connection:(NSURLConnection *)connection didReceiveResponse:(NSURLResponse *)response
{
    [responseData setLength:0];
    expectedBytes = [response expectedContentLength];

}
– (void)connection:(NSURLConnection *)connection didReceiveData:(NSData *)data
{
    [responseData appendData:data];
    float progressive = (float)[responseData length] / (float)expectedBytes;

progress.progress=progressive;

}
– (void)connectionDidFinishLoading:(NSURLConnection *)connection
{
//assing image to our UIIMageView
wallpaperImageView.image = [UIImage imageWithData:responseData];
}

Above are delegate methods of NSURLConnection and explanation of each of them is as follows

didFailWithError :- This methods gets called whenever our connection failed with some error.

didReceiveResponse :- This method gets called when our connection receive response from server. Here we set our responseData length to 0, and expected to length of the data we are going to receive.

didReceiveData :- This method gets called whenever we receive data from server, this methods will gets called multiple times as data from server comes in chunks.Here we append data that is coming from server to our responseData. Also here we calculate progress by simply dividing responseData length by expectedBytes. responseData length give us total data we received so far. Then assigning progressive to our UIProgressView, we can use progress property of UIProgressView.

connectionDidFinishLoading:- This method gets called when our connection gets finished. Here we assign image coming from server as NSData object to our UIIMageView object.

Source Code: SOURCE CODE DOWNLOAD FROM HERE

Output Video: