扩展 UITableView 以显示 Stack View 中的所有单元格？

Question

我无法让我的 UITableView 在我的堆栈视图中显示全高。

我的视图树如下所示：

- View
  - Scroll View
    - Stack View
      - Table View
      - Image View
      - Map View

table 视图动态填充数据，效果很好。问题是一次只能看到一行，我必须滚动列表。我希望看到的是 table 视图占用尽可能多的垂直空间来显示所有单元格。

我确实尝试按如下方式调整 table 高度，但结果是 table 不再滚动，尽管即使它确实有效，我还是希望有一些更动态的东西：

override func viewDidAppear(animated: Bool) {
    super.viewDidAppear(animated)        
    self.detailsTableView.frame.size.height = 200
}

我怀疑这可能是 'stack view' 的一个方面需要调整，但我现在不确定。谁能推荐一个合适的方法？

Answer 1

UIStackView 将尽可能压缩视图，以抵消此设置 UITableView 的高度锚点和宽度锚点或其高度和宽度的优先级。这是一个工作示例，说明我们如何在堆栈视图中管理 table 的维度。

用于实例化和集中定位 UIStackView 的扩展

首先，我编写了一个 UIStackView 扩展，这样我就不需要在视图控制器中包含所有代码。您的定位和设置会有所不同，因为您将堆栈视图放在滚动视图中，但将此代码分开意味着您可以进行自己的调整。

extension UIStackView {
    
    convenience init(axis:UILayoutConstraintAxis, spacing:CGFloat) {
        self.init()
        self.axis = axis
        self.spacing = spacing
        self.translatesAutoresizingMaskIntoConstraints = false
    }
    
    func anchorStackView(toView view:UIView, anchorX:NSLayoutXAxisAnchor, equalAnchorX:NSLayoutXAxisAnchor, anchorY:NSLayoutYAxisAnchor, equalAnchorY:NSLayoutYAxisAnchor) {
        view.addSubview(self)
        anchorX.constraintEqualToAnchor(equalAnchorX).active = true
        anchorY.constraintEqualToAnchor(equalAnchorY).active = true
        
    }
    
}

我们不只是为 UIStackView 设置一个位置的大小，而是其中包含的东西决定了它的大小。还要注意在 UIStackView 扩展中将 translatesAutoresizingMaskIntoConstraints 设置为 false。（只需要我们为堆栈视图设置这个属性，它的子视图简单地继承行为。）

UITableViewclass附数据源代码

接下来我创建了一个基本的 table class 用于演示目的。

class MyTable: UITableView, UITableViewDataSource {
    let data = ["January","February","March","April","May","June","July","August","September","October","November","December"]
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return data.count
    }
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCellWithIdentifier("SauceCell", forIndexPath: indexPath)
        cell.textLabel?.text = data[indexPath.row]
        return cell
    }
}

在视图控制器中设置堆栈视图和table

最后，重要的事情。一旦我们将 table 添加到堆栈视图，所有帧信息都将被忽略。所以我们需要最后两行代码来设置 table 自动布局可以理解的宽度和高度。

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        let table = MyTable(frame: CGRect(x: 0, y: 0, width: view.frame.width, height: view.frame.height))
        table.registerClass(UITableViewCell.self, forCellReuseIdentifier: "SauceCell")
        table.dataSource = table

      
        let stack = UIStackView(axis: .Vertical, spacing: 10)
        stack.anchorStackView(toView: view, anchorX: stack.centerXAnchor, equalAnchorX: view.centerXAnchor, anchorY: stack.centerYAnchor, equalAnchorY: view.centerYAnchor)
        
        stack.addArrangedSubview(table)

        
        table.widthAnchor.constraintEqualToAnchor(view.widthAnchor, multiplier: 1).active = true
        table.heightAnchor.constraintEqualToAnchor(view.heightAnchor, multiplier: 0.5).active = true
        
    }
    
    
}

请注意，我们在向堆栈视图添加视图时使用addArrangedSubview: 而不是 addSubview:。

（我写了 blogposts about UIStackView as well as others about Auto Layout in general 可能也有帮助。）

Answer 2

我遇到了同样的问题，并意识到您需要一个自动调整大小的 table 视图。我偶然发现了这个 answer 并创建了一个像@MuHAOS 建议的子类。我没有遇到任何问题。

final class IntrinsicTableView: UITableView {

    override var contentSize: CGSize {
        didSet {
            invalidateIntrinsicContentSize()
        }
    }


    override var intrinsicContentSize: CGSize {
        layoutIfNeeded()
        return CGSize(width: UIView.noIntrinsicMetric, height: contentSize.height)
    }

}

扩展 UITableView 以显示 Stack View 中的所有单元格？

Expand UITableView to show all cells in Stack View?

uitableview

ios

swift

uistackview

用于实例化和集中定位 UIStackView 的扩展

UITableViewclass附数据源代码

在视图控制器中设置堆栈视图和table