本文翻譯自 raywenderlich.com 的 How to Use NSTouchBar on macOS，已咨詢對方網站，可至多翻譯 10 篇文章。
各位若有英語閱讀能力的話，還是先打賞然后去閱讀英文原吧??。
綜上，此翻譯版本僅供參考，謝絕轉載。也歡迎你點擊我的頭像查看我翻譯的其他 macOS 開發教程??
對了我跟著這個教程敲代碼的時候發現文中所有的
@available(OSX 10.12.1, *)其實應為@available(OSX 10.12.2, *)，但是出于對原文的尊重沒有修改，請各位注意～
等了好久好久終于等到今天之后，Apple 終于發布了新款的 MacBook Pro，它最惹人矚目的應該就是那塊（小小的）觸屏了吧。
新款設備用全新的 Touch Bar 替代了原有的功能鍵，它們可擴展、支持多點觸控，更重要的是，Touch Bar 對開發者們完全開放，這意味著你的 macOS app 可以獲得一種全新的交互方式。
如果你是一個 macOS 開發者，你一定很希望自己的 app 能夠立刻使用上這項前沿科技。在這個教程中，我會將向你們展示如何使用全新的 NSTouchBar API 來為你的 macOS app 創建一個動態的 Touch Bar。
注意：這個教程需要 Xcode 8.1 或更高版本以及 macOS 10.12.1 (Build 16B2657) 或更高版本，否則的話你將無法運行 Touch Bar 模擬器。你可以在 ? → 關于本機里點擊數字版本號來查看 build 版本。
如果你的版本不夠，你可以在 Apple 的網站上 下載。
Touch Bar 是個啥？
如上文所述，Touch Bar 是一塊安裝在鍵盤上方的細長形的觸摸屏，它允許用戶使用一種全新的方式來與 app（以及 Mac）進行交互。
在 Touch Bar 上有三個默認的部分：
- 系統按鈕：根據運行的 app，這里將會顯示一個系統級的按鈕，比如 esc；
- App 區域：你的 app 可以控制的顯示區域，也就是我們的主舞臺；
- 控制條：這里用于顯示你熟悉的控制按鈕，比如亮度、音量等。
和其它許多 Apple 的新科技一樣，Touch Bar 也擁有自己的《人機交互則例（Human Interface Guidelines）》，為了你的 app 和其它 Mac app 擁有統一的用戶體驗，你應當遵循這份則例。你可以點擊這里閱讀它。
概括說來，這份則例中比較重要的幾點有：
- App 中的某個功能不應該只能在 Touch Bar 中使用：即使部份用戶還未升級到最新的硬件，你的 app 也應該盡量為他們提供一樣的功能。如果你決定為 Touch Bar 加入某些功能，請確保這個功能也能在 app 的其他某處也可以訪問到。另外 Touch Bar 是可以被用戶禁用的，所以也別太指望你的用戶能一直看到它；
- Touch Bar 是鍵盤的延伸，而不是一個顯示屏：誠然，Touch Bar 是一個顯示屏，但是它不是顯示器的延伸，而是一個與 app 交互的窗口。你不應該在 Touch Bar 上用滾來滾去的內容或 blingbling 的警告打擾用戶的視線；
- 快速響應：用戶在鍵盤上按下一個真實的按鍵時，按鍵會立即給予一個反饋（也就是被按下去了）。同理，用戶在 Touch Bar 上按下一個虛擬按鈕時，你也應該給他們提供即時的反饋。
如何讓你的 app 支持 Touch Bar
要讓你的 app 支持 Touch Bar，你需要使用 Apple 提供的兩個類：NSTouchBar 和 NSTouchBarItem（當然還有他們的子類）。
某些 NSTouchBarItem 的子類提供了這些功能：
- Slider：滑動調節某個值；
- Popover：把更多功能藏入一個二級菜單中；
- Color Picker：和名字一樣，用來選取顏色的咯???♀?；
- Custom：這個子類是你的天下，你可以在它的里面塞入文本、按鈕以及其他各種各樣的控件。
從文字大小顏色到圖片內容，你可以隨意自定義你的 item，從而為你的用戶提供一個傳統鍵盤無法提供的、更加牛×的交互方式，但是請時刻請謹記《人機交互則例》。現在我們要開始動工啦。
準備開始
在開始敲代碼之前，請先點擊這里下載初始項目的源代碼。
我們要編寫的 app 是一個簡單的旅行記錄 app。打開初始項目，如果你的設備不支持 Touch Bar，請點擊 Xcode 菜單欄上的 Window → Show Touch Bar，Touch Bar 的模擬器就會出現在屏幕上。
編譯并運行你的 app，你將會看到 Touch Bar 上除了 esc 按鈕和控制條以外空空如也。
我們要做的第一步是告訴系統我們的 app 需要自定義 Touch Bar。打開 AppDelegate.swift，將這些代碼添加到 applicationDidFinishLaunching(_:) 方法中：
func applicationDidFinishLaunching(_ aNotification: Notification) {
if #available(OSX 10.12.1, *) {
NSApplication.shared().isAutomaticCustomizeTouchBarMenuItemEnabled = true
}
}
這些代碼將會幫你搞定啟用 Touch Bar 所需要的各種操作，（在寫這篇文章的時候）Xcode 還沒有 macOS 10.12.1 的配套 SDK，所以你需要在 Touch Bar 相關的代碼周邊添加 #available(OS X 10.12.1, *)，當然如果你忘了這件事，Xcode 會給你一個溫馨的提醒??。
打開 WindowController.swift，找到 makeTouchBar()，這個方法用于檢測 ViewController 是否含有一個可以被返回的 Touch Bar，如果有，它會把這個 Touch Bar 返回給 Window，然后呈現給用戶。現在，我們還沒有創建 Touch Bar，所以什么也不會發生。
在你開始創建自己的 Touch Bar 和 Touch Bar Item 之前，你需要注意這些類都需要獨一無二的 identifier（標識符），打開 TouchBarIdentifiers.swift，你將能看到兩個擴展定義了一些標識符：NSTouchBarCustomizationIdentifier 和 NSTouchBarItemIdentifier。
前往 ViewController.swift，并把這些帶碼添加到文件最后 // MARK: - TouchBar Delegate 注釋的后方：
@available(OSX 10.12.1, *)
extension ViewController: NSTouchBarDelegate {
override func makeTouchBar() -> NSTouchBar? {
// 1
let touchBar = NSTouchBar()
touchBar.delegate = self
// 2
touchBar.customizationIdentifier = .travelBar
// 3
touchBar.defaultItemIdentifiers = [.infoLabelItem]
// 4
touchBar.customizationAllowedItemIdentifiers = [.infoLabelItem]
return touchBar
}
}
在此處，通過重寫 makeTouchBar() 方法，你給你的 View 或 Window 創建了一個 Touch Bar，在這個方法中：
- 創建一個新的
TouchBar并設置它的 delegate； - 設置 customizationIdentifier（自定義標識符），每個
TouchBar和TouchBarItem都需要一個獨一無二的標識符； - 設置 Touch Bar 的默認 item 標識符，這將會告訴 Touch Bar 它將會容納哪些 item；
- 這一步是允許用戶可以自定義的 item。作為參考，你可以打開 Finder，點擊菜單欄上的 顯示 → 自定 Multi-Touch Bar看看自定義 Touch Bar 是什么效果。
接下來，我們還需要設置 .infoLabelItem 是什么樣子的，在同一個 extension 中添加：
func touchBar(_ touchBar: NSTouchBar, makeItemForIdentifier identifier: NSTouchBarItemIdentifier) -> NSTouchBarItem? {
switch identifier {
case NSTouchBarItemIdentifier.infoLabelItem:
let customViewItem = NSCustomTouchBarItem(identifier: identifier)
customViewItem.view = NSTextField(labelWithString: "\u{1F30E} \u{1F4D3}")
return customViewItem
default:
return nil
}
}
通過實現touchBar(_:makeItemForIdentifier:) 方法，你可以自定義你的 Touch Bar Item，在段代碼里，你創建了一個 NSCustomTouchBarItem，并把它的 view 設置為了 NSTextField。
編譯并運行你的 app，你可以看到 Touch Bar 多了一個 item。
耶??！通過一番努力你得到了……兩個 emoji…好吧，現在我們來添加一些別的控件。
Text Field 和 Scrubber
在 makeTouchBar() 里，把 touchBar.defaultItemIdentifiers = [.infoLabelItem] 修改為：
touchBar.defaultItemIdentifiers = [.infoLabelItem, .flexibleSpace, .ratingLabel, .ratingScrubber]
這些代碼會讓 Touch Bar 顯示三個 item：一個 label、一個 scrubber 以及一個 .flexibleSpace。這是一個動態的間距，它可以把各種 item 按組進行整潔的分類。此外你還可以使用 .fixedSpaceSmall 和 .fixedSpaceLarge 這兩個固定間距。
和之前的那個 label 一樣，你也需要自定義這些 item，把這些 cases 添加到 touchBar(_:makeItemForIdentifier:) 里的 switch：
case NSTouchBarItemIdentifier.ratingLabel:
// 1
let customViewItem = NSCustomTouchBarItem(identifier: identifier)
customViewItem.view = NSTextField(labelWithString: "Rating")
return customViewItem
case NSTouchBarItemIdentifier.ratingScrubber:
// 2
let scrubberItem = NSCustomTouchBarItem(identifier: identifier)
let scrubber = NSScrubber()
scrubber.scrubberLayout = NSScrubberFlowLayout()
scrubber.register(NSScrubberTextItemView.self, forItemIdentifier: "RatingScrubberItemIdentifier")
scrubber.mode = .fixed
scrubber.selectionBackgroundStyle = .roundedBackground
scrubber.delegate = self
scrubber.dataSource = self
scrubberItem.view = scrubber
scrubber.bind("selectedIndex", to: self, withKeyPath: #keyPath(rating), options: nil)
return scrubberItem
一步一步來看：
- 為「評分」新建了一個新的 label item；
- 然后創建一個新的 item 用來展示
NSScrubber。這是一個 Touch Bar 特有的控件，它允許你在若干個項目中進行選擇。Scrubber 需要一個代理來處理事件，你需要做的是設置一個delegate（初始項目的源代碼已經在 ViewController 里實現過這個協議了）。
編譯并運行你的 app，你將會看到 Touch Bar 里多出了兩個新的 item，當你點擊某個 scrubber 里的項目后，在 app 的主窗口里能看到數值的調整。
Segmented Control
接下來，我們來添加一個 Segmented Control。這個控件沒有使用 Delegate 模式，因此這剛好可以讓你體驗一下怎么設置 Touch Bar 里的 Target-Action（目標動作）。回到 makeTouchBar() 中，把這三個 item 添加到 defaultItemIdentifiers 里：
touchBar.defaultItemIdentifiers = [.infoLabelItem, .flexibleSpace, .ratingLabel, .ratingScrubber, .flexibleSpace, .visitedLabelItem, .visitedItem, .visitSegmentedItem]
以及把最后的三個 case 添加到 touchBar(_:makeItemForIdentifier:) 中：
case NSTouchBarItemIdentifier.visitedLabelItem:
// 1
let customViewItem = NSCustomTouchBarItem(identifier: identifier)
customViewItem.view = NSTextField(labelWithString: "Times Visited")
return customViewItem
case NSTouchBarItemIdentifier.visitedItem:
// 2
let customViewItem = NSCustomTouchBarItem(identifier: identifier)
customViewItem.view = NSTextField(labelWithString: "--")
customViewItem.view.bind("value", to: self, withKeyPath: #keyPath(visited), options: nil)
return customViewItem
case NSTouchBarItemIdentifier.visitSegmentedItem:
// 3
let customActionItem = NSCustomTouchBarItem(identifier: identifier)
let segmentedControl = NSSegmentedControl(images: [NSImage(named: NSImageNameRemoveTemplate)!, NSImage(named: NSImageNameAddTemplate)!], trackingMode: .momentary, target: self, action: #selector(changevisitedAmount(_:)))
segmentedControl.setWidth(40, forSegment: 0)
segmentedControl.setWidth(40, forSegment: 1)
customActionItem.view = segmentedControl
return customActionItem
一步一步看：
- 和之前一樣，創建一個簡單的 Label；
- 創建另一個 Label，但這一次使用 bind 來把 Label 要顯示的文本綁定到一個屬性上；
- 最后，創建一個 Segmented Control，并設置它的 action。你可以看到，為它設置一個 action 和其他常見控件是完全一樣的。
編譯并運行，除了 Scrubber，你現在還可以和 Segmented Control 交互了。此外，在 Touch Bar 里修改一個數值，app 的主窗口中也會顯示出來，反之亦然。
彩色按鈕
能讓用戶使用 Touch Bar 來進行「保存」操作是一個不錯的點子，因為這個按鈕和別的按鈕都不一樣，我們可以把它設置成綠色的。你可以使用 NSButton 的 bezelColor 屬性來給它設置一個特殊的顏色。
打開 TouchBarIdentifiers.swift，在 NSTouchBarItemIdentifier extension 里，添加這些代碼：
static let saveItem = NSTouchBarItemIdentifier("com.razeware.SaveItem")
這將會從頭開始創建一個標識符，以此允許你在 Touch Bar 里添加一個 item。
返回 ViewController.swift，添加一個新的 .flexSpace 和 .saveItem 到 Touch Bar 的 defaultItemIdentifiers 里：
touchBar.defaultItemIdentifiers = [.infoLabelItem, .flexibleSpace, .ratingLabel, .ratingScrubber, .flexibleSpace, .visitedLabelItem, .visitedItem, .visitSegmentedItem, .flexibleSpace, .saveItem]
基本上完成了，最后一步是對按鈕進行一些設置。在 touchBar(_:makeItemForIdentifier:) 中添加最后一個 case：
case NSTouchBarItemIdentifier.saveItem:
let saveItem = NSCustomTouchBarItem(identifier: identifier)
let button = NSButton(title: "Save", target: self, action: #selector(save(_:)))
button.bezelColor = NSColor(red:0.35, green:0.61, blue:0.35, alpha:1.00)
saveItem.view = button
return saveItem
通過 bezelColor，你已經把這個按鈕成功地修改成了綠色。
編譯并運行，你會看到 Touch Bar 上有了一個綠色的按鈕，它和窗口中的 Save 按鈕擁有一樣的功能。
現在該做些啥？
你可以點擊這里下載最終完成的項目。
這些就是 Touch Bar 的基礎了。顯然，Apple 希望 Touch Bar 的開發過程越簡單越好，因此你可以盡快把這些特性盡快地帶給新 MacBook Pro 的用戶。
在這個教程中，你學到了：
- 如何設置你的 app，讓它能顯示 Touch Bar；
- 如何在 Touch Bar 里顯示靜止的 Label；
- 如何使用 binding（綁定）來添加一個動態的 Label；
- 如何在 Touch Bar 中添加控件，并處理它們的事件。
請不要在此停下！NSTouchBar 和 NSTouchBarItem 中還有很多值得探索的特性。你可以試著在 Touch Bar 里添加一個 Popover，或者也可以試試在你的 app 里格式化一個文本，你還可以在試著去在 Interface Builder 里創建一個 Touch Bar。
