本文將演示圖像加載Loading動畫效果的自定義和緩存。

首先確保在項目中已經安裝了所需的第三方庫。

點擊【Podfile】,查看安裝配置文件。

1 platform :ios, ‘12.0‘
2 use_frameworks!
3 
4 target ‘DemoApp‘ do
5     source ‘https://github.com/CocoaPods/Specs.git‘
6     pod ‘Kingfisher‘
7 end

根據配置文件中的相關配置，安裝第三方庫。

然後點擊打開【DemoApp.xcworkspace】項目文件。

在項目導航區，打開視圖控制器的代碼文件【ViewController.swift】

  1 import UIKit
  2 //在當前的類文件中，引入已經安裝的第三方類庫
  3 import Kingfisher
  4 
  5 class ViewController: UIViewController {
  6 
  7     //添加一個圖像視圖變量，作為當前類的屬性
  8     var imageView : UIImageView!
  9     override func viewDidLoad() {
 10         super.viewDidLoad()
 11         // Do any additional setup after loading the view, typically from a nib.
 
 12         
 13         //設置根視圖的背景顏色為橙色
 14         self.view.backgroundColor = UIColor.orange
 15         
 16         //從項目中讀取一張圖片
 17         //創建一個圖像視圖，顯示加載的圖片
 18         let image = UIImage(named: "background")
 19         //設置圖像視圖的顯示區域為當前的視圖控制器
 20         imageView = UIImageView(image: image)
 
 21         //設置圖像視圖的邊界
 22         imageView.frame = self.view.bounds
 23         //將圖像視圖添加到根視圖
 24         self.view.addSubview(imageView)
 25         
 26         //添加一個圖像按鈕，
 27         //當用戶點擊該按鈕時，下載一張網絡圖片
 28         let button = UIButton(frame: CGRect(x: 0, y: 528, width: 320, height: 40))
 29         //設置按鈕的背景顏色為橙色
 30         button.backgroundColor = UIColor.orange
 31         //同時設置正常
 32         button.setTitle("Load image again", for: .normal)
 33         //給按鈕控件綁定點擊事件
 34         button.addTarget(self,
 35                         action: #selector(ViewController.loadImage), 
 36                         for: .touchUpInside)
 37         //將按鈕添加到根視圖
 38         self.view.addSubview(button)
 39     }
 40     
 41     //添加一個方法，用來響應按鈕的點擊事件
 42     @objc func loadImage()
 43     {
 44         //初始化一個網址對象，作為網絡圖片的地址
 45         let url = URL(string: "http://images.apple.com/v/iphone-7/d/images/films/product_large_2x.jpg")
 46         //設置網絡圖片加載功能動畫的樣式，這裏使用系統默認的動畫Loaing
 47         imageView.kf.indicatorType = .activity
 48         //將圖像視圖的顯示內容，修改為下載後的圖片
 49         imageView.kf.setImage(with: url)
 50 
 51 
 52         //獲得項目中動畫資源的路徑
 53         let p = Bundle.main.path(forResource: "loading", ofType: "gif")!
 54         //從項目中讀取一張GIF動畫
 55         let data = try! Data(contentsOf: URL(fileURLWithPath: p))
 56         //設置在下載圖片時，使用這張圖片的素材，作為圖片下載時的Loading動畫。
 57         imageView.kf.indicatorType = .image(imageData: data)
 58         //將圖像視圖的顯示內容，修改為下載後的圖片
 59         imageView.kf.setImage(with: url)
 60         
 61 
 62         //調用擴展方法，下載並設置網絡上的圖片，同時設置下載進度
 63         imageView.kf.setImage(with: url, progressBlock:
 64         {
 65             //通過已經接收的字節數和全部的字節數，計算圖片下載進度的百分比
 66             receivedSize, totalSize in
 67             let percentage = (Float(receivedSize) / Float(totalSize)) * 100.0
 68             print("downloading progress: \(percentage)%")
 69         })
 70         //調用擴展方法，下載並設置網絡上的圖片，
 71         //當下載完成之後，使用漸顯的方式顯示下載的圖片
 72         imageView.kf.setImage(with: url, options: [.transition(.fade(1.0))])
 73 
 74         //初始化一個圓角圖片處理器，並設置圓角的半徑為160
 75         let processor = RoundCornerImageProcessor(cornerRadius: 160)
 76         //調用擴展方法，下載並設置網絡上的圖片，下載並設置網絡上的圖片，
 77         //同時給下載的圖片添加圓角效果
 78         imageView.kf.setImage(with: url, placeholder: nil, options: [.processor(processor)])
 79         
 80         //初始化一個模糊圖像處理器，並設置模糊半徑為4，接著再增加一個圓角處理器
 81         let processor = BlurImageProcessor(blurRadius: 4) >> RoundCornerImageProcessor(cornerRadius: 20)
 82         //調用擴展方法，下載並設置網絡上的圖片，同時給下載的圖片添加模糊和圓角效果
 83         imageView.kf.setImage(with: url, placeholder: nil, options: [.processor(processor)])
 84         
 85         //當再次給圖像視圖，設置同一個網絡圖片時，使用的是緩存的圖片，
 86         //如果需要重復下載圖片。可以設置下載選項為強制刷新。
 87         imageView.kf.setImage(with: url, options: [.forceRefresh])
 88         
 89         //如果需要從緩存中獲取圖片，可以設置下載的選項為來自緩存。
 90         imageView.kf.setImage(with: url, options: [.onlyFromCache])
 91 
 92 
 93         //圖片緩存的使用
 94         //通過圖片下載器，下載指定網址的圖片
 95         ImageDownloader.default.downloadImage(with: url!, options: [], progressBlock: nil)
 96         {
 97             (image, error, url, data) in
 98 
 99             //將下載的圖像轉換成指定的圖片格式
100             //let data = UIImagePNGRepresentation(image!)
101 
102             //通過調用圖片緩存全局對象的存儲方法，將圖片存儲到本地，並設置存儲的鍵值
103             ImageCache.default.store(image!, original: data, forKey: "AppleWatch", processorIdentifier: "", cacheSerializer: DefaultCacheSerializer.default, toDisk: false, completionHandler: nil)
104             
105             //通過簡化的方法，可以僅需指定鍵值，即可快速緩存圖片
106             ImageCache.default.store(image!, forKey: "AppleWatch")
107             //通過鍵值可以快速判斷在某鍵值下，是否存在緩存的圖片。
108             print(ImageCache.default.isImageCached(forKey: "AppleWatch"))
109         }
110         
111         //通過調用圖片緩存全局對象的刪除方法，可以刪除指定鍵值的緩存圖像
112         ImageCache.default.removeImage(forKey: "AppleWatch")
113         //通過調用圖片緩存全局對象的刪除磁盤緩存方法，可以刪除磁盤上的所有緩存圖片
114         ImageCache.default.clearDiskCache()
115         //清除內存緩存方法，可以刪除在內存中緩存的所有圖片
116         ImageCache.default.clearMemoryCache()
117         //清除過期的磁盤緩存方法，可以刪除超過指定期限的，緩存在磁盤上的圖片
118         ImageCache.default.cleanExpiredDiskCache()
119         
120         //設置緩存區域的大小為50M
121         ImageCache.default.maxDiskCacheSize = 50 * 1024 * 1024
122         //設置緩存的期限為7天，
123         //超過7天的緩存圖片將被刪除
124         ImageCache.default.maxCachePeriodInSecond = 60 * 60 * 24 * 7
125         //設置圖片下載的超時時限為30秒，當超過30秒時，下載任務失敗
126         ImageDownloader.default.downloadTimeout = 30.0 
127     }
128     
129     override func didReceiveMemoryWarning() {
130         super.didReceiveMemoryWarning()
131         // Dispose of any resources that can be recreated.
132     }
133 }

[Swift通天遁地]五、高級擴展-(11)圖像加載Loading動畫效果的自定義和緩存