Programmatically adding a NSTableView to a NSStackView

Question

I was wondering about programmatically adding a NSTableView inside a NSStackView using Swift 3/MacOS Sierra.

The idea would be to have say 2 NSTextFields aligned via the centerY axis in the .leading gravity space, then a tableview in the .center gravity space, then 2 more NSTextFields aligned via the centerY axis in the .trailing gravity space. The stack view would span the width of the NSView -- like a header.

Is this a good idea or should I avoid doing this? It has been very difficult to get it to look correct -- the table always has too large of a width despite adding constraints to try to pin it to a fixed width.

Any insight would be appreciated. I'm new to programming MacOS.

Thanks,

Here is the output in Interface Builder: output of the headerview

Here is the code of the NSView I'm using: The view controller is elsewhere but I'm not really having problems with the view controller -- it's displaying the data in the table correctly. It's just the sizing/positioning of the tableview (which I'm trying to do in the NSView via the NSStackView) is always wrong. It should have a width of 650 but instead has a width of 907 and I get the same error all the time in the debug console:

2017-09-12 17:43:36.041062-0500 RaceProgram[795:36958] [Layout] Detected missing constraints for < RacingProgram.RaceImportViewHeader: 0x6000001ccd50 >. It cannot be placed because there are not enough constraints to fully define the size and origin. Add the missing constraints, or set translatesAutoresizingMaskIntoConstraints=YES and constraints will be generated for you. If this view is laid out manually on macOS 10.12 and later, you may choose to not call [super layout] from your override. Set a breakpoint on DETECTED_MISSING_CONSTRAINTS to debug. This error will only be logged once.

import Cocoa

@IBDesignable
class RaceImportViewHeader: NSView {

// MARK: Properties
private var raceQualificationsTableView:NSTableView

private var raceImportHeaderStackView:NSStackView

private var raceNumberTitle: NSTextField
private var raceNumberValue: NSTextField

public var raceQualificationsTableRowHeight: CGFloat            

@IBInspectable var borderColor:NSColor = .black
@IBInspectable var backgroundColor:NSColor = .lightGray

enum InitMethod {
    case Coder(NSCoder)
    case Frame(CGRect)
}

override convenience init(frame: CGRect) {
    self.init(.Frame(frame))!
}

required convenience init?(coder: NSCoder) {
    self.init(.Coder(coder))
}

private init?(_ initMethod: InitMethod) {
    // Group together the initializers for this view class

    raceQualificationsTableView = NSTableView()

    raceImportHeaderStackView = NSStackView()

    raceNumberTitle = NSTextField()
    raceNumberValue = NSTextField()

    raceQualificationsTableRowHeight = 17.0         // Initialize the row height for raceQualifications

    switch initMethod {
    case let .Coder(coder): super.init(coder: coder)
    case let .Frame(frame): super.init(frame: frame)
    }

    self.translatesAutoresizingMaskIntoConstraints = false

    drawUI()
}


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

    let viewSize: NSRect = self.frame
    let newRect = NSRect(x: 0, y: 0, width: viewSize.width, height: viewSize.height)


    // Outline the Header --> Only for layout debug purposes
    let path = NSBezierPath(rect: newRect)
    backgroundColor.setFill()
    path.fill()
    borderColor.setStroke()         // Set the stroke color
    path.stroke()                   // Fill the stroke or border of the rectangle

}

// MARK: UI Construction

func drawUI() {
    let viewFrame = self.frame       // with respect to the super class
    let viewBounds = self.bounds     // with respect to the view

    // MARK: Race Number Setup

    func addRaceNumberTitle(startingPositionX: CGFloat) {
        // This configures label for race Number

        let width:CGFloat = 60.0                    //Arbitrary at the moment
        let height:CGFloat = 40.0
        let leftPadding:CGFloat = 2.5              // The super view (frame)is the NSView in this case
        let topPadding:CGFloat = (viewBounds.height - height)/2
        let raceNumberTitleNSRect = NSRect(x: leftPadding + startingPositionX, y: viewBounds.height - height - topPadding, width: width, height: height)

        //Swift.print("The raceNumberTitleNSRect title NSRect is \(raceNumberTitleNSRect)")

        raceNumberTitle = NSTextField(frame: raceNumberTitleNSRect)
        raceNumberTitle.stringValue = "Race\nNumber"
        raceNumberTitle.maximumNumberOfLines = 2
        raceNumberTitle.isEditable = false
        raceNumberTitle.isBordered = false
        raceNumberTitle.alignment = .center
        raceNumberTitle.backgroundColor = .clear
        raceNumberTitle.sizeToFit()

        let updatedHeight = raceNumberTitle.frame.height
        let newUpdatedPadding = (viewBounds.height - updatedHeight) / 2
        let oldOriginX = raceNumberTitle.frame.origin.x
        let newOriginY = viewBounds.height - updatedHeight - newUpdatedPadding

        let newOrigin = NSPoint(x: oldOriginX, y: newOriginY)
        raceNumberTitle.setFrameOrigin(newOrigin)

        //addSubview(raceNumberTitle)      // Add to view
        raceImportHeaderStackView.addView(raceNumberTitle, in: .leading)
    }

    func addRaceNumberValue(startingPositionX: CGFloat) {
        // This configures value label for race number

        let width:CGFloat = 20.0                    //Arbitrary at the moment
        let height:CGFloat = 40.0
        let leftPadding:CGFloat = 5.0               // The super view (frame)is the NSView in this case
        let topPadding:CGFloat = (viewBounds.height - height)/2
        let raceNumberInRect = NSRect(x: startingPositionX + leftPadding, y: viewBounds.height - height - topPadding, width: width, height: height)

        Swift.print("The raceNumberInRect title NSRect is \(raceNumberInRect)")

        raceNumberValue = NSTextField(frame: raceNumberInRect)
        raceNumberValue.identifier = "raceNumber"
        raceNumberValue.placeholderString = "1"
        raceNumberValue.font = NSFont(name: "Impact", size: 20.0)
        raceNumberValue.maximumNumberOfLines = 1
        raceNumberValue.isEditable = false
        raceNumberValue.isBordered = true
        raceNumberValue.alignment = .center
        raceNumberValue.backgroundColor = .clear
        raceNumberValue.sizeToFit()


        let updatedHeight = raceNumberValue.frame.height
        let oldOriginX = raceNumberValue.frame.origin.x
        let newUpdatedPadding = (viewBounds.height - updatedHeight) / 2
        let newOriginY = viewBounds.height - updatedHeight - newUpdatedPadding

        let newOrigin = NSPoint(x: oldOriginX, y: newOriginY)
        raceNumberValue.setFrameOrigin(newOrigin)

        //addSubview(raceNumberValue)      // Add to view
        raceImportHeaderStackView.addView(raceNumberValue, in: .leading)
    }


    // MARK: Race Qualifications Table Setup

    func addRaceQualificationsTable(startingPositionX: CGFloat) {

        // Padding variables
        let leftPadding:CGFloat = 5.0
        let topPadding:CGFloat = 5.0

        // Table Properties
        let width:CGFloat = 650.0
        let height:CGFloat = 40

        let tableRect = CGRect(x: startingPositionX + leftPadding, y: viewBounds.height - height - topPadding, width: width, height: height)

        //let insetForTableView:CGFloat = 1.0
        //let scrollRect = CGRect(x: tableRect.origin.x-insetForTableView, y: tableRect.origin.y-insetForTableView, width: tableRect.width+2*insetForTableView, height: tableRect.height+2*insetForTableView)

        let tableNSSize = NSSize(width: tableRect.width, height: tableRect.height)
        let scrollNSRect = NSScrollView.frameSize(forContentSize: tableNSSize, horizontalScrollerClass: nil, verticalScrollerClass: nil, borderType: .bezelBorder, controlSize: .regular, scrollerStyle: .legacy)

        Swift.print("tableRect \(tableRect)")
        Swift.print("scrollNSRect \(scrollNSRect)")
        //Swift.print("scrollRect \(scrollRect)")

        let scrollViewOrigin:CGPoint = tableRect.origin
        let scrollViewNSSize:CGSize = scrollNSRect
        let scrollRect = NSRect(origin: scrollViewOrigin, size: scrollViewNSSize)

        Swift.print("scrollRect \(scrollRect)")

        let tableScrollView = NSScrollView(frame: scrollRect)
        raceQualificationsTableView = NSTableView(frame: tableRect)
        raceQualificationsTableView.identifier = "raceQualificationsTable"          // Setup identifier
        raceQualificationsTableView.rowHeight = 20.0

        Swift.print("instrinic size \(raceQualificationsTableView.intrinsicContentSize)")

        //Swift.print("tableScrollView contentsize \(tableScrollView.contentSize)")

        tableScrollView.documentView = raceQualificationsTableView
        tableScrollView.autoresizingMask = .viewNotSizable
        Swift.print("tableScroll content size \(tableScrollView.contentSize)")
        //self.addSubview(tableScrollView)

        raceImportHeaderStackView.addView(tableScrollView, in: .center)


    }

    func configureRaceQualificationsTable(showRaceNumberCol: Bool, showRaceCodeCol: Bool) {

        let headerAlignment = NSTextAlignment.center    // Easy way to change justification of headers

        // MARK: Race Number Column Options
        let raceNumberColumn = NSTableColumn(identifier: "raceNumberCol")
        raceNumberColumn.title = "Race"
        raceNumberColumn.minWidth = 40.0
        raceNumberColumn.width = 40.0
        raceNumberColumn.headerToolTip = "Race Number from the Imported Card"
        raceNumberColumn.headerCell.alignment = headerAlignment
        // Note: Word Race is always going to be wider than the race number value
        // So size to Fit is appropriate here.
        raceNumberColumn.sizeToFit()

        if showRaceNumberCol {
            // Option of not adding this to the table
            raceQualificationsTableView.addTableColumn(raceNumberColumn)
        }


        // MARK: Driver Column Options
        let breedColumn = NSTableColumn(identifier: "driverCol")
        driverColumn.title = "Driver"
        driverColumn.minWidth = 10
        driverColumn.headerToolTip = "Driver information"
        driverColumn.headerCell.alignment = headerAlignment
        driverColumn.sizeToFit()
        raceQualificationsTableView.addTableColumn(driverColumn)

        // MARK: Race Code Column Options
        let raceTypeCodeColumn = NSTableColumn(identifier: "raceTypeCodeCol")
        raceTypeCodeColumn.title = "Race Code"
        raceTypeCodeColumn.minWidth = 40
        raceTypeCodeColumn.headerToolTip = "Race Classification Code"
        raceTypeCodeColumn.headerCell.alignment = headerAlignment
        raceTypeCodeColumn.sizeToFit()

        if showRaceCodeCol {
            // Option of not adding to the table
            raceQualificationsTableView.addTableColumn(raceTypeCodeColumn)
        }

        // MARK: Race Type Code Description Options
        let raceTypeCodeDescColumn = NSTableColumn(identifier: "raceTypeCodeDescCol")
        raceTypeCodeDescColumn.title = "Race Desc"
        raceTypeCodeDescColumn.minWidth = 50
        raceTypeCodeDescColumn.width = 100
        raceTypeCodeDescColumn.headerToolTip = "Race Classification Full Description"
        raceTypeCodeDescColumn.headerCell.alignment = headerAlignment

        raceQualificationsTableView.addTableColumn(raceTypeCodeDescColumn)

        // MARK: Race Restriction Column Options
        let raceRestrictionColumn = NSTableColumn(identifier: "raceRestrictionCol")
        raceRestrictionColumn.title = "Restrictions"
        raceRestrictionColumn.minWidth = 50
        raceRestrictionColumn.width = 80
        raceRestrictionColumn.headerToolTip = "Race Restrictions"
        raceRestrictionColumn.headerCell.alignment = headerAlignment

        raceQualificationsTableView.addTableColumn(raceRestrictionColumn)

        // MARK: Sex Restriction Column Options
        let sexRestrictionColumn = NSTableColumn(identifier: "sexRestrictionCol")
        sexRestrictionColumn.title = "Sex"
        sexRestrictionColumn.minWidth = 100
        sexRestrictionColumn.width = 100
        sexRestrictionColumn.headerToolTip = "Sex Restrictions"
        sexRestrictionColumn.headerCell.alignment = headerAlignment

        raceQualificationsTableView.addTableColumn(sexRestrictionColumn)

        // MARK: Age Restriction Column Options
        let ageRestrictionColumn = NSTableColumn(identifier: "ageRestrictionCol")
        ageRestrictionColumn.title = "Age"
        ageRestrictionColumn.minWidth = 100
        ageRestrictionColumn.width = 100
        ageRestrictionColumn.headerToolTip = "Age Restrictions"
        ageRestrictionColumn.headerCell.alignment = headerAlignment

        raceQualificationsTableView.addTableColumn(ageRestrictionColumn)

        // MARK: Division Column Options
        let divisionColumn = NSTableColumn(identifier: "divisionCol")
        divisionColumn.title = "Division"
        divisionColumn.minWidth = 50

        let minDivisionColumnWidth = raceQualificationsTableView.frame.width - raceNumberColumn.width - driverColumn.width - raceTypeCodeColumn.width - raceTypeCodeDescColumn.width - raceRestrictionColumn.width - sexRestrictionColumn.width - ageRestrictionColumn.width

        // Calculate the available room for the division column
        if (showRaceCodeCol && showRaceNumberCol) {
            // This is the minimum case
            // No idea why we need the 25.0 manual adjustment
            divisionColumn.width = minDivisionColumnWidth - 25.0
        } else if (showRaceCodeCol && !showRaceNumberCol) {
            // Add back race type code
            // No idea why we need to manually adjust 53.5
            divisionColumn.width = minDivisionColumnWidth + raceTypeCodeColumn.width - 53.5
        } else if (!showRaceCodeCol && showRaceNumberCol) {
            // Add back race number col
            divisionColumn.width = minDivisionColumnWidth + raceNumberColumn.width
        } else {
            // Else it's the maximum space
            // This code was making the frame too large -- it was increasing the
            // the frame size of the column to 670.0  I put a manual reduction of
            // 20 to keep the frame size the same.  Not sure where this 20 is coming from.
            divisionColumn.width = minDivisionColumnWidth + raceNumberColumn.width + raceTypeCodeColumn.width - 20.0
        }

        //Swift.print("The division column width is \(divisionColumn.width)")

        divisionColumn.headerToolTip = "Division -- Unknown what this means"
        divisionColumn.headerCell.alignment = headerAlignment

        raceQualificationsTableView.addTableColumn(divisionColumn)

        //Swift.print("raceQualificationsTableView.frame.width is \( raceQualificationsTableView.frame.width)")
    }

    // MARK: Race Distance Surface Course Setup

    func addRaceDistanceSurfaceCourseTable(startingPositionX: CGFloat) {
        // Table Properties
        let width:CGFloat = 250.0
        let height:CGFloat = 40.0

        // Padding variables
        let leftPadding:CGFloat = 5.0

        let topPosition:CGFloat = (viewBounds.height - ((viewBounds.height - height)/2) - height)

        let tableRect = CGRect(x: leftPadding + startingPositionX, y: topPosition, width: width, height: height)

        let tableScrollView = NSScrollView(frame: tableRect)
        raceDistanceSurfaceCourseTableView = NSTableView(frame: tableRect)
        raceDistanceSurfaceCourseTableView.identifier = "raceDistanceSurfaceCourseTable"          // Setup identifier
        //raceDistanceSurfaceCourseTableView.rowHeight = 20.0
        raceDistanceSurfaceCourseTableView.intercellSpacing = NSSize(width: 1.0, height: 1.0)
        raceDistanceSurfaceCourseTableView.headerView = ImportRaceTableHeaders()

        tableScrollView.documentView = raceDistanceSurfaceCourseTableView
        //tableScrollView.hasVerticalScroller = false
        //tableScrollView.verticalScroller = nil          // Turn off vertical scrolling
        //tableScrollView.verticalScrollElasticity = .none

        //raceDistanceSurfaceCourseTableView = NSTableViewHeader

        //self.addSubview(tableScrollView)
        raceImportHeaderStackView.addView(raceDistanceSurfaceCourseTableView, in: .center)

    }



    // MARK: Construct the fields:

    //configureHeaderView()
    configureStackView()
    addRaceNumberTitle(startingPositionX: 0.0)              // Add the race number title
    addRaceNumberValue(startingPositionX: raceNumberTitle.frame.origin.x + raceNumberTitle.frame.width)   //Add the Race Number value text field

    addRaceQualificationsTable(startingPositionX: raceNumberValue.frame.origin.x + raceNumberValue.frame.width)
    configureRaceQualificationsTable(showRaceNumberCol: false, showRaceCodeCol: false)

}

// MARK: TableView Functions

func reloadTableViewData(identifier: String) {

    Swift.print("Manual reload of data for identifier \(identifier)")

    switch identifier {

        case "raceQualificationsTable":
            raceQualificationsTableView.reloadData()
        case "raceDistanceSurfaceCourseTable":
            raceDistanceSurfaceCourseTableView.reloadData()
        default:
            break
    }
}


// MARK: Delegate/DataSources Outlets for TableViews

// Race Qualification Table (the header table)
@IBOutlet weak var raceQualificationsDelegate: NSTableViewDelegate? {
    get {
        return raceQualificationsTableView.delegate
    }
    set {
        raceQualificationsTableView.delegate = newValue
    }
}

@IBOutlet weak var raceQualificationsDataSource: NSTableViewDataSource? {
    get {
        return raceQualificationsTableView.dataSource
    }
    set {
        raceQualificationsTableView.dataSource = newValue
    }
}

// Race Distance Surface Course
@IBOutlet weak var raceDistanceSurfaceCourseDelegate: NSTableViewDelegate? {
    get {
        return raceDistanceSurfaceCourseTableView.delegate
    }
    set {
        raceDistanceSurfaceCourseTableView.delegate = newValue
    }
}

@IBOutlet weak var raceDistanceSurfaceCourseDataSource: NSTableViewDataSource? {
    get {
        return raceDistanceSurfaceCourseTableView.dataSource
    }
    set {
        raceDistanceSurfaceCourseTableView.dataSource = newValue
    }
}

// MARK: Label Outlets
@IBOutlet var raceNumber:String? {
    get {
        return raceNumberValue.stringValue
    }
    set {
        raceNumberValue.stringValue = newValue!
    }
}

}