展开UITableView以在Stack View中显示所有单元格？ [英] Expand UITableView to show all cells in Stack View?

问题描述

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

I am having trouble getting my UITableView to appear full height in my Stack View.

我的视图树如下所示：

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

表格视图动态填充数据，工作正常。问题是一次只能看到一行，我必须滚动列表。我希望看到的是桌面视图需要尽可能多的垂直空间来显示所有单元格。

The table view is dynamically populated with data, which works fine. The issue is that only one row is visible at a time and I have to scroll through the list. What I would like to see happen is for the table view to take as much vertical room as it needs to display all the cells.

我确实尝试调整表高度如下，但这只是最终不再滚动的表，但即使它确实有效，我宁愿有更动态的东西：

I did try adjusting table height as follows, but that just ends up with table that no longer scrolls, though even if it did work I would rather have something more dynamic:

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

我怀疑它可能是堆栈视图的一个方面需要调整，但我现在还不确定。任何人都可以建议一个合适的方法吗？

I am suspecting that it is probably an aspect of the 'stack view' that needs adjusting, but I am not sure at this point. Can anyone suggest an appropriate way?

推荐答案

UIStackView会在任何地方压缩视图，以抵消此设置的高度锚点和宽度锚定到UITableView或其高度和宽度的优先级。下面是我们如何在堆栈视图中负责表的维度的工作示例。

A UIStackView will compress views wherever it can, to counteract this set a height anchor and width anchor to the UITableView or a priority for its height and width. Here is a working example of how we can be in charge of the dimensions of a table within a stack view.

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

First of all I've written a UIStackView extension so that I don't need to include all the code inside the view controller. Your positioning and setup will be different because you are placing your stack view inside a scroll view, but separating this code out means you can make your own adjustments.

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。 （只需要为堆栈视图设置此属性，其子视图只是继承行为。）

We don't set a size for the UIStackView only a position, it is the things contained within it that determine its size. Also note the setting of translatesAutoresizingMaskIntoConstraints to false in the UIStackView extension. (It is only required that we set this property for the stack view, its subviews simply inherit the behaviour.)

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

Next I've created a basic table class for demo purposes.

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

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

最后，重要的东西。只要我们将表添加到堆栈视图中，就会忽略所有帧信息。因此，我们需要最后两行代码，以自动布局可以理解的方式设置表格的宽度和高度。

Setup of stack view and table in view controller

Finally, the important stuff. As soon as we add our table to the stack view all the frame information is disregarded. So we need the final two lines of code to set the width and height for the table in terms that Auto Layout can understand.

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：。

Note that we use addArrangedSubview: not addSubview: when adding views to the stack view.

（我写了有关UIStackView的博文以及其他关于一般的自动布局这可能也有帮助。）

(I've written blogposts about UIStackView as well as others about Auto Layout in general that might help too.)

这篇关于展开UITableView以在Stack View中显示所有单元格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！