NSGridView : A new layout container for macOS

10 / Jul / 2016 by Ashu Baweja 0 comments

What’s the need of NSGridView :
Suppose you want to create a view which should look like this and to create it we have following available options:

5

1. Autolayout :

    • Maintanence on constraints is complicated
  • 2. NS/UIStackView :

    • Arranging a sequence of items
    • Fine control over content size and spacing

    To make the above design less complicated and easily designable Apple has introduced a 3rd option.

    3. NSGridView :

    • Places views in an explicitly defined grid
    • Content aligned across rows and columns
    • Great for arranging static grid-like UI

    Overview:
    NSGridView consists of

    1. NSGridRow and NSGridColumn : It has following attributes

    • Automatic or explicit sizing
    • Optional padding and spacing
    • Hidden rows and columns

    2. NSGridCell : It has following attributes

    • Each cell manages a content view
    • Adjustable placement

    Start Designing with NSGridView :
    For now this view is not available in Interface Builder you have to create it via programming only.

    [code language=”objc”]
    let empty = NSGridCell.emptyContentView
    let gridView = NSGridView(views: [
    [brailleTranslationLabel, brailleTranslationPopup],
    [empty, showContractedCheckbox],
    [empty, showEightDotCheckbox],
    [statusCellsLabel, showGeneralDisplayCB],
    [empty, textStyleCB],
    [showAlertCB]
    ])
    [/code]

    This code has only added subview to NSGridView but alignment (spacing and padding) is not proper.

    1

    Now set the hugging priority and remove spaces between rows and columns.

    [code language=”objc”]
    gridView.setContentHuggingPriority(600, for: .horizontal)
    gridView.setContentHuggingPriority(600, for: .vertical)
    [/code]

    2

    Now set the placement of first colmn.

    [code language=”objc”]
    // the first column needs to be right-justified:
    gridView.column(at: 0).xPlacement = .trailing
    // all cells use firstBaseline alignment
    gridView.rowAlignment = .firstBaseline
    [/code]

    3

    Now set the verticle padding as per design.

    [code language=”objc”]
    // We need a little extra vertical space around the popup:
    let row = gridView.cell(for: brailleTranslationPopup)!.row!
    row.topPadding = 5
    row.bottomPadding = 5
    gridView.cell(for:statusCellsLabel)!.row!.topPadding = 6
    [/code]

    4

    Now we need alert message checkbox to be centered.

    [code language=”objc”]
    // Special treatment for centered checkbox:
    let cell = gridView.cell(for: showAlertCB)!
    cell.row!.topPadding = 4
    cell.row!.mergeCells(in: NSMakeRange(0, 2))
    cell.xPlacement = .none
    let centering = showAlertCB.centerXAnchor.constraint(equalTo: textStyleCB.leadingAnchor)
    cell.customPlacementConstraints = [centering]
    [/code]

    5

    Congratulations! You are done with NSGridView.

    FOUND THIS USEFUL? SHARE IT

    Leave a Reply

    Your email address will not be published. Required fields are marked *