展开 UITableView 以显示堆栈视图中的所有单元格？答案

【问题标题】：Expand UITableView to show all cells in Stack View?展开 UITableView 以显示堆栈视图中的所有单元格？
【发布时间】：2016-06-22 21:47:03
【问题描述】：

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

我的视图树如下所示：

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

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

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

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

我怀疑这可能是需要调整的“堆栈视图”的一个方面，但我目前不确定。任何人都可以提出一个合适的方法吗？

【问题讨论】：

标签： ios swift uitableview uistackview

【解决方案1】：

我也遇到过同样的问题，并意识到您需要一个自定大小的表格视图。我偶然发现了这个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)
    }

}

【讨论】：

正是我需要的，谢谢。它为您解决一切问题！
这应该是公认的答案。谢谢@玛丽亚
你是圣人
谁能解释一下答案？

【解决方案2】：

UIStackView 将尽可能压缩视图，以抵消这种情况，为 UITableView 设置一个高度锚和宽度锚，或者为其高度和宽度设置优先级。这是一个工作示例，说明我们如何在堆栈视图中负责表格的尺寸。

实例化和集中定位 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。（只需要我们为堆栈视图设置这个属性，它的子视图只是继承行为。）

带有数据源代码的UITableView类

接下来我创建了一个用于演示的基本表类。

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
    }
}

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

最后，重要的东西。一旦我们将表添加到堆栈视图中，所有帧信息都将被忽略。所以我们需要最后两行代码来设置表格的宽度和高度，让 Auto Layout 可以理解。

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 以及其他人关于Auto Layout in general 的文章，这可能也会有所帮助。）

【讨论】：