Cocoa Programming for OS X: View Swapping and Custom Container View Controllers

這是 Cocoa Programming for OS X（5e）By Big Nerd Ranch - View Swapping and Custom Container View Controllers 的學習筆記。已將書中的程式碼更新為 Swift 3 版本。

Previously

我們用 NSTabViewController 來讓使用者切換兩個 View Controller，但 NSTabController 是怎麼實現的呢？

View Swapping

檢視切換可以用 addSubview(_:) 和 removeFromSuperView() 方法來實現。

class NerdBox: NSView {

var contentView: NSView?

func showContentView(view: NSView) {
    contentView?.removeFromSuperview()
    addSubview(view)
    contentView = view
}
}

你還需要調整 view 來適應容器，比如新增 auto layout 約束。事實上 Cocoa 提供了一個 NSBox 類來做這個工作。

NerdTabViewController

重寫 loadView() 方法設定檢視。覆蓋 child view controller 的管理方法來呼叫它。

override func loadView() {
    view = NSView()
    reset()
}
func reset() {
   
}

override func insertChildViewController(_ childViewController: NSViewController, at index: Int) {
    super.insertChildViewController(childViewController, at: index)
    if isViewLoaded {
        reset()
    }
}

override func removeChildViewController(at index: Int) {
    super.removeChildViewController(at: index)
    if isViewLoaded {
        reset()
    }
}

這個 class 大量個工作將在 reset() 中實現，它將重建檢視層級。在實現它之前，新增兩個屬性和兩個方法

var box = NSBox()
var buttons: [NSButton] = []

func selectTabAtIndex(index: Int)  {
    assert((0..<childViewControllers.count).contains(index), "index out of range")
    for(i, button) in buttons.enumerated(){
        button.state = (index == i) ? NSOnState : NSOffState
    }
    let viewController = childViewControllers[index]
    box.contentView = viewController.view
}

func selectTab(sender: NSButton){
    let index = sender.tag
    selectTabAtIndex(index: index)
    
}

box 用到了 NSBox，它保持所選tab的內容。buttons是一個陣列，觸發 selectTab(_:) 動作。引數 sender 用來區分那一個tab要顯示。

實現 reset() 重繪檢視結構。

func reset () {
    view.subviews = []
    
    let buttonWidth: CGFloat = 28
    let buttonHeight: CGFloat = 28
    
    let viewControllers = childViewControllers
    buttons = viewControllers.enumerated().map {
        (index, viewController) -> NSButton in
        let button = NSButton()
        button.setButtonType(.toggle)
        button.translatesAutoresizingMaskIntoConstraints = false
        button.isBordered = false
        button.target = self
        button.action = #selector(selectTab(sender:))
        button.tag = index
        button.image = NSImage(named: NSImageNameFlowViewTemplate)
        button.addConstraints([
            NSLayoutConstraint(item: button,
                               attribute: .width,
                               relatedBy: .equal,
                               toItem: nil,
                               attribute: .notAnAttribute,
                               multiplier: 1.0,
                               constant: buttonWidth),
            NSLayoutConstraint(item: button,
                               attribute: .height,
                               relatedBy: .equal,
                               toItem: nil,
                               attribute: .notAnAttribute,
                               multiplier: 1.0,
                               constant: buttonHeight)
            ])
        return button
    }
    
    let stackView = NSStackView()
    stackView.translatesAutoresizingMaskIntoConstraints = false
    stackView.orientation = .horizontal
    stackView.spacing = 4
    for button in buttons {
        stackView.addView(button, in: .center)
    }
    
    box.translatesAutoresizingMaskIntoConstraints = false
    box.borderType = .noBorder
    box.boxType = .custom
    
    let separator = NSBox()
    separator.boxType = .separator
    separator.translatesAutoresizingMaskIntoConstraints = false
    
    view.subviews = [stackView, separator, box]
    
    let views = ["stack": stackView, "separator": separator, "box": box]
    let metrics = ["buttonHeight": buttonHeight]
    
    func addVisualFormatConstraints(visualFormat:String) {
        let constraints =
            NSLayoutConstraint.constraints(withVisualFormat: visualFormat,
                                                           options: [],
                                                           metrics: metrics as [String : NSNumber]?,
                                                           views: views)
        NSLayoutConstraint.activate(constraints)
    }
    addVisualFormatConstraints(visualFormat: "H:|[stack]|")
    addVisualFormatConstraints(visualFormat: "H:|[separator]|")
    addVisualFormatConstraints(visualFormat: "H:|[box(>=100)]|")
    addVisualFormatConstraints(visualFormat: "V:|[stack(buttonHeight)][separator(==1)][box(>=100)]|")
    
    if childViewControllers.count > 0 {
        selectTabAtIndex(index: 0)
    }
    
}

以上唯一的新概念是 NSStackView，它用於安排多個view的順序，橫向或者縱向，用 gravity 來表示它們將佈置在什麼位置。這裡放置在中間。

現在你已經實現了 NerdTabViewController，下面在 AppDelegate.swift 應用這個類

let tabViewController = NerdTabViewController()

Run。目前剩下一個問題是 tab 按鈕顯示同樣的圖片。

新增 Tab 圖片

ImageViewController 中已經有一個 image 屬性。但是我們要使 MerdTabViewController 適用於所有的 view controller，我們需要一個方法給任何 view controller，讓它提供一個型別安全、可預測的、自成文件的圖片。

Protocol 提供了一個很好的實現這個思路的方法。

定義一個 protocol

    protocol ImageRepresentable {
        var image: NSImage? { get }
    }

在 reset() 中判斷 view controller 是否遵循這個 protocol

        //button.image = NSImage(named: NSImageNameFlowViewTemplate)
        if let viewController = viewController as? ImageRepresentable {
            button.image = viewController.image
        }
        else {
            button.title = viewController.title!
        }

讓 ImageViewController 遵循這個 protocol

class ImageViewController: NSViewController, ImageRepresentable {

因為 ImageViewController 已經有 image 屬性了，可以 Run 了。