iOS17适配指南之UIContentUnavailableView(一)

YungFan

发布于 2023-07-24 16:11:00

5080

发布于 2023-07-24 16:11:00

文章被收录于专栏：学海无涯

介绍

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

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()
        }
    }
}

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
    }
}

效果

案例一.gif

案例二

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
        }
    }
}