How to make controller in NSToolbar moving with NSSplitViewController's view like Reeder or Mail.app

问题

I am developing a cocoa application. It contains a toolbar having some feature buttons. Just like Reeder.

I want to resize the toolbar section while resizing the split view. Something works like below. How to implement this kind of feature?

Any one can help me or give some suggestions will be appreciated.

I am developing with XCode7, Swift and Storyboard.

回答1:

Obviously there isn't any way to add a splitView to the toolbar itself and i suspect what we see in reeder is not a standard toolbar. In anycase to get this, i did the following

Hidden titlebar, transparent toolbar and fullscreen view on main controller

Add custom views with a height of 38 to the very top of each of your "sourcelist (sidebar), contentlist (index list) and default area of your SplitViewController splitView items. Then add buttons to this splitView

This is what it should look like on the main window

If you want to get the complete toolbar look. create an outlet to all your customView with the 37 point height (the ones to which you added the buttons) and customize the background, adding a gradient and a bottom border

回答2:

I've adapted livingstonef's implementation for Swift 3 and also added the missing NSBezierPath extension:

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
    }
}

回答3:

it's all about constraints

If toolbar is in splitview :

On your toolbar set constraints "spacing to nearest neighbor", for instance 0 for left and right Then the button must have also a "spacing to nearest neighbor" to the toolbar, for instance 8 at right

edit: see button here to add constrains http://oi63.tinypic.com/2s7szgi.jpg

来源：https://stackoverflow.com/questions/34937275/how-to-make-controller-in-nstoolbar-moving-with-nssplitviewcontrollers-view-lik

标签

xcode

cocoa

autolayout

nssplitview

nstoolbar