Swift以编程方式创建宽度百分比

Question

I am programmatically creating multiple buttons in Swift for a UITableViewCell, and would like to set their widths to be a certain percentage width of the UITableViewCell so that they use up all of the space. Right now I am creating the buttons in a for loop (I want to be able to create a variable amount of buttons) and am using

button.buttonWidth = self.contentView.frame.width / numberOfButtons

where button is a UIButton and self is a UITableViewCell and numberOfButtons is obviously the number of buttons. I have also tried:

button.buttonWidth = self.frame.size.width / numberOfButtons

and every combination of using/not using .size and using/not using contentView. These don't seem to work, however, as the buttons are too big. Anyone know how to accomplish this?

NOTE: I CAN'T use Autolayout in the storyboard, as I'm creating a variable number of buttons.

Answer 1

You say:

NOTE: I CAN'T use Autolayout in the storyboard, as I'm creating a variable number of buttons.

You can't add the variable number of buttons right in Interface Builder, but there's nothing to stop you from using autolayout. The basic autolayout constraints you need to set up are:

• Set buttons to have same width;
• Set buttons to have their leading constraint connected to the previous button's trailing constraint;
• The first button should have its leading constraint connected to the container view; and
• The last button should have its trailing constraint connected to the container, too.

So, for example, in Swift 3, you could do something like:

var previousButton: UIButton?
for _ in 0 ..< count {
    let button = ...
    button.translatesAutoresizingMaskIntoConstraints = false            
    view.addSubview(button)

    // if no "previous" button, hook leading constraint to its superview;
    // otherwise hook leading constraint and width to previous button

    if previousButton == nil {
        button.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 5).isActive = true
    } else {
        NSLayoutConstraint.activate([
            button.leadingAnchor.constraint(equalTo: previousButton!.trailingAnchor, constant: 5),
            button.widthAnchor.constraint(equalTo: previousButton!.widthAnchor, constant: 5)
        ])
    }

    // add vertical constraints

    NSLayoutConstraint.activate([
        button.topAnchor.constraint(equalTo: view.topAnchor, constant: 50),
        view.bottomAnchor.constraint(equalTo: button.bottomAnchor, constant: 5)
    ])

    previousButton = button
}

// make sure to hook last button's trailing anchor to superview, too

view.trailingAnchor.constraint(equalTo: previousButton!.trailingAnchor, constant: 5).isActive = true

Or, in Swift 2:

var previousButton: UIButton?
for _ in 0 ..< buttonCount {
    let button = ...
    button.translatesAutoresizingMaskIntoConstraints = false            
    view.addSubview(button)

    // if no "previous" button, hook leading constraint to its superview;
    // otherwise hook leading constraint and width to previous button

    if previousButton == nil {
        button.leadingAnchor.constraintEqualToAnchor(view.leadingAnchor, constant: 5).active = true
    } else {
        NSLayoutConstraint.activateConstraints([
            button.leadingAnchor.constraintEqualToAnchor(previousButton!.trailingAnchor, constant: 5),
            button.widthAnchor.constraintEqualToAnchor(previousButton!.widthAnchor, constant: 5)
        ])
    }

    // add vertical constraints

    NSLayoutConstraint.activateConstraints([
        button.topAnchor.constraintEqualToAnchor(view.topAnchor, constant: 5),
        view.bottomAnchor.constraintEqualToAnchor(button.bottomAnchor, constant: 5)
    ])

    previousButton = button
}

// make sure to hook last button's trailing anchor to superview, too

view.trailingAnchor.constraintEqualToAnchor(previousButton!.trailingAnchor, constant: 5).active = true

And, instead of fixed spacing between the buttons, you also could use UILayoutGuide , too (making the guides the same size as each other but a percent of the width of the buttons, achieving a more natural spacing regardless of the width of the superview).

You also can use UIStackView , which is another great way to get controls evenly spaced in a view.

Bottom line, there are many ways to achieve this using autolayout.

Answer 2

Maybe because you're doing this before the cell layouts its subviews and it's size is the same as size set in Any-Any size class 600 * 600.

Try doing adding your buttons in layoutSubviews method, like this:

override func layoutSubviews() {
    super.layoutSubviews()
    self.layoutIfNeeded()

    // add your buttons here

}

Answer 3

Hi there is multiple ways of solving your problem:

1. Using Autolayout, you can using Autolayout in code and in StoryBoard ;-). Bear with me, I didn't check the code of Autolayout but the logic is here…

    let button1: UIButton!, button2: UIButton!, button3: UIButton! convenience init() { self.init(frame:CGRectZero) contentView.addSubview(button1) contentView.addSubview(button2) contentView.addSubview(button3) button1.translatesAutoresizingMaskIntoConstraints = false button2.translatesAutoresizingMaskIntoConstraints = false button3.translatesAutoresizingMaskIntoConstraints = false addConstraint( item: button1, attribute: .Left, relatedBy: .Equal, toItem: self, attribute: .Left, multiplier: 1, constant: 8) ) addConstraint( item: button2, attribute: .Left, relatedBy: .Equal, toItem: button1, attribute: .Right, multiplier: 1, constant: 8) ) addConstraint( item: button1, attribute: .Left, relatedBy: .Equal, toItem: button2, attribute: .Right, multiplier: 1, constant: 8) } 

Source: https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/ProgrammaticallyCreatingConstraints.html https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/

2. Using Snapkit

    let button1: UIButton!, button2: UIButton!, button3: UIButton! override init(style: UITableViewCellStyle, reuseIdentifier: String?) { super.init(style: style, reuseIdentifier: reuseIdentifier) button1 = UIButton() button1.setTitle("Button 1", forState: .Normal) contentView.addSubview(button1) button1.snp_makeConstraints { (make) in make.bottom.equalTo(contentView.snp_botton) make.left.equalTo(contentView.snp_left) make.height.equalTo(20) } button2 = UIButton() button2.setTitle("Button 2", forState: .Normal) contentView.addSubview(button2) button2.snp_makeConstraints { (make) in make.bottom.equalTo(contentView.snp_botton) make.left.equalTo(button2.snp_right) make.height.equalTo(20) } button1 = UIButton() button1.setTitle("Button 3", forState: .Normal) contentView.addSubview(button2) button1.snp_makeConstraints { (make) in make.bottom.equalTo(contentView.snp_botton) make.left.equalTo(button2.snp_right) make.height.equalTo(20) } } 

Source: http://snapkit.io/docs/

My preferred version is Snapkit because it is less verbose than Autolayout.

Answer 4

UIStackView is exactly what you need. Check out my tutorial below:

http://www.raizlabs.com/dev/2016/04/uistackview/