UIImageView and UIImage. Load Image From Remote URL.

In this tutorial, you will learn how to create UIImageView programmatically and how to load an image from a remote URL.  I’ll show you how to create a UIImageView and UIImage programmatically, and teach you how to fetch and display an image from a URL.

First,  let’s create a UIImageView programmatically. UIImageView is a view that displays an image and UIImage will represent an image downloaded from a remote URL.

To create a UIImageView, you instantiate a new UIImageView object and set its frame to determine its size and position. Then, you set its image property to a UIImage instance. Here’s an example of how to create both objects:

// Create a UIImageView with a specific size
let imageView = UIImageView(frame: CGRect(x:  0, y:  0, width:  200, height:  200))
let fetchedImage = UIImage(); // You will set actual image later

Step 2: Loading Image Data from a Remote URL

To load an image from a remote URL, you need to download the image data and convert it into a UIImage. This process should be done on a background queue to avoid blocking the main thread, which keeps your app responsive.

Here’s an example of how to load an image from a URL:

// Define the URL of the image
let imageUrlString = "https://www.appsdeveloperblog.com/wp-content/uploads/2022/06/2595366_47d8_6.jpg"
guard let imageUrl = URL(string: imageUrlString) else { return }

// Start a background task to download the image
DispatchQueue.global(qos: .userInitiated).async {
    // Download the image data
    if let imageData = try? Data(contentsOf: imageUrl) {
        // Convert the data into a UIImage
        if let image = UIImage(data: imageData) {
            // Update the UIImageView on the main thread
            DispatchQueue.main.async {
                imageView.image = image
            }
        }
    }
}

Remember to always perform UI updates on the main thread using DispatchQueue.main.async.

Step 3: Using dispatch_get_global_queue to Start a Background Thread

In the code snippet above, DispatchQueue.global(qos: .userInitiated).async is used to start a background thread. The global() method returns a concurrent queue that you can use to perform tasks in the background. The quality of service (QoS) level .userInitiated indicates that the task is initiated by the user and should be performed quickly.

Step 4: Using dispatch_get_main_queue to Update UI When the Background Thread Completes

After downloading the image data in the background, you need to update the UIImageView with the newly loaded image. Since only the main thread can update the UI, you use DispatchQueue.main.async to schedule the UI update on the main thread. If you want to learn more about background threads read this tutorial.

Step 5: Adding UIImageView as a Subview to the Main View and positioning it Center

To display the UIImageView on the screen, you need to add it as a subview to your view controller’s main view. To center the UIImageView within the main view, set its center property to the center of the main view. Here’s how you can do that:

self.view.addSubview(imageView)
imageView.center = self.view.center

Complete Code Example

Here’s the complete code example that includes all the steps discussed above:

import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
    }
    
    override func viewWillAppear(_ animated: Bool) {
        let imageUrlString = "https://www.appsdeveloperblog.com/wp-content/uploads/2022/06/2595366_47d8_6.jpg"
        guard let imageUrl = URL(string: imageUrlString) else { return }
        
        // Start background thread so that image loading does not make app unresponsive
        DispatchQueue.global(qos: .userInitiated).async {
            
            // Download the image data
            if let imageData = try? Data(contentsOf: imageUrl) {
                // Convert the data into a UIImage
                if let image = UIImage(data: imageData) {
                    // Update the UIImageView on the main thread
                    DispatchQueue.main.async {
                        let imageView = UIImageView(frame: CGRect(x:  0, y:  0, width:  200, height:  200))
                        imageView.center = self.view.center
                        imageView.image = image
                        imageView.contentMode = .scaleAspectFit
                        self.view.addSubview(imageView)
                    }
                }
            }
        }
    }
}

how to create UIImageView programmatically and how to load an image from a remote URL

UIImageView Extension Approach

You can achieve the same result as above using the UIImageView extension. This approach makes your code more clear and easy to read. This is another complete example of fetching images from remote URLs.

import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
    }
    
    override func viewWillAppear(_ animated: Bool) {
        let imageView = UIImageView(frame: CGRect(x:  0, y:  0, width:  200, height:  200))
        let imageURL = URL(string: "https://www.appsdeveloperblog.com/wp-content/uploads/2022/06/2595366_47d8_6.jpg")!
        
        Task {
            await imageView.setImage(from: imageURL)
        }
        
        imageView.center = self.view.center
        imageView.contentMode = .scaleAspectFit
        self.view.addSubview(imageView)
    }
}

// Extension for fetching remote image
extension UIImageView {
    func setImage(from url: URL, placeholder: UIImage? = nil) async {
        self.image = placeholder
        do {
            let request = URLRequest(url: url)
            let (data, _) = try await URLSession.shared.data(for: request)
            if let image = UIImage(data: data) {
                DispatchQueue.main.async {
                    self.image = image
                }
            }
        } catch {
            print("Failed to load image: \(error)")
        }
    }
}

The provided code sets up an UIImageView to display an image fetched from a remote URL using Swift’s async/await feature. The UIImageView extension includes an async function setImage(from:placeholder:) that loads the image data from a given URL, converts it to a UIImage, and sets it to the UIImageView.

Overall, this is the modern approach to loading images asynchronously in a UIKit application using Swift’s concurrency model.

Conclusion

If you are interested in video lessons on how to write Unit tests and UI tests to test your Swift mobile app, check out this page: Unit Testing Swift Mobile App

I hope this tutorial was helpful to you. You now know how to create UIImageView programmatically and how to load an image from a remote URL.

To learn more about Swift and find more Swift code examples and tutorials, please check my Swift Code Examples page.

Happy coding!

Leave a Reply

Your email address will not be published. Required fields are marked *