How can I add a list of offset checkboxes to an NSScrollView? - swift

Question

I have an NSScrollView that I am trying to populate with check boxes (NSButton / NSToggleButton). The number of checkboxes I add should be equal to a number of items in an array. This part is working.
The following code successfully adds the checkboxes to the scroll view, but they are all on top of each other. I am trying to add them, but offset from each other in a "list view" manner such as a tableview on iOS. Here's my code:
for calendar in self.allCalendars {
self.allCalendars.append(calendar as EKCalendar)
let checkbox = NSButton.init(checkboxWithTitle: calendar.title, target: self, action: #selector(self.checkboxDidChange))
checkbox.setButtonType(NSToggleButton)
self.checkboxArray.append(checkbox as NSButton)
self.addSubview(checkbox)
}
And here's a screenshot of the result:

Answer 1

Here is something that you could implement, it would change how you do your loop so that you have an index of each iteration, but it can help you calculate some sort of vertical spacing:
for i in 0 ..< allCalendars.count {
let margin: CGFloat = 5.0 // Or whatever you want the padding on the left to be
let vertSpacing: CGFloat = 10.0 // However much separation you want in between boxes
self.allCalendars.append(allCalendars[i] as EKCalendar)
let checkbox = NSButton.init(checkboxWithTitle: allCalendars[i].title, target: self, action: #selector(self.checkboxDidChange))
checkbox.setButtonType(NSToggleButton)
// Now you can set the frame of the checkbox within it's superview's coordinate system
// This calculates it based on the bounds.height, if you want to use a custom height, substitute that.
checkbox.frame = CGRect(x: margin, y: vertSpacing + (vertSpacing + checkbox.bounds.height)*CGFloat(i), width: checkbox.bounds.width, height: checkbox.bounds.height)
self.checkboxArray.append(checkbox as NSButton)
self.addSubview(checkbox)
}
Basically what that y-value vertSpacing + (vertSpacing + checkbox.bounds.height)*CGFloat(i) does is it starts the very first checkbox off with a y-pos of whatever you set your vertical spacing value to be, and then for every checkbox after, it will set it one vertical space value below the previous checkbox. This solution will assume that each checkbox is of the same height. You can set a custom height if you don't want to use the bounds.height value.