The project
This project is intended to show you how easily you can download files from the internet, if you just need some content like an image or video without any secure network connection.
I’m going to show you how easy it is to setup a simple project and create your custom progress view to download files, in this case a video file from a public link.
So first, as usual, create a Project in Xcode, in this tutorial we’ll use Swift and Xcode 6.3 to make this iOS app.
Project setup
This project is pretty simple.
It has 1 viewController to display our content and views, and 2 custom views to be able to fulfill our designer’s wishes and create his design in Xcode. We need a custom view to display the circular progress view and the download button has to be customised also.
Quick tip: Better to use custom classes to customise your UI elements, you might need them later in another project, or in other classes inside the same project.
Setting up the view
Download Button
Create a new class to customise the download button. Press ⌘+N and select Cocoa Class, name it as DownloadButton and set the language to Swift.
Inside this class we only need to change/override one method, this is the awakeFromNib(), which is getting called when the view is loaded from the nib file.
Since the design shows that the button has to have a border, we specify the border width and color. CornerRadius property is used to make the button rounded and finally just set the color of the button’s title according to Normal and Highlighted (Touched) states.
Than in order to make it work, you need to go to the Storyboard (Select the viewController where you want to place your button) and add the button, select it, and open the Identity Inspector Alt+Cmd+3 and enter the name of your Custom Class for the button (in our case it is: DownloadButton).
Progress view
You might recognize this progress view from other projects and even templates.
The similar one was used in our Speedometer app
and in our Custom progress view post
.
Again, create a new class, name it ProgressView and set the subclass of to UIView.
It has 4 properties:
2 labels to show the percentage of the download, and 2 layers, one that is always visible (the dashed line) and one that shows the progress of the download request.
Let’s start with the labels:
Create the progress label, and add constraints to it so it is always positioned in the middle of the view. Than add the sizeProgressLabel which will display how many megabytes have been already downloaded, and what is the total size. We position it below the progressLabel by 10 pixels, we achieve this by adding a constraint that links the progressLabel’s bottom and the sizeProgressLabel’s top line and add 10 pixel as a margin.
Next up the progress layers.
As stated before, we have 2 layers, one that is always shown (dashed layer/circle) and the other that is used to display the progress.
We define first a start – and end angle to create a circle UIBezierPath and a centerPoint. Than setup the layers according to our designer.
For the progressLayer, set the strokeEnd and strokeStart properties both to 0.0 to show nothing. Later we’ll animate the strokeEnd property.
Create the NSURLSessionDownloadTask to download files
Obviously we need a request to download a file. We could use the well known, and awesomely written AFNetworking library
for this, but since this is just a simple tutorial, we could just use NSURLConnection
with the simplest setup.
First of all we need a variable to be able to refer back to the request. So we create a property to store the NSURLSessionDownloadTask:
Optional value, cause we’ll initialise it later, when we first use it. Then comes the method to create the request:
In this tutorial we use a hard coded url to download a video from my dropbox folder, but you could write a method that has a url as a parameter and uses that url to start the download.
Then we create the session for this task and set up the delegate to the current viewController so we can display the progress of the download. To start the downloadTask we just call resume().
In order to be able to display the progress indicator properly for the download, we need to add the delegate of the downloadTask (NSURLSessionDownloadDelegate) to our viewController where we use it and implement the methods of the delegate.
Update our header like so:
Then implement the following methods.
Of course, this will not do anything yet. The plan is to update the progress of the download request, every time the didWriteData method is called. And since we get back how many bytes we have sent already, and the total number of bytes, we can calculate the actual progress with a simple math.
progress = totalBytesWritten / totalBytesExpectedToWrite
This value is between 0.0 and 1.0, so it is perfect for our CABasicAnimation strokeEnd animation, but not really ideal to display percentage. To get the percentage, just multiply it by 100.
So our method will look like this:
With the first method, we update the progress circle, then display the percentage and the already downloaded – and the total size of the file.
There are 2 additional methods that we need to implement, the one when the file download is completed, and the other one when an error occurred during the download file process.
In this example we just go simple. Just set the labels on the view according to the outcome of the download.
Updating the progress
So now that we have the views and the request setup, we need to make sure that it is animated properly.
Animating the progressView
To animate this CAShapeLayer, we need to create a CABasicAnimation animation. We want to animate the strokeEnd property so set the keyPath to “strokeEnd” and the toValue to the actual progress.
This animation is pretty simple, you just set 2 values, 1 which used to animate the progress from and 1 to animate it to. These values has to be between 0.0 and 1.0.
Additional methods we need, are the ones to update the progress view and the labels inside:
Now run the project and press the download button to start the download of a file.
Hope you enjoyed this tutorial, you can download the project below by clicking Like it on Facebook or Share it via Twitter.
The post How to download files with a custom progress indicator in iOS appeared first on App Design Templates.