DEV Community: Arco

Using Swift Packager Manager for Xcode 11

Arco — Sun, 13 Oct 2019 07:37:21 +0000

一直以來，我都很想嘗試在 iOS 開發中使用 Swift Package Manager，現在在 Xcode 11 中這個願望實現了。

同時，將 App 中的代碼按照職責與依賴的關係分離，可以讓整個 App 的框架層級以一個清晰的方式呈現出來，也會利於我們去寫 unit tests。我也會在以下內容中說明和解釋這個。

為什麼不使用 CocoaPods 或 Carthage

CocoaPods 是幾乎每一個 iOS 開發都會入門使用的第三方包管理系統，它對於我們進行整合 remote (like Github) 中的框架非常方便。

不過，寫一個簡單的本地 pod 並不是一件特別容易的事情，你需要學會一些 Ruby 語法和 podspec 的說明才能很好完成這個任務。

Carthage 使用者也許並沒有很多，但它對於加快 App build 速度有些良好的表現。我在過去使用時與 Xcode project 整合需要很多人工的方式來處理，不過現在它的發展怎麼樣了，我就不做其他評論。

為什麼不使用建立 Local Framework 來處理

在我一開始實驗時，我也確實是使用 local framework 來分離與組織代碼。

它一開始易於幫助你簡單分離 App 內部的複雜邏輯，而缺點在於每當你修改一個 framework 邏輯，你就必須重新 build 它一次。如果 framework 之間還有依賴關於，你還得依據它們之間的關於按照順序一個一個 build 起來。

另外，一旦你想切換不同的 device，如從真機和模擬器中切換，你也需要重頭按照 frameworks 之間的依賴關係一個一個 build 過去，這對我來說有一點煩人，這也是這篇文章會出現的一個原因。

我也有嘗試從 xcbuild 中找到一點解決方式，不過並沒有很順利，如果你們有遇到類似的問題且有良好的解決手段，歡迎和我交流聯繫。

Get Started

我會寫一些演示代碼，你可以按照下面的步驟重現出來。

你也可以在 https://github.com/Arcovv/SPMSample 中找到最終成果。

以下版本是建立在 Xcode 11.1(11A1027) 中，如果在其他版本有其他出路麻煩自行處理。

首先建立一個空白專案，命名為 SPMExample，無論你選擇 SwiftUI 或者 Storyboard 都可以，不過我們還是拿 ViewController 簡單操作比較快一點，所以選擇 Storyboard。

在這篇文章中，我們會簡單建立一個 Utility framework，一個 Model framework，以及將他們與協作至 App 中。

Implement ViewController

一直以來我都喜歡研究著函數式，所以我們也來寫一個簡單的函數，用於檢查 optional 是否為 nil，如果是就傳出設定的默認值，否則就傳出 unwrapped 值。

新建一個 Swift File 並命名為 Optional+Extension 並寫下：

func coalesce<T>(_ default: T) -> (T?) -> T {
  return { maybe in
    maybe ?? `default`
  }
}

以及一個新的文件命名為 Dog，裡面有一個 Dog struct 與 DogFactory：

struct Dog {
  let name: String
  let age: Int

  static let sample = Dog(name: "Bill", age: 10)
}

final class DogFactory {
  var timer: Timer!
  var generateCallback: ((Dog) -> Void)?

  deinit {
    self.timer.invalidate()
    self.timer = nil
  }

  init() {
    self.timer = Timer.scheduledTimer(withTimeInterval: 1, repeats: true) { [weak self] _ in
      self?.generateCallback?(.sample)
    }
    self.timer.fire()
  }
}

然後在 ViewController 中寫道：

import UIKit

class ViewController: UIViewController {
  var dogFactory: DogFactory?

  override func viewDidLoad() {
    super.viewDidLoad()

    self.dogFactory = coalesce(.init())(self.dogFactory)
    self.dogFactory?.generateCallback = { dog in
      print("Generate \(dog)")
    }
  }
}

當然你想寫成 self.dogFactory = self.dogFactory ?? .init() 也可以，不過有時我並不太喜歡 ??。

嘗試 run 一下結果你就會發現 console 中會不斷 print 出 simple dog 的資料。

Import Utility

由於 coalesce(_:) 是一級函數，也許會和我們的 App 其中的函數名發生衝突，當然有時候我們也可以使用函數重載技術來解決這個問題，不過有時候 Swift Type System 依舊沒有辦法很好判斷當前應該是什麼函數。

選擇 File - Net - Swift Package… 並命名為 Utility，儲存在和 App 同層級的文件夾中：

然後拉進我們的專案中，並放在 SPMExample xcodeproj 的上方：

Xcode 會詢問你要不要新建一個 workspace，我們選擇 Save：

這樣 framework 的分離雛形就逐漸形成了。

將 Optional+Extension 文件移動到 Utility - Sources - Utility 底下，並刪除掉原來的 Utility.swift：

嘗試寫下 import Utility 會發現 Xcode 報錯說沒有這個 module，這是因為我們還沒有這個框架和 App 接起來。

No such module ‘Utility’

進入以下區域並按下 + 選擇 Utility 並 Add 進來，然後執行 build。

你會發現 Xcode 不再提示找不到這個 module 而是換了一個 Error 提示。

Use of unresolved identifier ‘coalesce’

這是因為 coalesce(_:) 函數的訪問權限是 internal 的，我們回到 Optional+Extension 中，將它加上 public 的前綴字：

public func coalesce<T>(_ default: T) -> (T?) -> T {
  return { maybe in
    maybe ?? `default`
  }
}

好了你再 build 一次，會發現世界沒有了錯誤，我們已經成功取得 Utility 中的函數了！

另外這裡我也想讓 Dog.swift 中也和 Utility 有依賴性關係，所以改了一下 DogFactory，算一個不是太恰當的例子：

final class DogFactory {
  var timer: Timer!
  var generateCallback: ((Dog) -> Void)?

  deinit {
    self.timer.invalidate()
    self.timer = nil
  }

  init() {
    self.timer = coalesce(getTimer())(self.timer)
    self.timer.fire()
  }

  func getTimer() -> Timer {
    Timer.scheduledTimer(withTimeInterval: 1, repeats: true) { [weak self] _ in
      self?.generateCallback?(.sample)
    }
  }
}

Import Model

我們如法炮製，也建立一個 Model Framework，一樣是新建一個 Swift Package，結果如下：

然後也將 Dog.swift 移動到 Sources/Model 底下，build 之後會發現 Xcode 發出的 Error 提示：

No such module ‘Utility’

這裡我們的 Model framework 就和 Utility framework 發生依賴性關係了。

找到 Model framework 底下的 Package.swift，將內容修改為：

// swift-tools-version:5.1
// The swift-tools-version declares the minimum version of Swift required to build this package.

import PackageDescription

let package = Package(
  name: "Model",
  platforms: [
    .iOS(.v11) // 1
  ],
  products: [
    .library(
      name: "Model",
      targets: ["Model"]),
  ],
  dependencies: [
    .package(path: "../Utility") // 2
  ],
  targets: [
    .target(
      name: "Model",
      dependencies: ["Utility"]), // 3
    .testTarget(
      name: "ModelTests",
      dependencies: ["Model"]),
  ]
)

About // 1

由於 Timer.scheduledTimer(withTimeInterval:repeats:block:) 是 iOS 10 以上的 API，而 Package 默認的最低版本是 iOS 8，於是我們就簡單寫一下說明這個 Package 最低要求 iOS 11 以上。

About // 2

這裡我們說明了這個 Package 需要的依賴框架是什麼以及在哪裡，最後也需要在 // 3 寫上對於的依賴框架名稱。

重新再 build 之後，會發現 DogFactory 找不到，也是同樣的訪問權限問題，將 Dog.swift 修改成如下：

import Foundation
import Utility

public struct Dog {
  public let name: String
  public let age: Int

  public static let sample = Dog(name: "Bill", age: 10)
}

public final class DogFactory {
  var timer: Timer!
  public var generateCallback: ((Dog) -> Void)?

  deinit {
    self.timer.invalidate()
    self.timer = nil
  }

  public init() {
    self.timer = coalesce(getTimer())(self.timer)
    self.timer.fire()
  }

  func getTimer() -> Timer {
    Timer.scheduledTimer(withTimeInterval: 1, repeats: true) { [weak self] _ in
      self?.generateCallback?(.sample)
    }
  }
}

現在再重新 build 一次 App，會發現沒有其他問題啦。

Test Utility Framework

對於一個良好的工具類框架，有完整的 Unit Test 才能說明這個框架的強壯，我們也來為 coalesce(_:) 寫一些測試吧。

打開 Utility / Tests / UtilityTests / UtilityTests.swift，改成如下內容：

import XCTest
@testable import Utility

final class UtilityTests: XCTestCase {
  func testUseCoalesceDefaultValue() {
    let target: Int? = nil
    let result = coalesce(1)(target)
    XCTAssertNotNil(result)
  }

  func testNotUseCoalesceDefaultValue() {
    let target: Int? = 3
    let result = coalesce(1)(target)
    XCTAssertEqual(target, result)
  }
}

將 Target 切換成 Utility 然後開始測試，OK 函數並沒有問題。

同樣你也可以使用 Terminal 來測試這個 package。在 Utility 目錄下，執行 swift test 即可。

$ swift test
[6/6] Linking UtilityPackageTests
Test Suite 'All tests' started at 2019-10-13 12:19:02.874
Test Suite 'UtilityPackageTests.xctest' started at 2019-10-13 12:19:02.875
Test Suite 'UtilityTests' started at 2019-10-13 12:19:02.875
Test Case '-[UtilityTests.UtilityTests testNotUseCoalesceDefaultValue]' started.
Test Case '-[UtilityTests.UtilityTests testNotUseCoalesceDefaultValue]' passed (0.261 seconds).
Test Case '-[UtilityTests.UtilityTests testUseCoalesceDefaultValue]' started.
Test Case '-[UtilityTests.UtilityTests testUseCoalesceDefaultValue]' passed (0.001 seconds).
Test Suite 'UtilityTests' passed at 2019-10-13 12:19:03.137.
     Executed 2 tests, with 0 failures (0 unexpected) in 0.262 (0.262) seconds
Test Suite 'UtilityPackageTests.xctest' passed at 2019-10-13 12:19:03.137.
     Executed 2 tests, with 0 failures (0 unexpected) in 0.262 (0.262) seconds
Test Suite 'All tests' passed at 2019-10-13 12:19:03.137.
     Executed 2 tests, with 0 failures (0 unexpected) in 0.262 (0.263) seconds

Test Model Framework

我們也需要測試我們的 Model package，同樣打開 Model / Tests / ModelTests / ModelTests.swift，寫成如下內容：

import XCTest
@testable import Model

final class ModelTests: XCTestCase {
  func testDogModel() {
    let dog = Dog(name: "Jack", age: 8)
    XCTAssertEqual(dog.name, "Jack")
    XCTAssertEqual(dog.age, 8)
  }

  func testDogFactoryGenerate5DogCount() {
    var dogs = [Dog]()
    var index = 0
    let goalCount = 2

    let expect = expectation(description: #function)
    let factory = DogFactory()
    factory.generateCallback = { dog in
      dogs.append(dog)

      if index == goalCount - 1 {
        XCTAssertEqual(dogs.count, goalCount)
        expect.fulfill()
      }

      index += 1
    }

    wait(for: [expect], timeout: Double(goalCount))
  }
}

測試也沒問題，這樣我們就完成了 Unit Test。

Final

將 App 的組織架構拆分成多個，不僅是大公司需要做的事情，對於一些小的專案並維護，都是一件很好且輕鬆的作法。

這個我並沒有使用 Remote pods，我們其實也可以將我們分離出來的 package 放在如 Github 上面託管。如果我們要這樣做的事情，得為每一個託管在 Github 的 package 編著標註上 tag，這樣 Swift Package Manager 才能取得到 package 內容。

git init
git add .
git commit -m "First Inital"
git tag 1.0.0
git push <OriginalURL>

然後修改對應需要依賴的 package 內容：

// 從這個
.package(path: "Local Path")
// 改為
.package(url: "Original URL", from: 1.0.0)

這樣不論你的 package 你 local 的還是 remote 的，都能有效把你的 App 組織架構整理得很乾淨，也能讓你知道你的相關類（如 ViewModel）是否很好與 ViewController / Database / Network 等良好分離（如使用 Dependency Injection 技術）。

使用 TextKit 製作橫向滾動 Reader

Arco — Sun, 22 Sep 2019 03:47:09 +0000

今天想教大家使用 TextKit 製作一款橫向閱讀的 Reader。

Demo 預覽

什麼是 TextKit

TextKit 是一個管理文字儲存，以及執行以文字為基礎內容的自定義佈局的強大工具。這其中有四大類需要認識和掌握，分別是 NSTextStorage，NSLayoutManager ，NSTextContainer 以及平台對應的 TextView。

TextKit 框架的位置：

NSTextStorage

NSTextStorage 是 NSMutableAttributedString 的子類，這意味著你可以如同使用 NSAttributedString 一樣，增添和修改其中的樣式。同時，它也承擔著管理一系列 NSLayoutManager 的責任。

你可以通過 addLayoutManager(_:)，removeLayoutManager(_:) 來管理其持有的 NSLayoutManager。

最後要說明的是，NSTextStorage 可以被任何線程訪問，意味著你可以將相關的文字樣式處理放入背景或其他非主線程中。需要注意的是你必須確保每次只有一個線程正在訪問 NSTextStorage 對象。

NSLayoutManager

NSLayoutManager 對象是一個協調文字佈局以及呈現被 NSTextStorage 持有的字元（character）的物件。在其內部，是將 unicode character 映射（map）成字形（glyph），並設置給其持有的一系列 NSTextContainer 對象，最後再將他們呈現在相關的 TextView 上（在 MacOS 上為 NSTextView，在 iOS 上為 UITextView）。

你可以通過 addTextContainer(_:)，insertTextContainer(_:at:)，removeTextContainer(at:) 等方法來管理其持有的 NSTextStorage 對象。

NSTextContainer

NSTextContainer 會在被初始化時決定其大小（size），而這片區域（region）就是 text 如何被 layout 的地方。於是，NSLayoutManager 依據這片區域的大小，決定什麼時候需要換行（break lines），或佈局部分的 text。

基本上，NSTextContainer 所指定的區域是一個矩形，不過你也可以通過添加 exclusionPaths 來告訴 NSTextContainer 需要避開那些位置。

TextView

TextKit 中的 TextView，需要依據不同平台，來初始化不同的 view 來使用。在 MacOS 中，我們需要使用 NSTextView 來供 TextKit 呈現內容；而在 iOS 中使用 UITextView。

四者關係

在 Text Programming Guide 中有一張非常出名的圖用來表示四者關係：

在 code 中的呈現基本如下：

import UIKit

let textStorage = NSTextStorage(attributedString: attributedString)

let textLayout = NSLayoutManager()
textStorage.addLayoutManager(textLayout)

let textContainer = NSTextContainer(size: CGSize(width: 500, height: 500))
textLayout.addTextContainer(textContainer)

let textView = UITextView(
  frame: .init(x: 0, y: 0, width: 500, height: 500),
  textContainer: textContainer
)

PlaygroundPage.current.liveView = textView

Getting Started

在 Xcode 中新建一個專案，選擇 Single View App，命名為 Reader，Language 設定為 Swift，我們就可以開始了。

由於我們不使用 Storyboard，也請麻煩刪除掉 Main.storyboard 以及對應的 storyboard 初始化資料。另外也刪除掉 ViewController.swift，在做任何開發時，我們還是希望擁有一個好的命名習慣。

你的 Xcode Project 看起來基本上會像這樣：

右擊在 AppDelegate.swift 上，選擇 New File 並選擇 Swift File，命名為 ReaderViewController，並替換掉裡面的全部內容為以下 code：

import UIKit

final class ReaderViewController: UIViewController {

  override func viewDidLoad() {
    super.viewDidLoad()

    view.backgroundColor = .white
    navigationItem.title = "Reader"
  }

}

也替換掉 AppDelegate.swift 全部內容為下 code：

import UIKit

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

  var window: UIWindow?

  func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?)
    -> Bool
  {
    let readerViewControlelr = ReaderViewController()
    let navigationController = UINavigationController(rootViewController: readerViewControlelr)
    window = UIWindow(frame: UIScreen.main.bounds)
    window?.rootViewController = navigationController
    window?.makeKeyAndVisible()
    return true
  }

}

Import Large Text

這裡我準備了一些長文字內容，拖進專案後，在 ReaderViewController 增加如下方法：

private func fullContent() -> String {
    let url = Bundle.main.url(forResource: "Diamond Sutra", withExtension: "txt")!
    return try! String(contentsOf: url, encoding: .utf8)
}

你可以在 viewDidLoad() 中測試 print(fullContent().count) 是否會在 console 中印出對應數字，來檢測該函數是否正常運作。

PS: 如果你遇到 App 運行崩潰的情況，請前往 Project Navigator - Targets - Reader - Build Phases - Copy BundleResources 中檢查拖拽進來的檔案是否也呈現在其中，如果沒有就按下方的加號添加進去。

Setup Reader

在 ReaderViewController 中增加 let contentView = UIScrollView() ，這個 view 將被我們用來放置文字滾動的部分，同時追加 setupContentView() 的方法，用來設定我們的 contentView：

private func setupContentView() {
    contentView.backgroundColor = .orange
    contentView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(contentView)

    NSLayoutConstraint.activate([
      contentView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
      contentView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
      contentView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
      contentView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor)
    ])
}

運行完你應該會看到一個 orange 顏色的畫面：

記得將 setupContentView 在 viewDidLoad() 時執行。

隨後，追加 setupReader() 方法，開始建構我們的閱讀器吧：

private func setupReader() {
    // 1
    let attributedString = NSAttributedString(
      string: fullContent(), attributes: [:]
    )

    // 2
    let textStorage = NSTextStorage(attributedString: attributedString)

    // 3
    let textLayout = NSLayoutManager()
    textStorage.addLayoutManager(textLayout)

    // 4
    let textContainer = NSTextContainer(size: contentView.bounds.size)
    textLayout.addTextContainer(textContainer)

    // code here
}

第一步是建構一個 NSAttributedString，便於 NSTextStorage 初始化。因為我們已經寫好了 fullContent() 函數，可以直接調用並取得到我們想要填入的文字。attributes 是文字樣式的部分，這裡我們先不處理
建構我們的 NSTextStorage
建構我們的 NSLayoutManager，並把它加到 textStorage 中

然後開始處理我們的 TextView 部分，在 code here 中繼續寫入：

let viewSize = contentView.bounds.size
let textInsets = UIEdgeInsets(top: 16, left: 16, bottom: 16, right: 16)

// 1
var index: Int = 0
var glyphRange: Int = 0
var numberOfGlyphs: Int = 0

repeat {
  // 2
  let textContainer = NSTextContainer(size: viewSize)
  textLayout.addTextContainer(textContainer)

  // 3
  let textViewFrame = CGRect(
    x: CGFloat(index) * viewSize.width,
    y: 0,
    width: viewSize.width,
    height: viewSize.height
  )

  // 4
  let textView = UITextView(
    frame: textViewFrame,
    textContainer: textContainer
  )

  // 5
  textView.isEditable = false
  textView.isSelectable = false
  textView.textContainerInset = textInsets
  textView.showsVerticalScrollIndicator = false
  textView.showsHorizontalScrollIndicator = false
  textView.isScrollEnabled = false
  textView.bounces = false
  textView.bouncesZoom = false

  // 6
  textViews.append(textView)
  contentView.addSubview(textView)

  // 7
  index += 1
  glyphRange = NSMaxRange(textLayout.glyphRange(for: textContainer))
  numberOfGlyphs = textLayout.numberOfGlyphs
} while glyphRange < numberOfGlyphs - 1 // 8

這塊內容不少，但我們依舊可以慢慢來解釋：

在我們的 Demo 預覽中，閱讀器是可以橫向不斷滾動下去的，而每一個我們所見的 text 區域，其實就是由每一個 UITextView 所組成並呈現的，因此我們需要 repeat - while loop 來協助我們處理這件事情，而 index / glyphRange / numberOfGlyghs 會幫助我們處理 loop 的條件
建構我們的 NSTextContainer，並把它加到 textLayout 中
計算每一個 TextView 的座標
構造 UITextView，在這裡傳入我們的 textContainer
對 textView 做一點樣式上的調整，使其在滾動過程看起來更舒服
把每一個 textView 加入到我們的 textViews 中，就可以依據 count 計算出一共有多少頁了；並再把它們加入成 content view 的 subview
通過 glyphRange 可以知道目前字形 glyph 到哪一個點，再與 numberOfGlyphs 比較，就可以判斷中斷條件了
計算 repeat - while 何時中斷

將 setupReader() 放在 viewDidLoad 中運行：

欸？為什麼還是什麼文字都沒有？這裡我們還少做了兩件事情：

計算完並放把每一個 textView 放入 content view 後，我們需要告訴 content view 你的 content size 是多少
我們的 view size 是通過 content view 得出的，那麼我們把這段代碼運行在 view did load 之中，size 是多少呢？當然是 (0, 0) 了

所以，我們先需要在 repeat - while loop 之後，加上這段代碼：

repeat {
    ...
} while glyphRange < numberOfGlyphs - 1 // 8

contentView.contentSize = CGSize(
  width: viewSize.width * CGFloat(textViews.count),
  height: viewSize.height
)

然後把我們的 setupReader() 從 viewDidLoad() 中拿出，重新在 ReaderViewController 中加入這段代碼：

override func viewDidLayoutSubviews() {
  super.viewDidLayoutSubviews()
  setupReader()
}

viewDidLayoutSubviews() 是告訴我們 view 已經把我們底下的 subviews 們都佈局好了，這樣我們就可以取得到正確的 view size 了。

Update Style

現在我們還有幾個問題需要彌補：

背景顏色是綠色太醜了
content view 的顏色也不好看
左右滾動的時候沒有 page 的阻尼效果
左右滾動底下還是有滾動條，不好看
字體太小了
問題太過緊湊了

先把我們的 textView 和 contentView 的 backgroundColor 改成 white；

textView.backgroundColor = .white
contentView.backgroundColor = .white

再到 setupContentView 中，增加一些東西：

contentView.showsVerticalScrollIndicator = false
contentView.showsHorizontalScrollIndicator = false
contentView.isPagingEnabled = true

前面兩條是告訴我們的 content view 隱藏掉水平和垂直的滾動條；最後一條是告訴 content view 使用 paging 的方式來滾動。

還記得我們在初始化 attributedString 時沒有添加文字樣式嗎？

let attributedString = NSAttributedString(
    string: fullContent(), attributes: [:]
)

將這段 code 修改如下：

let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.lineHeightMultiple = 1.2

let attributedString = NSAttributedString(
  string: fullContent(),
  attributes: [
    .font: UIFont.preferredFont(forTextStyle: .body),
    .paragraphStyle: paragraphStyle
  ]
)

現在再運行一下，是不是舒服多啦？

以上就是這篇教程的全部內容了，全部代碼我會放在 Arcovv/TextKit-Tutorial · GitHub，歡迎提問與指點！