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

Question

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

无论设备如何，它们的宽度都应该相等。请详细说明带有约束的代码。

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

 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 top to its superview

• btn2 top to its superview

• btn3 top to its superview

• 您还需要为所有 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

享受...

希望对你有帮助