Question

我想以编程方式在swift3中并排排列3个UIButtons，

无论设备如何，它们的宽度应相等。请提供有约束的详细信息代码。

这里我尝试了约束，所有按钮都在中心位置。这是我的代码，

 let addToWishListBtn: UIButton = {

    let btn = UIButton()
    btn.setTitle("Add to Wish List", for: UIControlState())
    btn.setImage(UIImage(named: "service_icon"), for: UIControlState())
    btn.setTitleColor(.black, for: UIControlState())
    btn.titleLabel?.font = UIFont.boldSystemFont(ofSize: 10)
    btn.addTarget(self, action: #selector(addToWishListBtnTarget), for: .touchUpInside)
    btn.imageEdgeInsets = UIEdgeInsetsMake(20, 50, 40, 0)
    btn.titleEdgeInsets = UIEdgeInsetsMake(20, 0, 0, 0)
    btn.backgroundColor = .yellow
    btn.translatesAutoresizingMaskIntoConstraints = false
    return btn
}()
func addToWishListBtnTarget() {
    print("add  to wish btn target")
}

let emailToFriendBtn: UIButton = {

    let btn = UIButton()
    btn.setTitle("Email to Friend", for: .normal)

    btn.setImage(UIImage(named:"service_icon"), for: .normal)
    btn.setTitleColor(.black, for: .normal)
    btn.titleLabel?.textAlignment = .center
    btn.titleLabel?.font = UIFont.boldSystemFont(ofSize: 10)
    btn.addTarget(self, action: #selector(emailToFriendBtnTarget), for: .touchUpInside)
    btn.imageEdgeInsets = UIEdgeInsetsMake(20, 50, 40, 0)
    btn.titleEdgeInsets = UIEdgeInsetsMake(20, 0, 0, 0)
    btn.translatesAutoresizingMaskIntoConstraints = false
    return btn
}()
func emailToFriendBtnTarget() {
    print(" email to friend target")
}

let shareBtn: UIButton = {

    let btn = UIButton()
    btn.setTitle("Share", for: UIControlState())
    btn.setImage(UIImage(named: "service_icon"), for: .normal)
    btn.setTitleColor(.black, for: UIControlState())
    btn.titleLabel?.font = UIFont.boldSystemFont(ofSize: 10)
    btn.addTarget(self, action: #selector(shareBtnTarget), for: .touchUpInside)
    btn.imageEdgeInsets = UIEdgeInsetsMake(20, 50, 40, 0)
    btn.titleEdgeInsets = UIEdgeInsetsMake(20, 0, 0, 0)
    btn.translatesAutoresizingMaskIntoConstraints = false
    btn.backgroundColor = .purple

    // button.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, 0)
    btn.backgroundColor = .green
    return btn
}()
func shareBtnTarget() {
    print("share btn target")
}



    view.addSubview(addToWishListBtn)``
    view.addSubview(emailToFriendBtn)
    view.addSubview(shareBtn)


    addToWishListBtn.topAnchor.constraint(equalTo: view.topAnchor, constant: 380).isActive = true
    addToWishListBtn.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 0).isActive = true
    addToWishListBtn.widthAnchor.constraint(equalToConstant: 125).isActive = true
    addToWishListBtn.heightAnchor.constraint(equalToConstant: 50).isActive = true

    emailToFriendBtn.topAnchor.constraint(equalTo: view.topAnchor, constant: 380).isActive = true
  //  addToWishListBtn.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 0).isActive = true
    emailToFriendBtn.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    emailToFriendBtn.widthAnchor.constraint(equalToConstant: 125).isActive = true
    emailToFriendBtn.heightAnchor.constraint(equalToConstant: 50).isActive = true

    addToWishListBtn.topAnchor.constraint(equalTo: view.topAnchor, constant: 380).isActive = true
    addToWishListBtn.rightAnchor.constraint(equalTo: view.rightAnchor, constant: 0).isActive = true
    addToWishListBtn.widthAnchor.constraint(equalToConstant: 125).isActive = true
    addToWishListBtn.heightAnchor.constraint(equalToConstant: 50).isActive = true

Answer 1

您需要提供以下约束。

btn1导致其超级视图
btn2导致btn1尾随
btn3导致btn2尾随
btn3落后于其超级视图
btn1等于btn2的宽度
btn2等于btn3的宽度
btn1超级视图
btn2超越其超级视图
btn3超级视图
对于所有3个按钮，您还需要给出高度限制。

您可以按constraintsWithVisualFormat或constraintWithItem提供约束。

修改

看看......

//all 3 buttons will be in views dict. let views = ["btn1" : btn1, "btn2" : btn2, "btn3": btn3]; // align btn1 from the top self.view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|-8-[btn1]", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: views)); // align btn2 from the top self.view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|-8-[btn2]", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: views)); // align btn3 from the top self.view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|-8-[btn3]", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: views)); //horizontal constraints self.view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|-8-[btn1]-8-[btn2]-8-[btn3]-8-|", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: views)); // height constraint if you want to give self.view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:[btn1(==30)]", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: views)); self.view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:[btn2(==30)]", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: views)); self.view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:[btn3(==30)]", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: views)); //equal width for all 3 btns self.view.addConstraint(NSLayoutConstraint.init(item: btn1, attribute: .width, relatedBy: .equal, toItem: btn2, attribute: .width, multiplier: 1.0, constant: 0)) self.view.addConstraint(NSLayoutConstraint.init(item: btn2, attribute: .width, relatedBy: .equal, toItem: btn3, attribute: .width, multiplier: 1.0, constant: 0))

Answer 2

您有两个选择

1）创造约束（小而长）

2）使用堆栈视图

如果您的应用运行ios9 +您可以使用UIStackView

以编程方式创建UIStackView 并添加3个按钮，它会相应地自动调整宽度

这是一个例子

let labelOne = UILabel(frame: CGRect(x: 0, y: 0, width: 200, height: 21))
labelOne.text = "Hello"
labelOne.backgroundColor = UIColor.red

let labelTwo = UILabel(frame: CGRect(x: 0, y: 0, width: 200, height: 21))
labelTwo.text = "There"
labelTwo.backgroundColor = UIColor.blue

let myStack = UIStackView(arrangedSubviews: [labelOne, labelTwo])

myStack.distribution = .fillEqually
myStack.axis = .horizontal

享受......

希望对你有所帮助

如何以编程方式在swift3中并排排列3个UIButtons

2 个答案: