2017-07-19 30 views
-1

我想安排3个UIButtons并排侧swift3编程,如何安排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 

this is three button picture

+0

您尝试过目前为止以及您遇到的问题...请上传代码 –

+0

pl。看看编辑后的答案。 –

回答

1

您需要提供以下限制条件。

  • BTN1导致它的父

  • BTN2导致BTN1尾随

  • btn3导致BTN2尾随

  • btn3后到它的父

  • BTN1等于宽度BTN2

  • btn2等宽至btn3

  • BTN1顶部,它的父

  • BTN2顶部,它的父

  • btn3顶部,它的父

  • 所有3个按钮,你还需要给予高度的限制。

您可以通过constraintsWithVisualFormatconstraintWithItem给出约束条件。

编辑:

看看...

//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)) 
+0

请再次阅读代码 –

+0

请在此处填写代码,更多详情 –

+0

你能帮我回答这个问题吗?我想通过点击按钮来检测tableview单元格中的一个按钮。这里是链接https://stackoverflow.com/questions/48970198/how-to-detect-one-button-in-tableview-cell?noredirect=1#comment84948065_48970198 –

0

你有两个选择

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 

享受...

希望它可以帮助你

+0

请再次阅读代码。因为我新贴了 –

+0

兄弟,这是不行的 –

+0

什么是输出? , –