iOS17适配指南之UIContentUnavailableView(一)

介绍

新增视图，表明内容不可达，特别适用于没有数据时的占位视图。

UIContentUnavailableConfiguration

• UIContentUnavailableView 的装备参数，用于设置不可达时的占位内容。
• 既可以使用 UIKit，又可以使用 SwiftUI。
• 体系提供了 3 种装备，分别为empty()、loading()与search()。
• UIViewController 增加了一个该类型的参数contentUnavailableConfiguration，用于设置view内容不可达时的占位内容。

事例一

import UIKit
class ViewController: UIViewController {
    lazy var tableView: UITableView = {
        let tableView = UITableView(frame: UIScreen.main.bounds, style: .plain)
        tableView.dataSource = self
        tableView.register(UITableViewCell.self, forCellReuseIdentifier: "abc")
        return tableView
    }()
    // UIContentUnavailableView
    lazy var unavailableView: UIContentUnavailableView = {
        var config = UIContentUnavailableConfiguration.empty()
        // 装备内容
        config.text = "暂无数据"
        config.textProperties.color = .red
        config.secondaryText = "正在加载数据..."
        config.image = UIImage(systemName: "exclamationmark.triangle")
        config.imageProperties.tintColor = .red
        var buttonConfig = UIButton.Configuration.filled()
        buttonConfig.title = "加载数据"
        config.button = buttonConfig
        config.buttonProperties.primaryAction = UIAction(title: "") { _ in
            self.loadData()
        }
        var backgroundConfig = UIBackgroundConfiguration.listPlainCell()
        backgroundConfig.backgroundColor = .systemGray6
        config.background = backgroundConfig
        // 创立UIContentUnavailableView
        let unavailableView = UIContentUnavailableView(configuration: config)
        unavailableView.frame = UIScreen.main.bounds
        return unavailableView
    }()
    var content: [String] = []
    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(tableView)
        if content.isEmpty {
            view.addSubview(unavailableView)
        }
    }
    func loadData() {
        content = ["iPhone 12 mini", "iPhone 12", "iPhone 12 Pro", "iPhone 12 Pro Max",
                   "iPhone 13 mini", "iPhone 13", "iPhone 13 Pro", "iPhone 13 Pro Max",
                   "iPhone 14", "iPhone 14 Plus", "iPhone 14 Pro", "iPhone 14 Pro Max"]
        DispatchQueue.main.asyncAfter(deadline: .now() + 3) {
            self.tableView.reloadData()
            self.unavailableView.removeFromSuperview()
        }
    }
}
// MARK: - UITableViewDataSource
extension ViewController: UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return content.count
    }
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "abc", for: indexPath)
        cell.textLabel?.text = content[indexPath.row]
        cell.imageView?.image = UIImage(systemName: "iphone")
        return cell
    }
}

作用

事例二

import UIKit
class ViewController: UIViewController {
    lazy var emptyConfig: UIContentUnavailableConfiguration = {
        var config = UIContentUnavailableConfiguration.empty()
        config.text = "暂无数据"
        config.image = UIImage(systemName: "exclamationmark.triangle")
        return config
    }()
    override func viewDidLoad() {
        super.viewDidLoad()
        contentUnavailableConfiguration = emptyConfig
    }
    // MARK: - 更新UIContentUnavailableConfiguration
    override func updateContentUnavailableConfiguration(using state: UIContentUnavailableConfigurationState) {
        // 切换
        DispatchQueue.main.asyncAfter(deadline: .now() + 3) {
            let loadingConfig = UIContentUnavailableConfiguration.loading()
            self.contentUnavailableConfiguration = loadingConfig
        }
        // 移除
        DispatchQueue.main.asyncAfter(deadline: .now() + 6) {
            self.contentUnavailableConfiguration = nil
            self.view.backgroundColor = .systemTeal
        }
    }
}

作用