版本記錄

前言

quartz是一個(gè)通用的術(shù)語(yǔ)躬窜，用于描述在iOS和MAC OS X 中整個(gè)媒體層用到的多種技術(shù) 包括圖形羹幸、動(dòng)畫(huà)、音頻、適配翻擒。Quart 2D 是一組二維繪圖和渲染API宠进，Core Graphic會(huì)使用到這組API可训，Quartz Core專指Core Animation用到的動(dòng)畫(huà)相關(guān)的庫(kù)淤堵、API和類。CoreGraphics 是UIKit下的主要繪圖系統(tǒng)柬批，頻繁的用于繪制自定義視圖啸澡。Core Graphics是高度集成于UIView和其他UIKit部分的。Core Graphics數(shù)據(jù)結(jié)構(gòu)和函數(shù)可以通過(guò)前綴CG來(lái)識(shí)別氮帐。在app中很多時(shí)候繪圖等操作我們要利用CoreGraphic框架嗅虏，它能繪制字符串、圖形上沐、漸變色等等皮服，是一個(gè)很強(qiáng)大的工具。感興趣的可以看我另外幾篇参咙。
1. CoreGraphic框架解析（一）—— 基本概覽
2. CoreGraphic框架解析（二）—— 基本使用
3. CoreGraphic框架解析（三）—— 類波浪線的實(shí)現(xiàn)
4. CoreGraphic框架解析（四）—— 基本架構(gòu)補(bǔ)充
5. CoreGraphic框架解析 （五）—— 基于CoreGraphic的一個(gè)簡(jiǎn)單繪制示例 （一）
6. CoreGraphic框架解析 （六）—— 基于CoreGraphic的一個(gè)簡(jiǎn)單繪制示例 （二）
7. CoreGraphic框架解析 （七）—— 基于CoreGraphic的一個(gè)簡(jiǎn)單繪制示例 （三）
8. CoreGraphic框架解析 （八）—— 基于CoreGraphic的一個(gè)簡(jiǎn)單繪制示例 （四）
9. CoreGraphic框架解析 （九）—— 一個(gè)簡(jiǎn)單小游戲 （一）
10. CoreGraphic框架解析 （十）—— 一個(gè)簡(jiǎn)單小游戲 （二）
11. CoreGraphic框架解析 （十一）—— 一個(gè)簡(jiǎn)單小游戲 （三）
12. CoreGraphic框架解析 （十二）—— Shadows 和 Gloss （一）

源碼

1. Swift

首先看下工程組織結(jié)構(gòu)

看一下sb中的內(nèi)容

下面就是源碼了

1. CoolTableViewController.swift

import UIKit

class CoolTableViewController: UITableViewController {
  let thingsToLearn = ["Drawing Rects", "Drawing Gradients", "Drawing Arcs"]
  let thingsLearned = ["Table Views", "UIKit", "Swift"]

  override func numberOfSections(in tableView: UITableView) -> Int {
    return 2
  }
  
  override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return section == 0 ? thingsToLearn.count : thingsLearned.count
  }
  
  override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
    
    if cell.backgroundView?.isKind(of: CustomCellBackground.self) != true {
      cell.backgroundView = CustomCellBackground()
    }
    
    if cell.selectedBackgroundView?.isKind(of: CustomCellBackground.self) != true {
      cell.selectedBackgroundView = CustomCellBackground()
    }
    
    cell.textLabel?.text = indexPath.section == 0 ? thingsToLearn[indexPath.row] : thingsLearned[indexPath.row]
    
    return cell
  }
  
  override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
    return 50
  }
  
  override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    guard let customHeaderView = CustomHeader.loadViewFromNib() else {
      return nil
    }

    customHeaderView.titleLabel.text = self.tableView(tableView, titleForHeaderInSection: section)
    
    if section == 1 {
      customHeaderView.lightColor = UIColor(red: 147/255.0, green: 105/255.0, blue: 216/255.0, alpha: 1)
      customHeaderView.darkColor = UIColor(red: 72/255.0, green: 22/255.0, blue: 137/255.0, alpha: 1)
    }
    
    return customHeaderView
  }
  
  override func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
    return section == 0 ? "Things We'll Learn" : "Things Already Covered"
  }
}

2. CustomCellBackground.swift

import UIKit

class CustomCellBackground: UIView {
  let lightGrayColor = UIColor(red: 230/255.0, green: 230/255.0, blue: 230/255.0, alpha: 1)
  let separatorColor = UIColor(red: 208/255.0, green: 208/255.0, blue: 208/255.0, alpha: 1)
  
  override func draw(_ rect: CGRect) {
    let context = UIGraphicsGetCurrentContext()!
    
    context.drawLinearGradient(rect: bounds, startColor: UIColor.white, endColor: lightGrayColor)
    
    var strokeRect = bounds
    context.setStrokeColor(UIColor.white.cgColor)
    context.setLineWidth(1)
    strokeRect.size.height -= 1
    context.stroke(strokeRect.rectFor1PxStroke())
    
    let startPoint = CGPoint(x: bounds.origin.x, y: bounds.origin.y + bounds.size.height - 1)
    let endPoint = CGPoint(x: bounds.origin.x + bounds.width - 1, y: bounds.origin.y + bounds.size.height - 1)
    
    context.draw1PxStroke(startPoint: startPoint, endPoint: endPoint, color: separatorColor)
  }
}

3. CustomHeader.swift

import UIKit

class CustomHeader: UIView {
  @IBOutlet public var titleLabel: UILabel!
  var lightColor = UIColor(red: 105/255.0, green: 179/255.0, blue: 216/255.0, alpha: 1)
  var darkColor = UIColor(red: 21/255.0, green: 92/255.0, blue: 136/255.0, alpha: 1)
  
  @IBInspectable var coloredBoxHeight: CGFloat = 40
  
  class func loadViewFromNib() -> CustomHeader? {
    let bundle = Bundle.main
    let nib = UINib(nibName: "CustomHeader", bundle: bundle)
    guard
      let view = nib.instantiate(withOwner: CustomHeader())
        .first as? CustomHeader
      else {
        return nil
    }
    
    return view
  }
  
  override func draw(_ rect: CGRect) {
    // Drawing code
    var coloredBoxRect = bounds
    coloredBoxRect.size.height = coloredBoxHeight
    
    var paperRect = bounds
    paperRect.origin.y += coloredBoxHeight
    paperRect.size.height = bounds.height - coloredBoxHeight
    
    let context = UIGraphicsGetCurrentContext()!
    
//    context.setFillColor(UIColor.red.cgColor)
//    context.fill(coloredBoxRect)
//    
//    context.setFillColor(UIColor.green.cgColor)
//    context.fill(paperRect)
    
    let shadowColor = UIColor(red: 0.2, green: 0.2, blue: 0.2, alpha: 0.5)
    
    context.saveGState()
    context.setShadow(offset: CGSize(width: 0, height: 2), blur: 3.0, color: shadowColor.cgColor)
    context.setFillColor(lightColor.cgColor)
    context.fill(coloredBoxRect)
    context.restoreGState()
    
    context.drawGlossAndGradient(rect: coloredBoxRect, startColor: lightColor, endColor: darkColor)
    context.setStrokeColor(darkColor.cgColor)
    context.setLineWidth(1)
    context.stroke(coloredBoxRect.rectFor1PxStroke())
  }
}

4. Extensions.swift

import UIKit

extension CGContext {
  func drawLinearGradient(rect: CGRect, startColor: UIColor, endColor: UIColor) {
    let gradient = CGGradient(colorsSpace: nil, colors: [startColor.cgColor, endColor.cgColor] as CFArray, locations: [0, 1])!
    
    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: [])
    
    restoreGState()
  }
  
  func draw1PxStroke(startPoint: CGPoint, endPoint: CGPoint, color: UIColor) {
    saveGState()
    setLineCap(.square)
    setStrokeColor(color.cgColor)
    setLineWidth(1)
    move(to: startPoint+0.5)
    addLine(to: endPoint)
    strokePath()
    restoreGState()
  }
  
  func drawGlossAndGradient(rect: CGRect, startColor: UIColor, endColor: UIColor) {
    drawLinearGradient(rect: rect, startColor: startColor, endColor: endColor)
    
    let glossColor1 = UIColor.white.withAlphaComponent(0.35)
    let glossColor2 = UIColor.white.withAlphaComponent(0.1)
    
    var topHalf = rect
    topHalf.size.height /= 2
    
    drawLinearGradient(rect: topHalf, startColor: glossColor1, endColor: glossColor2)
  }
}

extension CGRect {
  func rectFor1PxStroke() -> CGRect {
    return CGRect(x: origin.x + 0.5, y: origin.y + 0.5, width: size.width - 1, height: size.height - 1)
  }
}


extension CGPoint {
  static func +(left: CGPoint, right: CGFloat) -> CGPoint {
    return CGPoint(x: left.x + right, y: left.y + right)
  }
}

后記

本篇主要講述了Shadows 和 Gloss龄广，感興趣的給個(gè)贊或者關(guān)注~~~