UIKit框架（四十六） —— 支持DarkMode的简单示例（二）

版本记录

版本号	时间
V1.0	2020.07.24 星期五

前言

iOS中有关视图控件用户能看到的都在UIKit框架里面，用户交互也是通过UIKit进行的。感兴趣的参考上面几篇文章。
1. UIKit框架（一） —— UIKit动力学和移动效果（一）
2. UIKit框架（二） —— UIKit动力学和移动效果（二）
3. UIKit框架（三） —— UICollectionViewCell的扩张效果的实现（一）
4. UIKit框架（四） —— UICollectionViewCell的扩张效果的实现（二）
5. UIKit框架（五） —— 自定义控件：可重复使用的滑块（一）
6. UIKit框架（六） —— 自定义控件：可重复使用的滑块（二）
7. UIKit框架（七） —— 动态尺寸UITableViewCell的实现（一）
8. UIKit框架（八） —— 动态尺寸UITableViewCell的实现（二）
9. UIKit框架（九） —— UICollectionView的数据异步预加载（一）
10. UIKit框架（十） —— UICollectionView的数据异步预加载（二）
11. UIKit框架（十一） —— UICollectionView的重用、选择和重排序（一）
12. UIKit框架（十二） —— UICollectionView的重用、选择和重排序（二）
13. UIKit框架（十三） —— 如何创建自己的侧滑式面板导航（一）
14. UIKit框架（十四） —— 如何创建自己的侧滑式面板导航（二）
15. UIKit框架（十五） —— 基于自定义UICollectionViewLayout布局的简单示例（一）
16. UIKit框架（十六） —— 基于自定义UICollectionViewLayout布局的简单示例（二）
17. UIKit框架（十七） —— 基于自定义UICollectionViewLayout布局的简单示例（三）
18. UIKit框架（十八） —— 基于CALayer属性的一种3D边栏动画的实现（一）
19. UIKit框架（十九） —— 基于CALayer属性的一种3D边栏动画的实现（二）
20. UIKit框架（二十） —— 基于UILabel跑马灯类似效果的实现（一）
21. UIKit框架（二十一） —— UIStackView的使用（一）
22. UIKit框架（二十二） —— 基于UIPresentationController的自定义viewController的转场和展示（一）
23. UIKit框架（二十三） —— 基于UIPresentationController的自定义viewController的转场和展示（二）
24. UIKit框架（二十四） —— 基于UICollectionViews和Drag-Drop在两个APP间的使用示例 （一）
25. UIKit框架（二十五） —— 基于UICollectionViews和Drag-Drop在两个APP间的使用示例 （二）
26. UIKit框架（二十六） —— UICollectionView的自定义布局 （一）
27. UIKit框架（二十七） —— UICollectionView的自定义布局 （二）
28. UIKit框架（二十八） —— 一个UISplitViewController的简单实用示例 （一）
29. UIKit框架（二十九） —— 一个UISplitViewController的简单实用示例 （二）
30. UIKit框架（三十） —— 基于UICollectionViewCompositionalLayout API的UICollectionViews布局的简单示例（一）
31. UIKit框架（三十一） —— 基于UICollectionViewCompositionalLayout API的UICollectionViews布局的简单示例（二）
32. UIKit框架（三十二） —— 替换Peek and Pop交互的基于iOS13的Context Menus（一）
33. UIKit框架（三十三） —— 替换Peek and Pop交互的基于iOS13的Context Menus（二）
34. UIKit框架（三十四） —— Accessibility的使用（一）
35. UIKit框架（三十五） —— Accessibility的使用（二）
36. UIKit框架（三十六） —— UICollectionView UICollectionViewDiffableDataSource的使用（一）
37. UIKit框架（三十七） —— UICollectionView UICollectionViewDiffableDataSource的使用（二）
38. UIKit框架（三十八） —— 基于CollectionView转盘效果的实现（一）
39. UIKit框架（三十九） —— iOS 13中UISearchController 和 UISearchBar的新更改（一）
40. UIKit框架（四十） —— iOS 13中UISearchController 和 UISearchBar的新更改（二）
41. UIKit框架（四十一） —— 使用协议构建自定义Collection（一）
42. UIKit框架（四十二） —— 使用协议构建自定义Collection（二）
43. UIKit框架（四十三） —— CALayer的简单实用示例（一）
44. UIKit框架（四十四） —— CALayer的简单实用示例（二）
45. UIKit框架（四十五） —— 支持DarkMode的简单示例（一）

源码

1. Swift

首先看下工程组织结构

下面就是源码了

1. TeacherTableViewCell.swift

import UIKit

final class TeacherTableViewCell: UITableViewCell {
    @IBOutlet private weak var thumbnailBorderView: UIView!
    @IBOutlet private weak var thumbnailImageView: UIImageView!
    @IBOutlet private weak var nameLabel: UILabel!

    override func awakeFromNib() {
        super.awakeFromNib()

        thumbnailBorderView.layer.cornerRadius = 45
        thumbnailBorderView.layer.masksToBounds = true

        thumbnailImageView.layer.cornerRadius = 41
        thumbnailImageView.layer.masksToBounds = true
    }

    func setTeacher(_ teacher: Teacher) {
        nameLabel.text = teacher.name
        thumbnailImageView.image = UIImage(named: teacher.imageName)
    }
}

2. Teacher.swift

struct Teacher: Decodable {
    let name: String
    let house: House
    let imageName: String
    let startingYear: Int
    let endingYear: Int
}

3. House.swift

enum House: String, Decodable {
    case gryffindor
    case slytherin
    case ravenclaw
    case hufflepuff

    var name: String {
        switch self {
        case .gryffindor:
            return "Gryffindor"
        case .slytherin:
            return "Slytherin"
        case .ravenclaw:
            return "Ravenclaw"
        case .hufflepuff:
            return "Hufflepuff"
        }
    }
}

4. TeachersTableViewController.swift

import UIKit

final class TeachersTableViewController: UITableViewController {
  private lazy var teachers: [Teacher] = {
    guard
      let fileURL = Bundle.main.url(forResource: "teachers", withExtension: "json"),
      let data = try? Data(contentsOf: fileURL)
      else {
        print("Failed to read teachers file")
        return []
    }

    return (try? JSONDecoder().decode([Teacher].self, from: data)) ?? []
  }()

  // MARK: - Table view data source

  override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    teachers.count
  }

  override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    guard let cell = tableView.dequeueReusableCell(
      withIdentifier: "TeacherCell",
      for: indexPath) as? TeacherTableViewCell
      else {
        print("This type of cell is not defined")
        return UITableViewCell()
    }

    cell.setTeacher(teachers[indexPath.row])

    return cell
  }

  // MARK: - Navigation

  @IBSegueAction func showDetail(_ coder: NSCoder, sender: Any?) -> UIViewController? {
    guard
      let cell = sender as? TeacherTableViewCell,
      let indexPath = tableView.indexPath(for: cell)
      else {
        return nil
    }

    tableView.deselectRow(at: indexPath, animated: true)

    return TeacherDetailViewController(coder: coder, teacher: teachers[indexPath.row])
  }
}

5. TeacherDetailViewController.swift

import UIKit

final class TeacherDetailViewController: UIViewController {
    private let teacher: Teacher

    @IBOutlet private weak var headerBackgroundView: UIView!
    @IBOutlet private weak var imageView: UIImageView! {
        didSet {
            imageView.layer.cornerRadius = 64
            imageView.layer.masksToBounds = true
        }
    }
    @IBOutlet private weak var nameLabel: UILabel!
    @IBOutlet private weak var houseImageView: UIImageView!
    @IBOutlet private weak var houseLabel: UILabel!
    @IBOutlet private weak var yearsAtHogwartsLabel: UILabel!

    init?(coder: NSCoder, teacher: Teacher) {
        self.teacher = teacher
        super.init(coder: coder)
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func viewDidLoad() {
        super.viewDidLoad()

        imageView.image = UIImage(named: teacher.imageName)
        nameLabel.text = teacher.name
        yearsAtHogwartsLabel.text = "\(teacher.startingYear)-\(teacher.endingYear)"
        houseLabel.text = teacher.house.name

    headerBackgroundView.backgroundColor =
      UIColor { traitCollection -> UIColor in //1
        switch traitCollection.userInterfaceStyle { //2
        case .dark:
          return UIColor(white: 0.3, alpha: 1.0) //3
        default:
          return UIColor(white: 0.7, alpha: 1.0) //4
        }
      }

        switch teacher.house {
        case .gryffindor:
            houseLabel.textColor = .systemRed
        case .hufflepuff:
            houseLabel.textColor = .systemYellow
        case .ravenclaw:
            houseLabel.textColor = .systemBlue
        case .slytherin:
            houseLabel.textColor = .systemGreen
        }

    houseImageView.tintColor = houseLabel.textColor
    houseImageView.image = UIImage(systemName: "house.fill")
    }
}

后记

本篇主要讲述了支持DarkMode的简单实用示例，感兴趣的给个赞或者关注~~~