版本记录
| 版本号 | 时间 |
|---|---|
| V1.0 | 2019.02.12 星期二 |
前言
quartz是一个通用的术语，用于描述在iOS和MAC OS X中整个媒体层用到的多种技术 包括图形、动画、音频、适配。Quart 2D是一组二维绘图和渲染API，Core Graphic会使用到这组API，Quartz Core专指Core Animation用到的动画相关的库、API和类。CoreGraphics是UIKit下的主要绘图系统，频繁的用于绘制自定义视图。Core Graphics是高度集成于UIView和其他UIKit部分的。Core Graphics数据结构和函数可以通过前缀CG来识别。在app中很多时候绘图等操作我们要利用CoreGraphic框架，它能绘制字符串、图形、渐变色等等，是一个很强大的工具。感兴趣的可以看我另外几篇。
1. CoreGraphic框架解析（一）—— 基本概览
2. CoreGraphic框架解析（二）—— 基本使用
3. CoreGraphic框架解析（三）—— 类波浪线的实现
4. CoreGraphic框架解析（四）—— 基本架构补充
5. CoreGraphic框架解析 （五）—— 基于CoreGraphic的一个简单绘制示例 （一）
6. CoreGraphic框架解析 （六）—— 基于CoreGraphic的一个简单绘制示例 （二）
7. CoreGraphic框架解析 （七）—— 基于CoreGraphic的一个简单绘制示例 （三）
8. CoreGraphic框架解析 （八）—— 基于CoreGraphic的一个简单绘制示例 （四）
9. CoreGraphic框架解析 （九）—— 一个简单小游戏 （一）
10. CoreGraphic框架解析 （十）—— 一个简单小游戏 （二）
11. CoreGraphic框架解析 （十一）—— 一个简单小游戏 （三）
12. CoreGraphic框架解析 （十二）—— Shadows 和 Gloss （一）
13. CoreGraphic框架解析 （十三）—— Shadows 和 Gloss （二）
14. CoreGraphic框架解析 （十四）—— Arcs 和 Paths （一）
15. CoreGraphic框架解析 （十五）—— Arcs 和 Paths （二）
16. CoreGraphic框架解析 （十六）—— Lines, Rectangles 和 Gradients （一）
源码
1. Swift
首先看下工程组织结构
接着看下sb中的内容
下面就是看源码了。
1. AppDelegate.swift
import UIKit
@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate, UISplitViewControllerDelegate {
var window: UIWindow?
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
let splitViewController = window!.rootViewController as! UISplitViewController
let navigationController = splitViewController.viewControllers[splitViewController.viewControllers.count-1] as! UINavigationController
navigationController.topViewController!.navigationItem.leftBarButtonItem = splitViewController.displayModeButtonItem
splitViewController.delegate = self
// Theming
UINavigationBar.appearance().tintColor = .starwarsYellow
UINavigationBar.appearance().barTintColor = .starwarsSpaceBlue
UINavigationBar.appearance().titleTextAttributes = [.foregroundColor: UIColor.starwarsStarshipGrey]
return true
}
// MARK: - Split view
func splitViewController(_ splitViewController: UISplitViewController, collapseSecondary secondaryViewController:UIViewController, onto primaryViewController:UIViewController) -> Bool {
guard let secondaryAsNavController = secondaryViewController as? UINavigationController else { return false }
guard let topAsDetailController = secondaryAsNavController.topViewController as? DetailViewController else { return false }
if topAsDetailController.starshipItem == nil {
// Return true to indicate that we have handled the collapse by doing nothing; the secondary controller will be discarded.
return true
}
return false
}
}
2. CGContextExtensions.swift
import UIKit
extension CGContext {
func drawLinearGradient(
in rect: CGRect,
startingWith startColor: CGColor,
finishingWith endColor: CGColor
) {
let colorSpace = CGColorSpaceCreateDeviceRGB()
let locations = [0.0, 1.0] as [CGFloat]
let colors = [startColor, endColor] as CFArray
guard let gradient = CGGradient(
colorsSpace: colorSpace,
colors: colors,
locations: locations
) else {
return
}
let startPoint = CGPoint(x: rect.midX, y: rect.minY)
let endPoint = CGPoint(x: rect.midX, y: rect.maxY)
saveGState()
addRect(rect)
clip()
drawLinearGradient(
gradient,
start: startPoint,
end: endPoint,
options: CGGradientDrawingOptions()
)
restoreGState()
}
}
3. DetailViewController.swift
import UIKit
enum FieldsToDisplay: String, CaseIterable {
case image = "Image"
case model = "Model"
case starshipClass = "Class"
case costInCredits = "Cost in Credits"
case cargoCapacity = "Cargo Capacity"
case MGLT = "Speed"
case maxAtmospheringSpeed = "Max Atmosphering Speed"
case length = "Length"
}
class DetailViewController: UITableViewController {
let numberOfFields = FieldsToDisplay.allCases.count
let numberFormatter = NumberFormatter()
lazy var imageFetcher = StarshipImageFetcher()
var starshipImage = UIImage(named: "image_not_found.png")
var starshipItem: Starship? {
didSet {
starshipImage = imageFetcher.imageForStarship(named: starshipItem!.name)
tableView.reloadData()
}
}
override func viewDidLoad() {
super.viewDidLoad()
numberFormatter.minimumFractionDigits = 2
numberFormatter.roundingMode = .halfDown
tableView.rowHeight = UITableView.automaticDimension
tableView.estimatedRowHeight = 375
}
// MARK: - UITableViewDataSource
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return numberOfFields
}
override func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
if section == 0 {
return starshipItem?.name
} else {
return ""
}
}
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
if indexPath.row == 0 {
// The first item is the image, which should be treated differently
let cell = tableView.dequeueReusableCell(withIdentifier: "ImageCell", for: indexPath) as! StarshipImageCell
cell.starshipImageView.image = starshipImage
return cell
} else {
let cell = tableView.dequeueReusableCell(withIdentifier: "FieldCell", for: indexPath)
switch indexPath.row {
case 1:
cell.textLabel!.text = FieldsToDisplay.model.rawValue
cell.detailTextLabel!.text = starshipItem?.model
case 2:
cell.textLabel!.text = FieldsToDisplay.starshipClass.rawValue
cell.detailTextLabel!.text = starshipItem?.starshipClass
case 3:
cell.textLabel!.text = FieldsToDisplay.costInCredits.rawValue
if let cost = starshipItem?.costInCredits,
let costStr = numberFormatter.string(from: NSNumber(value: cost)) {
cell.detailTextLabel!.text = "\(costStr)"
} else {
cell.detailTextLabel!.text = "Unknown"
}
case 4:
cell.textLabel!.text = FieldsToDisplay.cargoCapacity.rawValue
if let cargoCapacity = starshipItem?.cargoCapacity,
let cargoCapacityStr = numberFormatter.string(from: NSNumber(value: cargoCapacity)) {
cell.detailTextLabel!.text = "\(cargoCapacityStr) kg"
} else {
cell.detailTextLabel!.text = "Unknown"
}
case 5:
cell.textLabel!.text = FieldsToDisplay.MGLT.rawValue
if let MGLT = starshipItem?.MGLT {
cell.detailTextLabel!.text = "\(MGLT) megalights"
} else {
cell.detailTextLabel!.text = "Unknown"
}
case 6:
cell.textLabel!.text = FieldsToDisplay.maxAtmospheringSpeed.rawValue
if let maxAtmospheringSpeed = starshipItem?.maxAtmospheringSpeed {
cell.detailTextLabel!.text = "\(maxAtmospheringSpeed)"
} else {
cell.detailTextLabel!.text = "Not Applicable"
}
case 7:
cell.textLabel!.text = FieldsToDisplay.length.rawValue
if let length = starshipItem?.length,
let lengthStr = numberFormatter.string(from: NSNumber(value: length)) {
cell.detailTextLabel!.text = "\(lengthStr)"
} else {
cell.detailTextLabel!.text = "Unknown"
}
default:
print("Warning! Unexpected row number: \(indexPath.row)")
}
cell.textLabel!.textColor = .starwarsStarshipGrey
cell.detailTextLabel!.textColor = .starwarsYellow
return cell
}
}
override func tableView(
_ tableView: UITableView,
willDisplayHeaderView view: UIView,
forSection section: Int
) {
view.tintColor = .starwarsYellow
if let header = view as? UITableViewHeaderFooterView {
header.textLabel?.textColor = .starwarsSpaceBlue
}
}
// MARK: - UITableViewDelegate
override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
if indexPath.row == 0 {
let widthOfTableView = self.tableView!.frame.width
let widthOfImage = starshipImage!.size.width
let scaleFactor = widthOfTableView / widthOfImage
return starshipImage!.size.height * scaleFactor
} else {
return 44.0
}
}
}
class StarshipImageCell: UITableViewCell {
@IBOutlet weak var starshipImageView: UIImageView!
}
4. MasterViewController.swift
import UIKit
class MasterViewController: UITableViewController {
var detailViewController: DetailViewController?
var starships: [Starship] = []
lazy var dataProvider = StarshipDataProvider()
override func viewDidLoad() {
super.viewDidLoad()
if let split = splitViewController {
let controllers = split.viewControllers
detailViewController = (controllers[controllers.count-1] as! UINavigationController).topViewController as? DetailViewController
}
tableView.backgroundColor = .starwarsSpaceBlue
}
override func viewWillAppear(_ animated: Bool) {
reloadData()
clearsSelectionOnViewWillAppear = splitViewController!.isCollapsed
super.viewWillAppear(animated)
}
func reloadData() {
starships = dataProvider.fetchAll()
tableView.reloadData()
}
// MARK: - Segues
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
if segue.identifier != "showDetail" {
return
}
if let indexPath = tableView.indexPathForSelectedRow {
let starship = starships[indexPath.row]
let controller = (segue.destination as! UINavigationController).topViewController as! DetailViewController
controller.starshipItem = starship
controller.navigationItem.leftBarButtonItem = splitViewController?.displayModeButtonItem
controller.navigationItem.leftItemsSupplementBackButton = true
}
}
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return starships.count
}
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
if (
cell.backgroundView == nil ||
!(cell.backgroundView is StarshipsListCellBackground)
) {
cell.backgroundView = StarshipsListCellBackground()
}
if (
cell.selectedBackgroundView == nil ||
!(cell.selectedBackgroundView is StarshipsListCellBackground)
) {
cell.selectedBackgroundView = StarshipsListCellBackground()
}
let starship = starships[indexPath.row]
cell.textLabel!.text = starship.name
cell.textLabel!.textColor = .starwarsStarshipGrey
return cell
}
override func tableView(_ tableView: UITableView, canEditRowAt indexPath: IndexPath) -> Bool {
return false
}
}
5. Starship.swift
import Foundation
struct Starship: Decodable {
let name: String
let model: String
let starshipClass: String
let costInCredits: Float!
let cargoCapacity: Float!
let MGLT: Int!
let maxAtmospheringSpeed: Int!
let length: Float
}
struct Node: Decodable {
let starship: Starship
enum CodingKeys: String, CodingKey {
case starship = "node"
}
}
struct AllStarships: Decodable {
let starships: [Node]
enum CodingKeys: String, CodingKey {
case starships = "allStarships"
}
}
6. StarshipDataProvider.swift
import Foundation
// The data stored in Starship.json is a lightly modified response from the Star Wars API example from GraphQL - https://graphql.org/swapi-graphql
// Full query: https://goo.gl/ngGGFA
class StarshipDataProvider {
func fetchAll() -> [Starship] {
let url = Bundle.main.url(forResource: "Starships", withExtension: "json")!
do {
let data = try Data(contentsOf: url)
let allStarships = try JSONDecoder().decode(AllStarships.self, from: data)
return allStarships.starships.map { $0.starship }
}
catch {
print("Could not decode starship data from JSON")
print(error)
return []
}
}
}
7. StarshipImageFetcher.swift
import UIKit
class StarshipImageFetcher {
func imageForStarship(named name: String) -> UIImage? {
let imageName = name.lowercased().replacingOccurrences(of: " ", with: "_")
if let image = UIImage(named: "\(imageName).png") {
return image
} else {
return UIImage(named: "image_not_found.png")
}
}
}
8. StarshipsListCellBackground.swift
import UIKit
class StarshipsListCellBackground: UIView {
override func draw(_ rect: CGRect) {
guard let context = UIGraphicsGetCurrentContext() else {
return
}
let backgroundRect = bounds
context.drawLinearGradient(
in: backgroundRect,
startingWith: UIColor.starwarsSpaceBlue.cgColor,
finishingWith: UIColor.black.cgColor
)
let strokeRect = backgroundRect.insetBy(dx: 4.5, dy: 4.5)
context.setStrokeColor(UIColor.starwarsYellow.cgColor)
context.setLineWidth(1)
context.stroke(strokeRect)
}
}
9. StarshipTableView.swift
import UIKit
class StarshipTableView: UITableView {
override func draw(_ rect: CGRect) {
guard let context = UIGraphicsGetCurrentContext() else {
return
}
let backgroundRect = self.bounds
context.drawLinearGradient(
in: backgroundRect,
startingWith: UIColor.starwarsSpaceBlue.cgColor,
finishingWith: UIColor.black.cgColor
)
}
}
10. UIColorExtensions.swift
import UIKit
extension UIColor {
public static let starwarsYellow =
UIColor(red: 250/255, green: 202/255, blue: 56/255, alpha: 1.0)
public static let starwarsSpaceBlue =
UIColor(red: 5/255, green: 10/255, blue: 85/255, alpha: 1.0)
public static let starwarsStarshipGrey =
UIColor(red: 159/255, green: 150/255, blue: 135/255, alpha: 1.0)
}
11. YellowSplitterTableViewCell.swift
import UIKit
class YellowSplitterTableViewCell: UITableViewCell {
override func draw(_ rect: CGRect) {
guard let context = UIGraphicsGetCurrentContext() else {
return
}
let y = bounds.maxY - 0.5
let minX = bounds.minX
let maxX = bounds.maxX
// Draw the line
context.setStrokeColor(UIColor.starwarsYellow.cgColor)
context.setLineWidth(1.0)
context.move(to: CGPoint(x: minX, y: y))
context.addLine(to: CGPoint(x: maxX, y: y))
context.strokePath()
}
}
后记
本篇主要讲述了Lines, Rectangles 和 Gradients，感兴趣的给个赞或者关注~~~
