ios - Swift:如何安排以编程方式添加的复选框？

Question

我正在使用 Swift 创建一个带有复选框的 iOS 应用程序。目前，我已将它们放置在一个 View 中(受限和全部)，希望它们能留在那里而不是弄乱我的应用程序的其余部分。到目前为止，这是我的代码:

// 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;
}

目前，这会创建一个复选框列表，它会溢出我创建的 View ，并且通常会使应用程序变得一团糟。 View 足够长，可以垂直放置两个复选框，但不能容纳八个。

如何使复选框水平排列？我尝试替换以下代码:

lFrame.origin.y += lFrame.size.height;

有了这个:

lFrame.origin.x += lCheckboxWidth

但这并没有考虑到复选框的文本长度不同，当然也忽略了宽度限制。

如果复选框的长度超过 View ，我该如何做到这一点，它会下降到下一行？

谢谢。

Answer 1

如果复选框无法确定其自身的固有大小，则您必须确定每个标题的宽度，然后将该值计入该复选框的框架宽度。

但是，包裹一行复选框会导致一些问题。首先，布局需要在自动旋转时更新。其次，每行的复选框不会与前一行的复选框垂直对齐。

您最好想要的是一个可以确定其自身固有大小的复选框。现在您可以利用自动布局系统，复选框及其包含的 View 可以自行调整大小。这可以避免复选框位于其容器边界之外的问题(以及必须对框架进行硬编码)。

到那时，您可以从更简单的解决方案中受益，例如 UIStackView ，而不必自己编写布局代码。

如果您使用 Storyboard，理想的选择是一个复选框，它不仅可以自行调整大小，而且支持 IBDesignable。然后，您可以只设置 IB 复选框的导出，而不是在代码中执行任何这些操作。

如果您找不到更好的控件，那么按照您的要求执行操作的最简单方法如下。

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
}

这仍然没有做任何事情来支持自动旋转，这就是为什么您应该研究自动布局/自适应 UI 方法，而不是直接使用框架。

顺便说一句，尽管您将它们放在 viewSampTreat 中容器，你已经将它们的宽度基于它们容器以外的东西，即 self.view.frame.size.width .这会导致裁剪问题。