SDWebImage An Asynchronous image downloader library with cache support for iOS App Development

What Will I Learn?

This time I will teach you one of the libraries that quite popular in iOS app development project, called SDWebImage. More of iOS developer often use this library for downloading and caching images from the web.

Requirements

• iOS 8.0 or later
• OS X 10.8 or later
• Xcode 8.0 or later
• Basic Knowledge of Swift Programming Language

Difficulty

• Basic

Tutorial Contents

The first thing to do is installing Cocoapods, Cocoapods is a depedency system built with Ruby and is installable with the default Ruby available on OS X. To install Cocoapods using the default Ruby install can require you to use sudo when installing gems. Now lets open your terminal and make sure you connected to the high internet connection so cocoapods can downloaded and installed easily.
Type this command to your terminal

Xcode 8 + 9

$ sudo gem install cocoapods

Please wait until the installation is complete, the first installation process Cocoapods indeed takes a long time but with the cocoapods on your programming environtment will make it easier you use other external swift library in the future.

Creating New Xcode Project

Because the application that we built using swift language and destined for iOS operating system. Xcode is the only one option. Now lets open your Xcode apps from launchpad or typing xcode in the spotlight. If you have not Installed Xcode you can find it in the App Store.
On the main dialog of Xcode select the “Create a new Xcode Project” menu and Create Project dialog will be showing to you soon

Now the Create new project is showing to you , You will asked to select a template for your iOS new project. There is 9 different templates for application you only should choose the Singgle View App template and press the next button.

After select the template you will displayed a new dialog box. This dialog will ask you to give product name and several option for your new project. On this projcet I Will give Product Name “SDWebImageUtopian”, Organization Identifier com.iqbal.utopian, and select Swift for the Language. After that press the Next button.

After pressing the next button specify where to save the file for our project this time. I Would Prefer to save this project in Documents and create another folder called “ProjectXcode” to save all my Xcode project in one folder, Don’t forget to check the Source Control Check Box to automatically craeting git repository on your Mac.

Wait until Xcode Finish Creating your new project. If there is not an error Xcode will display a project configuration window like the image below. Now this is the time to install Cocoapods on our project lets close our Xcode project.

After Closing the Xcode project the next step is go to your terminal and direct the terminal to your xcode project. type cd and drag your Xcode project to your terminal windows. Or you can type the folder manually. If youre doing the right way the terminal windows should be looking like this image.

Now this is the time to add CocoaPods on our project environtment lest type this command on our terminal.

pod init

If there is no error after the init command it means the installation step goes well. now lets go to our terminal and find the pod file. Open the pod file with your favorite text editor except the Xcode. Because in adding library with Cocoapods process the Xcode must be closed.

After opening the podfile folder you must see the pod file code like this following image. I will introduce you about the Podfile. the Podfile is a specification that describes the dependencies of the targets of our Xcode projects. pod is the way to declare a specific dependency, podspec provides an easy API for the creation of podspecs, target is how you scope your dependencies to specific targets in your Xcode projects.

Now lets add SdWeb images depedencies after the Pods for SDWebImagUtopian line add the line on the code block below

pod 'SDWebImage', '~> 4.0'

Now let’s doing the install process to import the SDWebImage depedencies to our project. Go back to the terminal make sure your terminal direction straight to your development folders and type this following line and press enter.

pod install

Now it's time to wait until the installation is complete. This process will take a few minutes if you are still the first to use Cocoapods on your mac environtment. Make sure your computer is still connected to the internet. you can do this step also if you want to use other libraries besides SDWebImage. just add it to the Podfile file in the project folder. After the completion of the installation process then our project folder will change like this.

After the installation progress done lets check again our folder there is will be a change with our folder like the following image below. there is another xcode.proj created. now please open the white colored xcode.proj file by double clicking the file.
now open the main.storyboard file and then insert the component image into the screen layout.

After inserting the ImageView to the layout lets drag and drop the image on the safe display area and set the constraint for the ImageView. The layout should be like this

Now lets click and drag this ImageView to our ViewController file. You can do this by clicking the split screen icon on the top of our Xcode editor put the Main.Storyboard beside our ViewController file and drag the ImageView below the ViewController class opening curly brackets mark like this image below

Give the outlet named imageView and you will get this line below the ViewController class opening curly bracket

@IBOutlet weak var imageView: UIImageView!

now, you could import SDWebImage to your project by adding this following line after the import UIKit declaration.

import SDWebImage

Now this is the time to display image from the internet you can add this line inside the viewDidLoad method

imageView.sd_setImage(with: URL(string: "YOUR_IMAGE URL"), placeholderImage: UIImage(named: "placeholder.png"))

You can replace the YOUR_IMAGE_URL line with an url image link from the internet
after the step by step way that we do. The complete code would be looking like that.

ViewController.swift

Now Lets run the emulator by clicking the run button at the top of our Xcode editor

If there is not an error your emulator will displaying the image like this screenshot from my iPhone 8 Plus emulator. With what you learn in this tutorial you can make many creation for displaying image using SDWebImage library, like making a list of apartment prices in tableview. Cause You're Already learn the basics way in this tutorial.

I hope we have covered the basic of using SDWebImage features. If you have any question, let’s discuss in the comments section below.

---

Posted on Utopian.io - Rewarding Open Source Contributors

---