Loading images from URL

Chào bạn đến với Fx Studio.

Bài viết này là một tutorial nhỏ, hướng dẫn việc lấy một ảnh từ một URL. Tuy chủ đề này rất rất là nhỏ, nhưng lại được rất nhiều bạn mới học iOS tìm kiếm. Và mình sẽ trình các cách cơ bản nhất.

Chuẩn bị thì bạn cần có một số kiến thức nhất định như sau:

• Basic iOS tutorial : Connect Networking

Mọi thứ đã ổn rồi thì …

Bắt đầu thôi!

Chuẩn bị

• MacOS 10.14.4
• Xcode 11.0
• Swift 5.1

Để mô tả về code thì bạn chỉ cần tạo một project đơn giản từ Xcode. Project mình có sử dụng:

• 4 UIImageView để loading images
• 4 function với 4 cách sử dụng khác nhau
• 1 image url

Cách 1: Data Content

func loading1() {
        let url = URL(string: image_url)
        let data = try? Data(contentsOf: url!)

        if let imageData = data {
            let image = UIImage(data: imageData)
            imageView1.image = image
        }

    }

Đây là cách đơn giản nhất. Bạn có thể tìm thấy nhiều trên google. Cách này lấy một data là nội dung của url. Công việc của bạn là biến link ảnh (đang kiểu dữ liệu String) thành một URL.

Sau đó, sử dụng function contentOf: để lấy Data của ảnh về. Tiến hành kiểm tra dữ liệu nhận được ổn hay không.

Cuối cùng, chuyển đổi Data thành UIImage. Và gán vào thuộc tính image của UIImageView.

Nhược điểm của nó là thực thi ở Main Thread. Nếu ảnh có dung lượng lớn thì UI ứng dụng sẽ bị block.

Cách 2: URLSession

func loading2() {
        let url = URL(string: image_url)
        
        let session = URLSession.shared
        let dataTask = session.dataTask(with: url!) { (data, response, error) in
            DispatchQueue.main.async {
                if error != nil {
                    print("Error fetching the image! 😢")
                } else {
                    self.imageView2.image = UIImage(data: data!)
                }
            }
        }
            
        dataTask.resume()
    }

Vì tất cả dữ liệu đều là kiểu Data. Và ảnh lại để ở một nơi nào đó trên server. Nên áp dụng cách đơn giản nhất của bài Connect Networking, thì mình có thể dễ dàng lấy được data của ảnh. Công việc còn lại là biến đổi Data thành UIImage.

Đối tượng cần sử dụng là URLSession. Thao tác qua một DataTask.

Cách này sẽ rất hiệu quả khi bạn muốn loading/download image từ các function của delegate TableView/CollectionView hoặc sử dụng với ViewModel.

Cài đặt thêm callback để nó ngầu hơn.

func loading2(urlString: String, completion: @escaping (UIImage?) -> ()) {
        let url = URL(string: urlString)
        
        let session = URLSession.shared
        let dataTask = session.dataTask(with: url!) { (data, response, error) in
            DispatchQueue.main.async {
                if error != nil {
                    completion(nil)
                } else {
                    completion(UIImage(data: data!))
                }
            }
        }
            
        dataTask.resume()
    }

Cách dùng:

loading2(urlString: image_url) { (image) in
            if let image = image {
                self.imageView2.image = image
            }
        }

Cách 3: Data Content with Dispatch

func loading3() {
        guard let imageURL = URL(string: image_url) else { return }

        DispatchQueue.global().async {
            guard let imageData = try? Data(contentsOf: imageURL) else { return }

            let image = UIImage(data: imageData)
            DispatchQueue.main.async {
                self.imageView3.image = image
            }
        }
    }

Cách này sẽ khắc phục nhược điểm của cách 1.

• Việc quan trọng của chúng ta cần làm là tách việc lấy dữ liệu của ảnh ra một Thread khác.
• Việc hiển thị ảnh thì sẽ cập nhật lại ở Main Thread.

Bạn cần chú ý:

• DispatchQueue.global() : làm việc ở background
• DispatchQueue.main : làm việc tại Main Thread

Cách 4: Extension

extension UIImageView {
    func load(url: URL) {
        DispatchQueue.global().async { [weak self] in
            if let data = try? Data(contentsOf: url) {
                if let image = UIImage(data: data) {
                    DispatchQueue.main.async {
                        self?.image = image
                    }
                }
            }
        }
    }
    
    func load(urlString: String) {
        guard let url = URL(string: urlString) else { return }
        
        DispatchQueue.global().async { [weak self] in
            if let data = try? Data(contentsOf: url) {
                if let image = UIImage(data: data) {
                    DispatchQueue.main.async {
                        self?.image = image
                    }
                }
            }
        }
    }
}

Khi bạn thấy mệt mỏi vì phải viết rất nhiều dòng code và viết đi viết lại nhiều lần ở nhiều file. Tại sao không tái sử dụng chúng. Bằng cách tạo ra 1 extension của UIImageView. Ở đoạn code trên, mình viết 2 function với 2 tham số:

• URL
• String.

Cách loading/download tương tự như các thứ 3.

Bạn xem cách dùng của nó như thế nào?

func loading4() {
        imageView4.load(urlString: image_url)
    }

Đơn giản, nhanh, gọn, lẹ.

Tới đây thì bạn có thể loading/download image từ một url rồi. Bạn có thể checkout mã nguồn tại đây. Chúc bạn thành công!

Tạm kết

• Các cách cơ bản để loading/download image từ url
• Thao tác với Dispatch
• Tạo extension để tái sử dụng trong project

Written by chuotfx

Hãy ngồi xuống, uống miếng bánh và ăn miếng trà. Chúng ta cùng nhau đàm đạo về đời, về code nhóe!