使用编程约束在视图中创建 2 个视图

Question

我正在尝试向 CallOutView 添加 2 个视图。 pushButton 应该位于底部，静态高度为 20。然后 topView 应该填充其余部分。我尝试使用 SnapKit 以编程方式执行此操作。然而，似乎按钮只是填满了一切？我做错了什么？

       callOutView = UIView(frame: CGRectMake(-70+(self.frame.width/2), -65, 140, 60))
        callOutView!.backgroundColor = UIColor.clearColor()
        callOutView?.clipsToBounds = true
        callOutView?.layer.cornerRadius = 6
        self.addSubview(callOutView!)

        let topView = UIView()
        topView.backgroundColor = UIColor.whiteColor().colorWithAlphaComponent(0.8)
        callOutView?.addSubview(topView)


        let pushButton = UIButton()
        pushButton.backgroundColor = UIColor(rgba: "#09316e").colorWithAlphaComponent(0.8)
        pushButton.setTitle("Se Mere", forState: UIControlState.Normal)
        pushButton.setTitleColor(UIColor.whiteColor(), forState: UIControlState.Normal)
        pushButton.titleLabel?.font = UIFont.systemFontOfSize(8)
        callOutView?.addSubview(pushButton)

        topView.snp_makeConstraints { (make) -> Void in
            make.top.equalTo(callOutView!).offset(0)
            make.left.equalTo(callOutView!).offset(0)
            make.bottom.equalTo(pushButton).offset(0)
            make.right.equalTo(callOutView!).offset(0)
            make.height.equalTo(40)

        }

        pushButton.snp_makeConstraints { (make) -> Void in
            make.height.equalTo(20)
            make.top.equalTo(topView).offset(0)
            make.left.equalTo(callOutView!).offset(0)
            make.bottom.equalTo(0).offset(0)
            make.right.equalTo(callOutView!).offset(0)

        }

Answer 1

问题是有些约束相互冲突，这会使自动布局系统破坏其中的一些约束。

topView.snp_makeConstraints { (make) -> Void in
    ...
    make.bottom.equalTo(pushButton).offset(0)
    ...
}


pushButton.snp_makeConstraints { (make) -> Void in
    ...
    make.top.equalTo(topView).offset(0)
    ...
}

上面的两个约束告诉自动布局系统：

放置 topView 和 pushButton 并使顶边对齐。
放置 topView 和 pushButton，底边对齐。

如果给 topView 和 pushButton 不同的高度，这是不可能的。

另外，这显然不是你想要的。你要的是"place pushButton right below the topView".

这是修改后的代码，使 pushButton 位于 topView 的正下方：

topView.snp_makeConstraints { (make) -> Void in
    ...
    make.bottom.equalTo(pushButton.snp_top).offset(0)
    ...
}


pushButton.snp_makeConstraints { (make) -> Void in
    ...
    make.top.equalTo(topView.snp_bottom).offset(0)
    ...
}

使用编程约束在视图中创建 2 个视图

Creating 2 views in view using programatically contraints

ios

nslayoutconstraint

swift