NSGridView difficulties

user_4992124 0
Viewed 2422

I'm using an NSGridView in the settings panel for my macOS app. I set it up like this:

class GeneralViewController: RootViewController {
    private var gridView: NSGridView?

    override func loadView() {
        super.loadView()

        let restaurantLabel = NSTextField()
        restaurantLabel.stringValue = "Restaurant"

        let restaurantButton = NSPopUpButton()
        restaurantButton.addItems(withTitles: ["A", "B", "C"])

        let updatesLabel = NSTextField()
        updatesLabel.stringValue = "Updates"
        updatesLabel.isEditable = false
        updatesLabel.isBordered = false
        updatesLabel.isBezeled = false

        let updatesButton = NSButton(checkboxWithTitle: "Automatically pull in updates from WordPress", target: nil, action: nil)

        let empty = NSGridCell.emptyContentView
        gridView = NSGridView(views: [
            [restaurantLabel, restaurantButton],
            [updatesLabel, updatesButton]
            ])
        gridView?.wantsLayer = true
        gridView?.layer?.backgroundColor = NSColor.red.cgColor
        gridView?.column(at: 0).xPlacement = .trailing
        gridView?.rowAlignment = .firstBaseline
        gridView?.setContentHuggingPriority(NSLayoutConstraint.Priority(rawValue: 600), for: .horizontal)
        gridView?.setContentHuggingPriority(NSLayoutConstraint.Priority(rawValue: 600), for: .vertical)

        view.addSubview(gridView!)
    }

    override func viewDidLayout() {
        super.viewDidLayout()

        gridView?.frame = NSRect(x: 0, y: 0, width: view.frame.size.width, height: view.frame.size.height)
    }
}

Now, when I run this, the NSGridView fills up the whole view, but the checkbox is really off. As you can see in the image.

Also, I'd love for the content to not fill the whole cell, making it all look a tad more centered.

How can I solve this?

enter image description here

nsview swift macos
1 Answers

If you change the row alignment to .lastBaseline it will fix your issue of the vertical alignment of the NSButton and the NSTextField. If you want more spacing (I'm guessing that's what you mean with "I'd love for the content to not fill the whole cell"), you can use the columnSpacing and rowSpacing properties of the NSGridView. If you then also add instances of NSGridCell.emptyContentView around your "real" content, you should be able to achieve the following effect. enter image description here

This is new code after the changes I suggested:

class GeneralViewController: RootViewController {
    private var gridView: NSGridView?

    override func loadView() {
        super.loadView()

        let restaurantLabel = NSTextField()
        restaurantLabel.stringValue = "Restaurant"

        let restaurantButton = NSPopUpButton()
        restaurantButton.addItems(withTitles: ["A", "B", "C"])

        let updatesLabel = NSTextField()
        updatesLabel.stringValue = "Updates"
        updatesLabel.isEditable = false
        updatesLabel.isBordered = false
        updatesLabel.isBezeled = false

        let updatesButton = NSButton(checkboxWithTitle: "Automatically pull in updates from WordPress", target: nil, action: nil)

        let empty = NSGridCell.emptyContentView
        gridView = NSGridView(views: [
            [empty],
            [empty, restaurantLabel, restaurantButton, empty],
            [empty, updatesLabel, updatesButton, empty],
            [empty],
            [empty]
        ])
        gridView?.wantsLayer = true
        gridView?.layer?.backgroundColor = NSColor.red.cgColor
        gridView?.column(at: 0).xPlacement = .trailing
        gridView?.rowAlignment = .lastBaseline
        gridView?.columnSpacing = 20
        gridView?.rowSpacing = 20
                gridView?.setContentHuggingPriority(NSLayoutConstraint.Priority(rawValue: 600), for: .horizontal)
        gridView?.setContentHuggingPriority(NSLayoutConstraint.Priority(rawValue: 600), for: .vertical)

        view.addSubview(gridView!)
    }

    override func viewDidLayout() {
        super.viewDidLayout()

        gridView?.frame = NSRect(x: 0, y: 0, width: view.frame.size.width, height: view.frame.size.height)
    }
}
user_62320450
Related