Quite often while using iOS apps you come across many quirky animations such as an innovative loading symbol, a unique progress bar, a fancier calendar and many more. You may want to integrate all this into your app but have no idea how to build it.
That's where Cocoapods come into the picture. Cocoapods has many libraries, i.e. code written by other people, that are available for everyone to use. You don't have to code all of this from scratch. Just install the library, include it in your code, and you're good to go.
You can also read about Cocoapods more at its official website: CocoaPods.org.
Finding Cocoapods
You can search for Cocoapods on the official website. For example, if you want a progress bar for your app, just search for "progress bar", go through a few designs and see what you like best.
Installing Cocoapods
To get started, first you need to install Cocoapods on your Mac.
- Open the Terminal. To access it quickly hit Cmd + spacebar to open up Spotlight and type in Terminal and hit Enter.
- Type in sudo gem install cocoapods. It will ask for your password. You won't be able to see your password as you type, so make sure you type it correctly and then hit Enter.
3. You will see some lines being printed out. Cocoapods is being installed. This might take several minutes.
4. Next step, type pod setup --verbose. Depending on your internet connection and how old your laptop is, each of these steps will take some time.
5. You will see the installation happening, wait till it prompts on the screen Setup Completed.
You only need to perform the above steps once. These steps installed Cocoapods on your Mac, so that you can easily add new Cocoapods to your iOS projects.
Incorporating different Cocoapods in your project
Now, let's see how to incorporate a Cocoapod in your project. Broadly, we first need to install the Cocoapod, and then use it in our code.
We will be adding a progress / loading icon. It will look like this:
Adding a Cocoapod to your project
To add a Cocoapod to our project, we first need to have a project. So let's create one:
- Create a new project on Xcode and name it Progress.
- Shutdown all your projects and Xcode. Keyboard shortcut Cmd + Q.
Now, we can add a Cocoapod to the project.
- Make sure your project Progress is on the desktop as it's easier to navigate to it via Terminal.
- Open up Terminal and navigate to your project folder — cd Desktop followed by cd Progress. Now you're in your project directory.
- Type pod init. This command creates a pod file in your project.
- To open up the pod file that you just created, type in open -a Xcode Podfile and hit enter.
- We are going to incorporate SVProgressHUD in our code. Go to cocoapods.org and type SVProgressHUD in the search, you will end up on the following page: SVProgressHUD on CocoaPods.org.
- We recommend trying to read the documentation on the page. It might be difficult to make sense of everything, but try to understand as much as you can.
- In the Podfile, uncomment the second line by remove # and add line pod 'SVProgressHUD'. Save and close the file.
8. Type the command in the terminal pod install to complete the installation.
Now when you open the project folder you'll be able to see a new type of Xcode file, with extension xcworkspace and a white color symbol. We have finished adding the Cocoapod to the project.
From now, make sure you open the project using the .xcworkspace file (not he .xcodeproj file).
Okay, time to write some code.
Using the Cocoapod
Open the .xcworkspace. You'll notice many new files and folders have been added because of installing the pod.
Navigate as shown above to find our previous files.
To know more about customisation of SVProgressHUD, visit their Github profile. In general, you should practice this habit for all the Cocoapods you wish to include later on in your projects. SVProgressHUD/SVProgressHUD: A clean and lightweight progress HUD for your iOS and tvOS app.
Go to ViewController.swift and right below import UIKit, type:
import SVProgressHUD
After typing this, Xcode will show an error. Do not worry, hit Cmd + B to build the project. You may have to do it a few times till the warning doesn't go away.
Now, let's create a progress circle to show that the data is loading. The function override func viewDidLoad() is executed when the screen is first loaded, this a good place to show the loading feature.
The code for this is:
SVProgressHUD.show(withStatus: "It's Loading!")
You can see that when you type, autocomplete comes up with lots of suggestions. You can check out all the features. The above code displays a loading symbol with the text It's Loading!.
To remove the loading the symbol, use:
SVProgressHUD.dismiss(withDelay: 2)
The number here is in seconds. So the progress circle disappears after 2 seconds.
That's it!
You can add the above two functions anywhere you want in your code. Generally, you'll want to call SVProgressHUD.show() right before you start something that requires a bit of time to run, and SVProgressHUD.dismiss(withDelay: 0) as soon the thing is done.
Summary
In this tutorial, you saw an example of how to incorporate Cocoapods in your projects. Along similar lines, you can search for tons of cocoapods out there, read their Cocoapod or Github page, and use them in your app.
