添加多个 UI 元素并一起约束

Posted

技术标签:

【中文标题】添加多个 UI 元素并一起约束【英文标题】:Adding multiple UI Elements and Constrain Together 【发布时间】:2018-10-19 00:22:36 【问题描述】:

我有这样的 UIView 设置

UI 视图 UIScrollView (self.scrollView) UIView (self.contentView) LineChartView (self.chart) M13CheckBox [UIControl 的子集]

图表显示包括多条线,我打算用多个复选框来控制它们。但是,我似乎无法将复选框相互限制!

这是我的代码:

    var unconstrainedChecks = [M13Checkbox]()
    for year in years  // years = ["2015","2016","2017"]
        let checkbox = CustomizedCheckBox().checkbox
        checkbox.backgroundColor = .purple
        self.contentView.addSubview(checkbox)
        unconstrainedChecks.append(checkbox)
    
    for i in 0..<unconstrainedChecks.count - 1 
        print(i)
        let checkbox = unconstrainedChecks[i]
        let nextCheckbox = unconstrainedChecks[i+1]
        checkbox.snp.makeConstraints  (make) in
            if i == 0 
                make.top.equalTo(self.chart.snp.bottom).offset(20)
                make.width.height.equalTo(50)
                make.left.equalTo(self.contentView)
            
            make.bottom.equalTo(nextCheckbox.snp.top)
        

        nextCheckbox.snp.makeConstraints  (make) in
            make.width.height.equalTo(50)
            make.left.equalTo(self.contentView)
            make.top.equalTo(checkbox.snp.bottom)
        

    

CustomizedCheckBox 在哪里

class CustomizedCheckBox 
    let checkbox: M13Checkbox
    init() 
        checkbox = M13Checkbox()
        checkbox.setCheckState(.checked, animated: false)
        checkbox.stateChangeAnimation = .bounce(.fill)
        checkbox.secondaryTintColor =  UIColor(hexString: "47cae8")
        checkbox.secondaryCheckmarkTintColor = .white //checkmark
        checkbox.tintColor = UIColor(hexString: "53cce7")
    

我查看了 View Hierarchal Thing,根本看不到复选框。

【问题讨论】:

【参考方案1】:

我解决了这个问题。我需要将最后一个复选框限制为self.contentView.bottom

将此添加到nextCheckbox 循环中。

            if i + 1 == unconstrainedChecks.count - 1 
                make.bottom.equalTo(self.contentView.snp.bottom)
            

【讨论】:

以上是关于添加多个 UI 元素并一起约束的主要内容,如果未能解决你的问题,请参考以下文章

自动布局约束如何与 SwiftUI 框架一起使用 [重复]

在动画 UI 元素时暂时禁用/删除约束

UIButton 约束失败,但适用于 UILabel

Swift:将 SwiftUI 元素添加到 UIKit 项目:无法正确应用约束

自动布局约束不会设置为 SuperView 的边缘 [重复]

jQuery UI 可拖动 - 当内部元素大于父元素时,将内部元素约束在父元素中