iOS17适配指南之UIContentUnavailableView(一)

0130

介绍

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

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

效果

案例一.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
        }
    }
}
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
        }
    }
}
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
        }
    }
}

效果

案例二.gif

© 版权声明
文章版权归作者所有，未经允许请勿转载，侵权请联系 admin@trc20.tw 删除。
THE END

# iOS
喜欢就支持一下吧
点赞0

Warning: mysqli_query(): (HY000/3): Error writing file '/tmp/MYZgpcpQ' (Errcode: 28 - No space left on device) in /www/wwwroot/583.cn/wp-includes/class-wpdb.php on line 2345
admin的头像-五八三
相关推荐
评论 抢沙发
头像
欢迎您留下宝贵的见解！
提交
头像

昵称

图形验证码
取消
昵称

请填写用户信息：

  • 昵称(必填)
  • 邮箱(必填)
代码

请输入代码：

确认
图片
文章目录
文章目录
热门推荐