如何使NSToolbar中的控制器與NSSplitViewController的視圖一樣移動，如Reeder或Mail.app

Question

我正在開發一個可可應用程序。 它包含一個具有一些功能按鈕的工具欄。 就像Reeder一樣。

我想在調整拆分視圖大小時調整工具欄部分的大小。 有點像下面的東西。 如何實現這種功能？

任何人都可以幫助我或給一些建議將不勝感激。

我正在使用XCode7，Swift和Storyboard進行開發。

Answer 1

顯然沒有任何方法可以將splitView添加到工具欄本身，我懷疑我們在reeder中看到的不是標准工具欄。 無論如何，我做了以下事情

1. 隱藏標題欄，透明工具欄和主控制器上的全屏視圖

2. 將高度為38的自定義視圖添加到每個“源列表（側邊欄）”，“內容列表”（索引列表）和SplitViewController splitView項的默認區域的最頂部。然后向此splitView添加按鈕

3. 這是它在主窗口上應該是什么樣子

4. 如果你想獲得完整的工具欄外觀。 使用37點高度（添加按鈕的高度）創建所有customView的插座並自定義背景，添加漸變和底部邊框

Answer 2

我已經改編了livestonef的Swift 3實現，並添加了缺少的NSBezierPath擴展：

import Cocoa

@IBDesignable class ToolbarCustomView: NSView {

    override func draw(_ dirtyRect: NSRect) {
        super.draw(dirtyRect)

        //The background
        let startingColor = NSColor(red: 232/256, green: 230/256, blue: 232/256, alpha: 1)
        let endingColor = NSColor(red: 209/256, green: 208/256, blue: 209/256, alpha: 1)
        let gradient = NSGradient(starting: startingColor, ending: endingColor)

        gradient?.draw(in: self.bounds, angle: 270)

        //The bottom border
        let borderPath = NSBezierPath()
        let startingPoint = NSPoint(x: dirtyRect.origin.x, y: 0)
        let stoppingPoint = NSPoint(x: dirtyRect.width, y: 0)

        borderPath.move(to: startingPoint)
        borderPath.line(to: stoppingPoint)

        let shapeLayer = CAShapeLayer()

        self.layer?.addSublayer(shapeLayer)

        shapeLayer.path = borderPath.cgPath
        shapeLayer.strokeColor = NSColor(red: 180/256, green: 182/256, blue: 180/256, alpha: 0.6).cgColor
        shapeLayer.fillColor = .clear
        shapeLayer.lineWidth = 1
    }
}

extension NSBezierPath {

    public var cgPath: CGPath {
        let path = CGMutablePath()
        var points = [CGPoint](repeating: .zero, count: 3)

        for i in 0 ..< self.elementCount {
            let type = self.element(at: i, associatedPoints: &points)
            switch type {
            case .moveToBezierPathElement:
                path.move(to: points[0])
            case .lineToBezierPathElement:
                path.addLine(to: points[0])
            case .curveToBezierPathElement:
                path.addCurve(to: points[2], control1: points[0], control2: points[1])
            case .closePathBezierPathElement:
                path.closeSubpath()
            }
        }

        return path
    }
}

Answer 3

一切都與約束有關

如果工具欄在splitview中：

在工具欄上設置約束“間隔到最近鄰居”，例如左邊和右邊的0然后按鈕必須還有一個“到最近鄰居的間距”到工具欄，例如右邊的8

編輯：在此處查看按鈕以添加約束http://oi63.tinypic.com/2s7szgi.jpg