如何安排3個UIButtons並排側swift3編程

Question

我想安排3個UIButtons並排側swift3編程，

他們應該是平等的寬度，無論設備。請詳細說明限制條件。

這裏我已經試過約束，所有的按鈕都在中心在一起。這是我的代碼，

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 

享受...

希望它可以幫助你