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

时间:2016-05-03 13:50:02

标签: ios swift uitableview user-interface uibutton

我正在以编程方式在Swift中为UITableViewCell创建多个按钮,并希望将它们的宽度设置为UITableViewCell的特定百分比宽度,以便它们耗尽所有空间。现在我在for循环中创建按钮(我希望能够创建可变数量的按钮)并且正在使用

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

其中button是UIButton,self是UITableViewCell,numberOfButtons显然是按钮的数量。我也尝试过:

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

以及使用/不使用.size和使用/不使用contentView的每个组合。然而,这些似乎不起作用,因为按钮太大了。有谁知道如何做到这一点?

注意:我不能在故事板中使用Autolayout,因为我正在创建可变数量的按钮。

4 个答案:

答案 0 :(得分:5)

你说:

  

注意:我可以在故事板中使用Autolayout,因为我正在创建可变数量的按钮。

您无法在Interface Builder中添加可变数量的按钮,但没有什么可以阻止您使用自动布局。您需要设置的基本自动布局限制是:

  • 将按钮设置为具有相同的宽度;
  • 设置按钮使其前导约束连接到上一个按钮的尾随约束;
  • 第一个按钮的前导约束应连接到容器视图;和
  • 最后一个按钮也应该将其尾部约束连接到容器。

因此,例如,在Swift 3中,您可以执行以下操作:

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

或者,在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

而且,除了按钮之间的固定间距外,您也可以使用UILayoutGuide(使导板的尺寸相同但按钮的宽度的百分比,无论如何都能实现更自然的间距超视的宽度)。

您还可以使用UIStackView,这是另一种在视图中均匀分布控件的好方法。

最重要的是,有很多方法可以使用autolayout实现这一目标。

答案 1 :(得分:1)

也许是因为您在单元格布局其子视图之前执行此操作,并且它的大小与Any-Any size class 600 * 600中设置的大小相同。

尝试使用layoutSubviews方法添加按钮,如下所示:

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

    // add your buttons here

}

答案 2 :(得分:1)

您好,有多种方法可以解决您的问题:

  1. 使用Autolayout,您可以在代码和StoryBoard中使用Autolayout ;-)。忍受我,我没有检查Autolayout的代码,但逻辑在这里......

    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)
    }
    
  2. 来源:https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/ProgrammaticallyCreatingConstraints.html https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/

    1. 使用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)
          }
      }
      
    2. 来源:http://snapkit.io/docs/

      我首选的版本是Snapkit,因为它比Autolayout更简洁。

答案 3 :(得分:1)

UIStackView正是您所需要的。看看下面的教程:

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