Finish UIKit tutorial

Sources/Documentation.docc/Resources/code-files/01-ViewController-10.swift

@@ -0,0 +1,14 @@
+override func viewDidLoad() {
+    super.viewDidLoad()
+    // Do any additional setup after loading the view.
+    print(KingfisherManager.shared)
+    
+    tableView.dataSource = self
+    view.addSubview(tableView)
+    NSLayoutConstraint.activate([
+        tableView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
+        tableView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
+        tableView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
+        tableView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor)
+    ])
+}

Sources/Documentation.docc/Resources/code-files/01-ViewController-11.swift

@@ -0,0 +1,25 @@
+override func viewDidLoad() {
+    super.viewDidLoad()
+    // Do any additional setup after loading the view.
+    print(KingfisherManager.shared)
+    
+    tableView.dataSource = self
+    view.addSubview(tableView)
+    NSLayoutConstraint.activate([
+        tableView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
+        tableView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
+        tableView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
+        tableView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor)
+    ])
+    
+    DispatchQueue.main.asyncAfter(deadline: .now() + 5) {
+        KingfisherManager.shared.cache.calculateDiskStorageSize { result in
+            switch result {
+            case .success(let size):
+                print("Size: \(Double(size) / 1024 / 1024) MB")
+            case .failure(let error):
+                print("Some error: \(error)")
+            }
+        }
+    }
+}

Sources/Documentation.docc/Resources/code-files/01-ViewController-12.swift

@@ -0,0 +1,31 @@
+override func viewDidLoad() {
+    super.viewDidLoad()
+    // Do any additional setup after loading the view.
+    print(KingfisherManager.shared)
+    
+    tableView.dataSource = self
+    view.addSubview(tableView)
+    NSLayoutConstraint.activate([
+        tableView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
+        tableView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
+        tableView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
+        tableView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor)
+    ])
+    
+    DispatchQueue.main.asyncAfter(deadline: .now() + 5) {
+        KingfisherManager.shared.cache.calculateDiskStorageSize { result in
+            switch result {
+            case .success(let size):
+                let sizeInMB = Double(size) / 1024 / 1024
+                let alert = UIAlertController(title: nil, message: String(format: "Kingfisher Disk Cache: %.2fMB", sizeInMB), preferredStyle: .alert)
+                alert.addAction(UIAlertAction(title: "Purge", style: .destructive) { _ in
+                    
+                })
+                alert.addAction(UIAlertAction(title: "Cancel", style: .cancel))
+                self.present(alert, animated: true)
+            case .failure(let error):
+                print("Some error: \(error)")
+            }
+        }
+    }
+}

Sources/Documentation.docc/Resources/code-files/01-ViewController-13.swift

@@ -0,0 +1,33 @@
+override func viewDidLoad() {
+    super.viewDidLoad()
+    // Do any additional setup after loading the view.
+    print(KingfisherManager.shared)
+    
+    tableView.dataSource = self
+    view.addSubview(tableView)
+    NSLayoutConstraint.activate([
+        tableView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
+        tableView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
+        tableView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
+        tableView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor)
+    ])
+    
+    DispatchQueue.main.asyncAfter(deadline: .now() + 5) {
+        KingfisherManager.shared.cache.calculateDiskStorageSize { result in
+            switch result {
+            case .success(let size):
+                let sizeInMB = Double(size) / 1024 / 1024
+                let alert = UIAlertController(title: nil, message: String(format: "Kingfisher Disk Cache: %.2fMB", sizeInMB), preferredStyle: .alert)
+                alert.addAction(UIAlertAction(title: "Purge", style: .destructive) { _ in
+                    KingfisherManager.shared.cache.clearCache {
+                        self.tableView.reloadData()
+                    }
+                })
+                alert.addAction(UIAlertAction(title: "Cancel", style: .cancel))
+                self.present(alert, animated: true)
+            case .failure(let error):
+                print("Some error: \(error)")
+            }
+        }
+    }
+}

Sources/Documentation.docc/Resources/code-files/01-ViewController-6-0.swift

@@ -0,0 +1,12 @@
+extension ViewController: UITableViewDataSource {
+    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
+        1
+    }
+    
+    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
+        let cell = tableView.dequeueReusableCell(withIdentifier: "SampleCell", for: indexPath) as! SampleCell
+        cell.sampleLabel.text = "Index \(indexPath.row)"
+        cell.sampleImageView.backgroundColor = .lightGray
+        return cell
+    }
+}

Sources/Documentation.docc/Resources/code-files/01-ViewController-6.swift

@@ -1,39 +1,3 @@
-//
-//  ViewController.swift
-//  KingfisherSample
-//
-//  Created by Wei Wang on 2023/12/12.
-//
-
-import UIKit
-import Kingfisher
-
-class ViewController: UIViewController {
-
-    lazy var tableView: UITableView = {
-        let tableView = UITableView(frame: .zero)
-        tableView.register(SampleCell.self, forCellReuseIdentifier: "SampleCell")
-        tableView.translatesAutoresizingMaskIntoConstraints = false
-        tableView.rowHeight = 80
-        return tableView
-    }()
-    
-    override func viewDidLoad() {
-        super.viewDidLoad()
-        // Do any additional setup after loading the view.
-        print(KingfisherManager.shared)
-        
-        tableView.dataSource = self
-        view.addSubview(tableView)
-        NSLayoutConstraint.activate([
-            tableView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
-            tableView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
-            tableView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
-            tableView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor)
-        ])
-    }
-}
-
 extension ViewController: UITableViewDataSource {
     func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
         1
@@ -42,12 +6,12 @@ extension ViewController: UITableViewDataSource {
     func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
         let cell = tableView.dequeueReusableCell(withIdentifier: "SampleCell", for: indexPath) as! SampleCell
         cell.sampleLabel.text = "Index \(indexPath.row)"
-        cell.sampleImageView.backgroundColor = .lightGray
         
         let urlPrefix = "https://raw.githubusercontent.com/onevcat/Kingfisher-TestImages/master/DemoAppImage/Loading/kingfisher"
         let url = URL(string: "\(urlPrefix)-1.jpg")
         cell.sampleImageView.kf.setImage(with: url)
         
+        cell.sampleImageView.backgroundColor = .lightGray
         return cell
     }
 }

Sources/Documentation.docc/Resources/code-files/01-ViewController-7.swift

@@ -1,39 +1,3 @@
-//
-//  ViewController.swift
-//  KingfisherSample
-//
-//  Created by Wei Wang on 2023/12/12.
-//
-
-import UIKit
-import Kingfisher
-
-class ViewController: UIViewController {
-
-    lazy var tableView: UITableView = {
-        let tableView = UITableView(frame: .zero)
-        tableView.register(SampleCell.self, forCellReuseIdentifier: "SampleCell")
-        tableView.translatesAutoresizingMaskIntoConstraints = false
-        tableView.rowHeight = 80
-        return tableView
-    }()
-    
-    override func viewDidLoad() {
-        super.viewDidLoad()
-        // Do any additional setup after loading the view.
-        print(KingfisherManager.shared)
-        
-        tableView.dataSource = self
-        view.addSubview(tableView)
-        NSLayoutConstraint.activate([
-            tableView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
-            tableView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
-            tableView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
-            tableView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor)
-        ])
-    }
-}
-
 extension ViewController: UITableViewDataSource {
     func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
         10
@@ -42,12 +6,12 @@ extension ViewController: UITableViewDataSource {
     func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
         let cell = tableView.dequeueReusableCell(withIdentifier: "SampleCell", for: indexPath) as! SampleCell
         cell.sampleLabel.text = "Index \(indexPath.row)"
-        cell.sampleImageView.backgroundColor = .lightGray
         
         let urlPrefix = "https://raw.githubusercontent.com/onevcat/Kingfisher-TestImages/master/DemoAppImage/Loading/kingfisher"
         let url = URL(string: "\(urlPrefix)-\(indexPath.row + 1).jpg")
         cell.sampleImageView.kf.setImage(with: url)
         
+        cell.sampleImageView.backgroundColor = .lightGray
         return cell
     }
 }

Sources/Documentation.docc/Resources/code-files/01-ViewController-8.swift

@@ -1,39 +1,3 @@
-//
-//  ViewController.swift
-//  KingfisherSample
-//
-//  Created by Wei Wang on 2023/12/12.
-//
-
-import UIKit
-import Kingfisher
-
-class ViewController: UIViewController {
-
-    lazy var tableView: UITableView = {
-        let tableView = UITableView(frame: .zero)
-        tableView.register(SampleCell.self, forCellReuseIdentifier: "SampleCell")
-        tableView.translatesAutoresizingMaskIntoConstraints = false
-        tableView.rowHeight = 80
-        return tableView
-    }()
-    
-    override func viewDidLoad() {
-        super.viewDidLoad()
-        // Do any additional setup after loading the view.
-        print(KingfisherManager.shared)
-        
-        tableView.dataSource = self
-        view.addSubview(tableView)
-        NSLayoutConstraint.activate([
-            tableView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
-            tableView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
-            tableView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
-            tableView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor)
-        ])
-    }
-}
-
 extension ViewController: UITableViewDataSource {
     func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
         10
@@ -42,7 +6,6 @@ extension ViewController: UITableViewDataSource {
     func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
         let cell = tableView.dequeueReusableCell(withIdentifier: "SampleCell", for: indexPath) as! SampleCell
         cell.sampleLabel.text = "Index \(indexPath.row)"
-        cell.sampleImageView.backgroundColor = .clear
         
         let urlPrefix = "https://raw.githubusercontent.com/onevcat/Kingfisher-TestImages/master/DemoAppImage/Loading/kingfisher"
         let url = URL(string: "\(urlPrefix)-\(indexPath.row + 1).jpg")
@@ -51,7 +14,7 @@ extension ViewController: UITableViewDataSource {
         
         let roundCorner = RoundCornerImageProcessor(radius: .widthFraction(0.5), roundingCorners: [.topLeft, .bottomRight])
         cell.sampleImageView.kf.setImage(with: url, options: [.processor(roundCorner)])
-        
+        cell.sampleImageView.backgroundColor = .clear
         return cell
     }
 }

Sources/Documentation.docc/Resources/code-files/01-ViewController-9.swift

@@ -1,64 +1,9 @@
-//
-//  ViewController.swift
-//  KingfisherSample
-//
-//  Created by Wei Wang on 2023/12/12.
-//
-
-import UIKit
-import Kingfisher
-
-class ViewController: UIViewController {
-
-    lazy var tableView: UITableView = {
-        let tableView = UITableView(frame: .zero)
-        tableView.register(SampleCell.self, forCellReuseIdentifier: "SampleCell")
-        tableView.translatesAutoresizingMaskIntoConstraints = false
-        tableView.rowHeight = 80
-        return tableView
-    }()
-    
-    override func viewDidLoad() {
-        super.viewDidLoad()
-        // Do any additional setup after loading the view.
-        print(KingfisherManager.shared)
-        
-        tableView.dataSource = self
-        view.addSubview(tableView)
-        NSLayoutConstraint.activate([
-            tableView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
-            tableView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
-            tableView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
-            tableView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor)
-        ])
-    }
-}
-
-extension ViewController: UITableViewDataSource {
-    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
-        10
-    }
-    
-    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
-        let cell = tableView.dequeueReusableCell(withIdentifier: "SampleCell", for: indexPath) as! SampleCell
-        cell.sampleLabel.text = "Index \(indexPath.row)"
-        cell.sampleImageView.backgroundColor = .clear
-        
-        let urlPrefix = "https://raw.githubusercontent.com/onevcat/Kingfisher-TestImages/master/DemoAppImage/Loading/kingfisher"
-        let url = URL(string: "\(urlPrefix)-\(indexPath.row + 1).jpg")
-        
-        cell.sampleImageView.kf.indicatorType = .activity
-        
-        let roundCorner = RoundCornerImageProcessor(radius: .widthFraction(0.5), roundingCorners: [.topLeft, .bottomRight])
-        cell.sampleImageView.kf.setImage(with: url, options: [.processor(roundCorner)]) { result in
-            switch result {
-            case .success(let imageResult):
-                print("Image loaded from cache: \(imageResult.cacheType)")
-            case .failure(let error):
-                print("Error: \(error)")
-            }
-        }
-        
-        return cell
+// cell.sampleImageView.kf.setImage(with: url, options: [.processor(roundCorner)])
+cell.sampleImageView.kf.setImage(with: url, options: [.processor(roundCorner)]) { result in
+    switch result {
+    case .success(let imageResult):
+        print("Image loaded from cache: \(imageResult.cacheType)")
+    case .failure(let error):
+        print("Error: \(error)")
     }
 }

Sources/Documentation.docc/Tutorials/GettingStartedUIKit.tutorial

@@ -1,7 +1,7 @@
 @Tutorial(time: 15) {
     @Intro(title: "Getting Started with Kingfisher (UIKit)") {
         Installs Kingfisher and basic usage of the framework with UIKit.
-        @Image(source: "getting-started-card", alt: "")
+        @Image(source: "getting-started-card", alt: "Title image of the tutorial. A kingfisher bird standing on a tree.")
     }
     
     @Section(title: "Overview") {
@@ -13,6 +13,8 @@
             - Using Kingfisher: Download and display bird images.
             - Image Processing: Convert images to rounded corners for display.
             - Cache Size Button: A feature to check cache usage.
+            
+            @Image(source:preview-4.png, alt:"The first image is loaded into the image view in cell.")
         }
     }
     
@@ -61,6 +63,7 @@
         @ContentAndMedia {
             Creating and setting up `UITableView` is not the focus of this tutorial, as it does not involve Kingfisher. 
             However, we will later use Kingfisher to manage images in the `UIImageView` within the table cells. 
+            @Image(source: preview-1.png, alt: "")
         }
         
         @Steps {
@@ -102,13 +105,14 @@
             Kingfisher simplifies the task of loading images from remote URLs. It also offers a range of user-friendly 
             processors and helper methods. In this section, we will cover how to use these features to streamline common 
             tasks.
+            @Image(source: preview-4.png, alt: "")
         }
         
         @Steps {
             @Step {
                 The simplest way to start loading a remote image into an image view in Kingfisher, is using the `kf`
                 wrapper and its method. In the code above, we already have a `sampleImageView` in the cell.
-                @Code(name: "ViewController.swift", file: 01-ViewController-5.swift)
+                @Code(name: "ViewController.swift", file: 01-ViewController-6-0.swift)
             }
             @Step {
                 To load the first image, call `kf.setImage(with:)` on the image view, with the desired URL.
@@ -159,11 +163,23 @@
                 First we want to tell the space that is taken by the image cache. For the sake of simplicity, we are 
                 not going to add any additional button to this sample. But usually the calculation is triggered by a
                 button or navigation, and the result is displayed in a label.
-                @Code(name: "ViewController.swift", file: 01-ViewController-9.swift)
+                @Code(name: "ViewController.swift", file: 01-ViewController-10.swift)
             }
             @Step {
-                In `viewDidLoad`, we call                 
-                @Code(name: "ViewController.swift", file: 01-ViewController-10.swift)
+                In `viewDidLoad`, we call the `asyncAfter` method on the `DispatchQueue.main` queue, which trigger a calculation of the current disk cache size there. This value indicates the disk space taken by Kingfisher as the disk cache.
+                
+                @Code(name: "ViewController.swift", file: 01-ViewController-11.swift)
+            }
+            @Step {
+                To make it clear, we can create an alert and display it to the user, with a button to clear the cache manually.
+                @Code(name: "ViewController.swift", file: 01-ViewController-12.swift) {
+                    @Image(source:preview-5.png, alt:"An alert which shows the disk cache size used by Kingfisher, with a button to purge the cache.")
+                }
+            }
+            @Step {
+                Finally, call `clearCache` to purge both the memory cache and the disk cache. Then, if we try to reload the data of the table view, we can see the images are downloaded again from the network: in this case, "Image loaded from cache: none" will be printed to the console.
+                @Code(name: "ViewController.swift", file: 01-ViewController-13.swift)
+                The cache cleaning is only for demonstration purpose. In practice, usually you do not need to call it yourself. Kingfisher will manage and purge the data based on its default policy.
             }
         }
     }