前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >iOS17适配指南之UIContentUnavailableView(二)

iOS17适配指南之UIContentUnavailableView(二)

作者头像
YungFan
发布2023-07-25 15:24:00
4380
发布2023-07-25 15:24:00
举报
文章被收录于专栏:学海无涯

介绍

iOS17适配指南之UIContentUnavailableView(一)主要讲解了 UIContentUnavailableView 的基本使用与 UIContentUnavailableConfiguration 的两种配置empty()loading()。本文将介绍另外一种配置search()以及如何使用 SwiftUI 自定义配置。

案例三

代码语言:javascript
复制
import UIKit

class ViewController: UIViewController {
    lazy var tableView: UITableView = {
        let tableView = UITableView(frame: UIScreen.main.bounds)
        tableView.register(UITableViewCell.self, forCellReuseIdentifier: "abc")
        tableView.dataSource = self
        tableView.rowHeight = 60.0
        return tableView
    }()
    lazy var schoolSearchController: UISearchController = {
        let controller = UISearchController(searchResultsController: nil)
        controller.searchBar.searchBarStyle = .minimal
        controller.searchBar.sizeToFit()
        controller.searchResultsUpdater = self
        controller.searchBar.delegate = self
        return controller
    }()
    let schoolArray = ["清华大学", "北京大学", "中国人民大学", "北京交通大学", "北京工业大学",
                       "北京航空航天大学", "北京理工大学", "北京科技大学", "中国政法大学",
                       "中央财经大学", "华北电力大学", "北京体育大学", "上海外国语大学", "复旦大学",
                       "华东师范大学", "上海交通大学", "同济大学", "上海财经大学", "华东理工大学"]
    var searchArray: [String] = [] {
        didSet {
            tableView.reloadData()
            // 让系统调用updateContentUnavailableConfiguration(using: state)方法
            setNeedsUpdateContentUnavailableConfiguration()
        }
    }

    override func viewDidLoad() {
        super.viewDidLoad()

        view.addSubview(tableView)
        tableView.tableHeaderView = schoolSearchController.searchBar
    }

    override func updateContentUnavailableConfiguration(using state: UIContentUnavailableConfigurationState) {
        // 更新UISearchController的contentUnavailableConfiguration
        let config: UIContentUnavailableConfiguration? = searchArray.isEmpty ? .search() : nil
        schoolSearchController.contentUnavailableConfiguration = config
    }
}

// MARK: - UITableViewDataSource
extension ViewController: UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        if schoolSearchController.isActive {
            return searchArray.count
        } else {
            return schoolArray.count
        }
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath)
        -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "abc", for: indexPath)
        if schoolSearchController.isActive {
            cell.textLabel?.text = searchArray[indexPath.row]
            return cell
        } else {
            cell.textLabel?.text = schoolArray[indexPath.row]
            return cell
        }
    }
}

// MARK: - UISearchResultsUpdating
extension ViewController: UISearchResultsUpdating {
    // MARK: 实时搜索
    func updateSearchResults(for searchController: UISearchController) {
        if let text = searchController.searchBar.text {
            searchArray = schoolArray.filter { school -> Bool in
                school.contains(text)
            }
        }
    }
}

// MARK: - UISearchBarDelegate
extension ViewController: UISearchBarDelegate {
    // MARK: 点击搜索
    func searchBarSearchButtonClicked(_ searchBar: UISearchBar) {
        if let text = searchBar.text {
            searchArray = schoolArray.filter { school -> Bool in
                school.contains(text)
            }
        }
    }

    // MARK: 点击取消
    func searchBarCancelButtonClicked(_ searchBar: UISearchBar) {
        searchArray = schoolArray
    }
}

效果

案例三.gif

案例四

代码语言:javascript
复制
import SwiftUI
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
    }

    override func updateContentUnavailableConfiguration(using state: UIContentUnavailableConfigurationState) {
        // 使用SwiftUI自定义配置
        DispatchQueue.main.asyncAfter(deadline: .now() + 3) {
            let loadingConfig = UIHostingConfiguration {
                VStack(spacing: 20) {
                    ProgressView()

                    Text("正在加载数据...")
                        .foregroundStyle(.secondary)
                }
            }
            self.contentUnavailableConfiguration = loadingConfig
        }
        // 移除
        DispatchQueue.main.asyncAfter(deadline: .now() + 6) {
            self.contentUnavailableConfiguration = nil
            self.view.backgroundColor = .systemTeal
        }
    }
}

效果

案例四.gif

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-07-24,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 介绍
  • 案例三
    • 效果
    • 案例四
      • 效果
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档