Swift: How do I arrange programatically added checkboxes? - ios

Question

I'm creating an iOS app using Swift, one with checkboxes. Currently, I've placed them inside a view (constrained and all), in the hopes that they would stay there and not mess up the rest of my app. Here's my code so far:
// UI
let lCheckboxHeight: CGFloat = 44.0;
let lCheckboxWidth: CGFloat = 180.0;
let waterSampleTreatmentTitles = ["i - Untreated", "ii - Acidified", "iii - Airfree", "iv - Filtered, Untreated","v - Filtered, Acidified","Stable Isotopes","Others"];
let lNumberOfCheckboxes = waterSampleTreatmentTitles.count
var lFrame = CGRectMake(0, 0, self.view.frame.size.width, lCheckboxHeight);
for (var counter = 0; counter < lNumberOfCheckboxes; counter++) {
let lCheckbox = Checkbox(frame: lFrame, title: waterSampleTreatmentTitles[counter], selected: false);
lCheckbox.mDelegate = self;
lCheckbox.tag = counter;
if (waterSampleTreatmentTitles[counter] == "i - Untreated" && self.flagUntreated == true){
lCheckbox.selected = true
}
else if (waterSampleTreatmentTitles[counter] == "ii - Acidified" && self.flagAcidified == true){
lCheckbox.selected = true
}
else if (waterSampleTreatmentTitles[counter] == "iii - Airfree" && self.flagAirfree == true){
lCheckbox.selected = true
}
else if (waterSampleTreatmentTitles[counter] == "iv - Filtered, Untreated" && self.flagFilterUntreat == true){
lCheckbox.selected = true
}
else if (waterSampleTreatmentTitles[counter] == "v - Filtered, Acidified" && self.flagFilterAcid == true){
lCheckbox.selected = true
}
else if (waterSampleTreatmentTitles[counter] == "Stable Isotopes" && self.flagStabIso == true){
lCheckbox.selected = true
}
else if (waterSampleTreatmentTitles[counter] == "Others" && self.flagOthers == true){
lCheckbox.selected = true
}
self.chemistryProductionWell.viewSampTreat.addSubview(lCheckbox);
lFrame.origin.y += lFrame.size.height;
}
Currently, this creates a list of checkboxes, which spills past the view I made, and just generally makes a mess of the app. The view is long enough for maybe two checkboxes vertically, but not eight.
How do I make it such that the checkboxes are arranged horizontally? I've tried replacing the following code:
lFrame.origin.y += lFrame.size.height;
With this:
lFrame.origin.x += lCheckboxWidth
But that doesn't take into account that the text for the checkboxes aren't the same length, and of course ignores the width restriction as well.
How do I make it such that if the checkbox length exceeds the view, it would drop down to the next line?
Thanks.

Answer 1

If the checkbox has no way to determine its own intrinsic size, you'll have to determine the width that each title would take, then factor that value into that checkbox's frame width.
However, wrapping a row of checkboxes will lead to a couple issues. First, the layout would need to be updated upon autorotation. Second, each row's checkboxes would not be vertically aligned with the previous row's checkboxes.
What you preferably want is a checkbox that can determine its own intrinsic size. Now you'd be able to take advantage of the Auto Layout system, and both the checkboxes, and their containing view could size themselves. This would have avoided the problem where the checkboxes are located outside their container's bounds (as well as having to hard code frames).
At that point, you could benefit from an easier solution like UIStackView, instead of having to code their layout on your own.
If you are using Storyboard, the ideal option would be be a checkbox that could not only self-size, but supported IBDesignable. You could then just setup outlets to IB checkboxes, instead of doing any of this in code.
If you aren't able to find a better control, then the easiest way to do what you ask would be as follows.
let lCheckboxHeight: CGFloat = 44.0
// Make the width as wide as necessary to accommodate the largest title
let lCheckboxWidth: CGFloat = 180.0
// Spacing between checkboxes or rows
let xSpacing: CGFloat = 10
let ySpacing: CGFloat = 10
// Current offset for next checkbox
var xOffset: CGFloat = 0
var yOffset: CGFloat = 0
for counter in 0..<lNumberOfCheckboxes {
var lFrame = CGRect(x: xOffset, y: yOffset, width: lCheckboxWidth, height: lCheckboxHeight);
// Advance offset for upcoming checkbox
xOffset += lCheckboxWidth + xSpacing
// Determine if there is enough room for another horizontal checkbox
let maxX = xOffset + lCheckboxWidth + xSpacing
if maxX >= chemistryProductionWell.viewSampTreat.bounds.maxX {
// Move to start of next row
xOffset = 0
yOffset += lCheckboxHeight + ySpacing
}
// ... Other code here
}
This still doesn't do anything to support autorotation, which is why you should look into an Auto Layout/Adaptive UI approach, and not directly work with frames.
As an aside, although you placed them in a viewSampTreat container, you had based their width on something other than their container, i.e. self.view.frame.size.width. This would have led to a clipping problem.