• DownloadingImages 下载缓存图片，显示图片文字列表

    1. 用到的技术点:

      1) Codable : 可编/解码 JSON 数据

      2) background threads : 后台线程

      3) weak self : 弱引用

      4) Combine : 取消器/组合操作

      5) Publishers and Subscribers : 发布者与订阅者

      6) FileManager : 文件管理器

      7) NSCache : 缓存

    2. 网址:

      2.1 测试接口网址:

    jsonplaceholdericon-default.png?t=N7T8https://jsonplaceholder.typicode.com/

      2.2 JSON 转 Model 网址:

    quicktypeicon-default.png?t=N7T8https://app.quicktype.io/

    3. 项目结构图

    4. Model 层

      4.1 创建 PhotoModel.swift 文件

    1. import Foundation
    2.  
    3. struct PhotoModel: Identifiable, Codable{
    4.     let albumId: Int
    5.     let id: Int
    6.     let title: String
    7.     let url: String
    8.     let thumbnailUrl: String
    9. }
    10.  
    11. /*
    12.  {
    13.    "albumId": 1,
    14.    "id": 1,
    15.    "title": "accusamus beatae ad facilis cum similique qui sunt",
    16.    "url": "https://via.placeholder.com/600/92c952",
    17.    "thumbnailUrl": "https://via.placeholder.com/150/92c952"
    18.  }
    19.  */

    5. 工具类

      5.1 创建请求数据服务类，PhotoModelDataService.swift

    1. import Foundation
    2. import Combine
    3.  
    4. /// 请求数据服务
    5. class PhotoModelDataService{
    6.     
    7.     // 单例模式 Singleton
    8.     static let instance = PhotoModelDataService()
    9.     // 返回 JSON 数据，解码成模型
    10.     @Published var photoModel:[PhotoModel] = []
    11.     // 随时取消请求
    12.     var cancellables = Set<AnyCancellable>()
    13.     
    14.     // 只能内部实例化，保证一个 App 只有一次实例化
    15.     private init() {
    16.         downloadData()
    17.     }
    18.     
    19.     // 测试接口网址: https://jsonplaceholder.typicode.com/
    20.     // 下载数据
    21.     func downloadData(){
    22.         // 获取 URL
    23.         guard let url = URL(string: "https://jsonplaceholder.typicode.com/photos") else { return }
    24.         
    25.         // 进行请求
    26.         URLSession.shared.dataTaskPublisher(for: url)
    27.             .subscribe(on: DispatchQueue.global(qos: .background))
    28.             .receive(on: DispatchQueue.main)
    29.             .tryMap(handleOutput)
    30.             .decode(type: [PhotoModel].self, decoder: JSONDecoder())
    31.             .sink { completion in
    32.                 switch(completion){
    33.                 case .finished:
    34.                     break
    35.                 case .failure(let error):
    36.                     print("Error downloading data. \(error)")
    37.                     break
    38.                 }
    39.             } receiveValue: { [weak self] returnedPhotoModel in
    40.                 guard let self  = self else { return }
    41.                 self.photoModel = returnedPhotoModel
    42.             }
    43.             // 随时取消
    44.             .store(in: &cancellables)
    45.             
    46.     }
    47.     
    48.     // 输出数据
    49.     private func handleOutput(output: URLSession.DataTaskPublisher.Output) throws -> Data{
    50.         guard
    51.             let response = output.response as? HTTPURLResponse,
    52.             response.statusCode >= 200 && response.statusCode < 300 else {
    53.             throw URLError(.badServerResponse)
    54.         }
    55.         return output.data
    56.     }
    57. }

      5.2 创建图片缓存管理器类，PhotoModelCacheManager.swift

    1. import Foundation
    2. import SwiftUI
    3.  
    4. /// 图片缓存管理器
    5. class PhotoModelCacheManager{
    6.     // 单例模式
    7.     static let instance = PhotoModelCacheManager()
    8.     // 只能内部实例化，保证一个 App 只有一次实例化
    9.     private init() {}
    10.     // 图片数量缓存，计算型属性
    11.     var photoCache: NSCache<NSString, UIImage> = {
    12.         let cache = NSCache<NSString, UIImage>()
    13.         cache.countLimit = 200
    14.         cache.totalCostLimit = 1024 * 1024 * 200  // 200mb
    15.         return cache
    16.     }()
    17.     
    18.     // 添加
    19.     func add(key: String, value: UIImage){
    20.         photoCache.setObject(value, forKey: key as NSString)
    21.     }
    22.     
    23.     // 获取
    24.     func get(key: String) -> UIImage? {
    25.         return photoCache.object(forKey: key as NSString)
    26.     }
    27. }

      5.3 创建储存图片文件管理类，PhotoModelFileManager.swift

    1. import Foundation
    2. import SwiftUI
    3.  
    4. // 存储图片文件管理器
    5. class PhotoModelFileManager{
    6.     // 单例模式
    7.     static let instance = PhotoModelFileManager()
    8.     let folderName = "downloaded_photos"
    9.     
    10.     private init(){
    11.         createFolderIfNeeded()
    12.     }
    13.     
    14.     // 创建存放图片的目录
    15.     private func createFolderIfNeeded(){
    16.         guard let url = getFolderPath() else { return }
    17.  
    18.         if !FileManager.default.fileExists(atPath: url.path){
    19.             do {
    20.                 try FileManager.default.createDirectory(at: url, withIntermediateDirectories: true)
    21.                 print("Created folder success.")
    22.             } catch let error {
    23.                 print("Error creating folder. \(error)")
    24.             }
    25.         }
    26.     }
    27.     
    28.     // 创建文件夹路径
    29.     private func getFolderPath()-> URL?{
    30.         return FileManager
    31.             .default
    32.             .urls(for: .cachesDirectory, in: .userDomainMask)
    33.             .first?
    34.             .appendingPathComponent(folderName)
    35.     }
    36.     
    37.     // .../downloaded_photos
    38.     // .../downloaded_photos/image_name.png
    39.     /// 获取图片路径
    40.     /// - Parameter key: 名字
    41.     /// - Returns: 图片路径
    42.     private func getImagePath(key: String) -> URL?{
    43.         guard let folder = getFolderPath() else { return nil}
    44.         return folder.appendingPathComponent(key + ".png")
    45.     }
    46.     
    47.     // 添加图片
    48.     func add(key: String, value: UIImage){
    49.         // 获取数据和路径
    50.         guard let data = value.pngData(),
    51.               let url  = getImagePath(key: key) else { return }
    52.         // 文件写人数据
    53.         do {
    54.             try data.write(to: url)
    55.             print("Saving to file success.")
    56.         } catch let error {
    57.             print("Error saving to file manager. \(error)")
    58.         }
    59.     }
    60.   
    61.     // 获取图片
    62.     func get(key: String) -> UIImage?{
    63.         guard
    64.             let path = getImagePath(key: key)?.path,
    65.             FileManager.default.fileExists(atPath: path) else {
    66.             //print("Error getting path.")
    67.             return nil
    68.         }
    69.         return UIImage(contentsOfFile: path)
    70.     }
    71. }

    6. ViewModel 层

      6.1 创建下载图片 ViewModel 类，DownloadingImageViewModel.swift

    1. import Foundation
    2. import Combine
    3.  
    4. class DownloadingImageViewModel: ObservableObject{
    5.     
    6.     // 数组模型
    7.     @Published var dataArray:[PhotoModel] = []
    8.     // 请求数据服务
    9.     let dataService = PhotoModelDataService.instance
    10.     // 取消操作
    11.     var cancellables = Set<AnyCancellable>()
    12.     
    13.     init() {
    14.         addSubscribers()
    15.     }
    16.     
    17.     // 订阅数据
    18.     func addSubscribers(){
    19.         dataService.$photoModel
    20.             .sink {[weak self] returnedPhotoModel in
    21.                 guard let self = self else { return }
    22.                 self.dataArray = returnedPhotoModel
    23.             }
    24.             .store(in: &cancellables)
    25.     }
    26. }

      6.2 创建图片加载 ViewModel 类，ImageLoadingViewModel.swift

    1. import Foundation
    2. import SwiftUI
    3. import Combine
    4.  
    5. class ImageLoadingViewModel: ObservableObject{
    6.     
    7.     @Published var image: UIImage?
    8.     @Published var isLoading: Bool = false
    9.    
    10.     // 取消
    11.     var cancellables = Set<AnyCancellable>()
    12.     
    13.     // 缓存管理器
    14.     let manager = PhotoModelFileManager.instance
    15.     
    16.     let urlString: String
    17.     let imageKey: String
    18.     
    19.     init(url: String, key: String) {
    20.         urlString = url
    21.         imageKey = key
    22.         getImage()
    23.     }
    24.     
    25.     // 获取图片
    26.     func getImage() {
    27.         if let saveImage =  manager.get(key: imageKey){
    28.             image = saveImage
    29.             print("Getting saved image.")
    30.         }else{
    31.             downLoadImage()
    32.             print("Downloading image now!")
    33.         }
    34.     }
    35.     
    36.     // 下载图片
    37.     func downLoadImage(){
    38.         isLoading = true
    39.         guard let url = URL(string: urlString) else {
    40.             isLoading = false
    41.             return
    42.         }
    43.         
    44.         // 请求
    45.         URLSession.shared.dataTaskPublisher(for: url)
    46.             .map { UIImage(data: $0.data) }
    47.             .receive(on: DispatchQueue.main)
    48.             .sink { [weak self] _ in
    49.                 self?.isLoading = false
    50.             } receiveValue: { [weak self] returnedImage in
    51.                 guard
    52.                     let self = self,
    53.                     let image = returnedImage else { return }
    54.                 self.image = image
    55.                 // 下载的图像保存在缓存中
    56.                 self.manager.add(key: imageKey, value: image)
    57.             }
    58.             .store(in: &cancellables)
    59.     }
    60. }

    7. 创建 View 层

      7.1 创建下载，缓存，显示图片视图，DownloadingImageView.swift

    1. import SwiftUI
    2.  
    3. /// 下载，缓存，显示图片
    4. struct DownloadingImageView: View {
    5.     @StateObject var loaderViewModel: ImageLoadingViewModel
    6.     
    7.     init(url: String, key: String) {
    8.         // _ : 加载器  wrappedValue: 包装器
    9.         _loaderViewModel = StateObject(wrappedValue: ImageLoadingViewModel(url: url, key: key))
    10.     }
    11.     
    12.     var body: some View {
    13.         ZStack {
    14.             if loaderViewModel.isLoading{
    15.                 ProgressView()
    16.             }else if let image = loaderViewModel.image{
    17.                 Image(uiImage: image)
    18.                     .resizable()
    19.                     .clipShape(Circle())
    20.             }
    21.         }
    22.     }
    23. }
    24.  
    25. struct DownloadingImageView_Previews: PreviewProvider {
    26.     static var previews: some View {
    27.         DownloadingImageView(url: "https://via.placeholder.com/600/92c952", key: "1")
    28.             .frame(width: 75, height: 75)
    29.             .previewLayout(.sizeThatFits)
    30.     }
    31. }

      7.2 创建下载显示图片文字行视图，DownloadingImagesRow.swift

    1. import SwiftUI
    2.  
    3. struct DownloadingImagesRow: View {
    4.     let model : PhotoModel
    5.     
    6.     var body: some View {
    7.         HStack {
    8.             DownloadingImageView(url: model.url, key: "\(model.id)")
    9.                 .frame(width: 75, height: 75)
    10.             
    11.             VStack (alignment: .leading){
    12.                 Text(model.title)
    13.                     .font(.headline)
    14.                 Text(model.url)
    15.                     .foregroundColor(.gray)
    16.                     .italic()
    17.             }
    18.             .frame( maxWidth: .infinity, alignment: .leading)
    19.         }
    20.     }
    21. }
    22.  
    23. struct DownloadingImagesRow_Previews: PreviewProvider {
    24.     static var previews: some View {
    25.         DownloadingImagesRow(model: PhotoModel(albumId: 1, id: 1, title: "title", url: "https://via.placeholder.com/600/92c952", thumbnailUrl: "thumbnaolUrl here"))
    26.             .padding()
    27.             .previewLayout(.sizeThatFits)
    28.     }
    29. }

      7.3 创建下载显示图片文字列表视图，DownloadingImagesBootcamp.swift

    1. import SwiftUI
    2.  
    3. // Codable : 可编/解码 JSON 数据
    4. // background threads : 后台线程
    5. // weak self : 弱引用
    6. // Combine : 取消器/组合操作
    7. // Publishers and Subscribers : 发布者与订阅者
    8. // FileManager : 文件管理器
    9. // NSCache : 缓存
    10.  
    11. struct DownloadingImagesBootcamp: View {
    12.     @StateObject var viewModel = DownloadingImageViewModel()
    13.     
    14.     var body: some View {
    15.         NavigationView {
    16.             List {
    17.                 ForEach(viewModel.dataArray) { model in
    18.                    DownloadingImagesRow(model: model)
    19.                 }
    20.             }
    21.             .navigationTitle("Downloading Images")
    22.         }
    23.     }
    24. }
    25.  
    26. struct DownloadingImagesBootcamp_Previews: PreviewProvider {
    27.     static var previews: some View {
    28.         DownloadingImagesBootcamp()
    29.     }
    30. }

    8. 效果图:

  • 相关阅读:
    数据库随堂笔记（6）ᝰ数据库设计
    Flink DataStream 侧输出流 Side Output
    使用JMeter测试.Net5.0,.Net6.0框架下无数据处理的并发情况
    驱动开发：内核LoadLibrary实现DLL注入
    python 中import的用法：
    (续)SSM整合之springmvc笔记(@RequestMapping注解)（P124-130）还没完
    Redis 为什么这么快，你知道 I/O 多路复用吗？
    IOS硬件模拟定位原理
    QT当中的connect+eventFilter函数全解
    【正点原子STM32连载】 第六十二章 UCOSII实验2-信号量和邮箱 摘自【正点原子】MiniPro STM32H750 开发指南_V1.1
  • 原文地址：https://blog.csdn.net/u011193452/article/details/133685038