自动版式:如何压缩复杂的弹出框

Bas*_*ian 5 uitableview uiscrollview uipopovercontroller container-view uicontainerview

如果您想尝试源代码(非常欢迎这样做),请查看我的Bitbucket存储库

我有一个弹出对话框,显示设置列表。这些设置在多个UITableViews中列出。UITableViews不可滚动,因为整体设置视图已经可以滚动了。此外,弹出对话框在垂直方向上应占据所需的屏幕数量,但应水平压缩。

因此,我构思了以下结构:

UIView => MySettingsViewController
- UIScrollView
  - UIView (Content View)
    - Container View1
      - UITableView (embedded) => MyTableViewController
    - Container View2
      - UITableView (embedded)
Run Code Online (Sandbox Code Playgroud)

通过Interface Builder组装结构,并使用Autolayout进行尺寸调整。

我同时拥有“滚动视图”,“内容视图”(我只是从一个开始)和“容器视图”到各自的超级视图(或布局指南)。我通过以下方式限制了内容视图的大小:

contentView.width == (topmost) UIView.width
contentView.height == 200 // removed at build time
Run Code Online (Sandbox Code Playgroud)

另外,我将表视图的大小设置为其内容大小,因为否则弹出窗口似乎为空:

UIView => MySettingsViewController
- UIScrollView
  - UIView (Content View)
    - Container View1
      - UITableView (embedded) => MyTableViewController
    - Container View2
      - UITableView (embedded)
Run Code Online (Sandbox Code Playgroud)

设置弹出窗口充满了内容,但是其大小并不完全正确:

在此处输入图片说明

为了解决这个问题,我尝试了以下无效的方法:

contentView.width == (topmost) UIView.width
contentView.height == 200 // removed at build time
Run Code Online (Sandbox Code Playgroud)

结论:压缩不起作用。

Bas*_*ian 0

所以我自己解决了这个问题,正如您在查看 Bitbucket 存储库时看到的那样。

布局现已固定在MyTableViewController和中MySettingsViewController。前一个现在看起来像这样:

class MyTableViewController: UITableViewController {

    var heightConstraint: NSLayoutConstraint?
    var tableViewEdgesConstraints: [NSLayoutConstraint]?

    override func viewWillAppear(animated: Bool) {
        super.viewWillAppear(animated)
        if let container = tableView.superview where tableViewEdgesConstraints == nil {
            layout(tableView, container, replace: ConstraintGroup()) { [unowned self] tableView, container in
                self.tableViewEdgesConstraints = tableView.edges == inset(container.edges, 0)
            }
        }
    }

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        if let heightConstraint = heightConstraint {
            if Int(heightConstraint.constant) != Int(tableView.contentSize.height) {
                heightConstraint.constant = self.tableView.contentSize.height
            }
        } else {
            layout(view, replace: ConstraintGroup()) { [unowned self] view in
                if (self.tableView.contentSize.height > 0) {
                    self.heightConstraint = view.height == self.tableView.contentSize.height
                }
            }
        }
    }
} 
Run Code Online (Sandbox Code Playgroud)

所以基本上,我将表格的高度限制为其内容的高度,并在内容的高度发生变化时更改约束。表格一布置好就完成此操作。此外,嵌套表视图通过其边缘固定到容器视图的边缘。我认为这是强制性的,因为我无法找到如何在 Interface Builder 中约束不同场景的两个视图。

一旦MySettingsViewController知道滚动视图的大小,就将其设置为内容视图框架的大小(可通过插座访问)。此外,为了使弹出窗口压缩,当高度发生变化时,设置控制器的preferredContentSize会相应地进行调整(如果忽略该条件,您可能会陷入布局无限循环。此外,我做了三件事,以便可以有一个围绕 MySettingsViewController 的导航控制器:

  1. 弹出窗口的宽度设置为固定值(否则有时会扩展到整个宽度)。
  2. presentedViewController 的preferredContentSize 需要同样设置。
  3. 我必须将滚动视图的插入设置为 0 以避免丑陋的垂直偏移 - 这个解决方案不是最佳的,因为它有点破坏了滚动视图体验。但它有效。

这是代码:

class MySettingsViewController: UIViewController {

    @IBOutlet weak var contentView: UIView!
    @IBOutlet weak var scrollView: UIScrollView!

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        scrollView.contentSize = contentView.frame.size

        if (preferredContentSize.height != scrollView.contentSize.height) {
            let newSize = CGSize(width: 400, height: scrollView.contentSize.height)
            preferredContentSize = newSize
            presentingViewController?.presentedViewController?.preferredContentSize = newSize
            scrollView.contentInset = UIEdgeInsetsMake(0, 0, 0, 0)
        }
    }
}
Run Code Online (Sandbox Code Playgroud)

这是结果:

在此输入图像描述