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

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
➤微信公衆號:山青詠芝(shanqingyongzhi)
➤博客園地址:山青詠芝(https://www.cnblogs.com/strengthen/
➤GitHub地址:https://github.com/strengthen/LeetCode
➤原文地址:http://www.javashuo.com/article/p-zfvgnxkm-kz.html 
➤若是連接不是山青詠芝的博客園地址,則多是爬取做者的文章。
➤原文已修改更新!強烈建議點擊原文地址閱讀!支持做者!支持原創!
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★html

目錄:[Swift]通天遁地Swiftios

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

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

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

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 }
相關文章
相關標籤/搜索