在 UITableViewController (Swift) 顶部添加按钮

Question

我正在尝试在 uitableview 控制器表视图的顶部添加一个按钮。 视图控制器有一个导航控制器和静态单元格，这就是为什么它是 uitableviewcontroller 而不是 uiviewcontroller 的原因。 现在我正在尝试在屏幕底部添加一个按钮，该按钮连接到导航控制器，以便它不会随表视图一起滚动。

我正在尝试制作类似于下面的内容。 它有一个顶部栏的导航控制器，一个带有静态单元格的表格视图，然后是一个按钮，但他们是如何制作按钮的？

图片： http : //postimg.org/image/ilsmqqrip/

谢谢！

更新：如何使用 Swift 将 uiviewcontroller 与带有静态单元格的 tableview 一起使用？

Answer 1

我发现容器视图在这种情况下非常有用！ 一个干净的解决方案，非常容易实施。

只需创建一个普通的 UIViewController，添加你的按钮和一个 ContainerView 作为这个 UIViewController 的子视图（下图中的中间部分）。 最后从 ContainerView 创建 Embed Segue 到你的 UITableViewController （右边的那个）。

这样您就可以使用静态单元格原型，而不仅限于同时使用 UITableView。

结果：

Answer 2

对此有更好的解决方案。 您可以通过禁用相应 Button 或任何用于浮动按钮的 UIView 的 Auto Layout(button.translatesAutoresizingMaskIntoConstraints = false) 属性来执行此操作：

斯威夫特 4

//create a button or any UIView and add to subview
let button=UIButton.init(type: .system)
button.setTitle("NEXT", for: .normal)
button.frame.size = CGSize(width: 100, height: 50)
self.view.addSubview(button)

//set constrains
button.translatesAutoresizingMaskIntoConstraints = false
if #available(iOS 11.0, *) {
     button.rightAnchor.constraint(equalTo: tableView.safeAreaLayoutGuide.rightAnchor, constant: -10).isActive = true
     button.bottomAnchor.constraint(equalTo: tableView.safeAreaLayoutGuide.bottomAnchor, constant: -10).isActive = true
} else {
     button.rightAnchor.constraint(equalTo: tableView.layoutMarginsGuide.rightAnchor, constant: 0).isActive = true
     button.bottomAnchor.constraint(equalTo: tableView.layoutMarginsGuide.bottomAnchor, constant: -10).isActive = true
}

Answer 3

我对UITableViewController和静态数据源做了类似的事情。 我在表格视图的页脚视图中添加了按钮。

为了使其与屏幕底部对齐，我需要在我的视图控制器中使用以下代码：

override func viewWillAppear(animated: Bool) {
        super.viewWillAppear(animated)

        // Make footerview so it fill up size of the screen
       // The button is aligned to bottom of the footerview 
       // using autolayout constraints
        self.tableView.tableFooterView = nil
        self.footerView.frame = CGRectMake(0, 0, self.view.frame.size.width, self.tableView.frame.size.height - self.tableView.contentSize.height - self.footerView.frame.size.height)
        self.tableView.tableFooterView = self.footerView
    }

简而言之，我调整了footerview的大小以占用table view的contentsize被移除后的所有剩余空间。 由于按钮与自动布局的 footerView 底部对齐，因此它将停留在屏幕底部。

故事板：

结果如下：

Answer 4

UITableViewController 将占据整个空间，因此您将无法添加按钮。 将基于 UITableViewController 的代码重构为 UIViewController 并手动添加 UITableView。 这样你就可以设置表格视图的大小并将按钮放在底部。

Answer 5

不幸的是 UITableViewController 有一个 tableView 作为它的顶级视图。 当然，如果您查看视图调试器，您可以看到 tableview 不是根视图。 因此，您可以以编程方式将按钮添加到 tableView 的窗口中。 如果事后必须这样做，这可能是在 UITableViewController 上添加顶级元素的最简单方法。 否则，如果您在初始设计中这样做，您可以为按钮使用容器视图，为 TableView 使用 UITableViewController。 这种方法的缺点是你最终会得到两个视图控制器，一个用于容器，一个用于表，并且通常需要在它们之间传递信息。 如果您使用 swift，您可以通过将 tableViewcontroller 嵌套在容器视图控制器类中来简化此操作。

如果你想在窗口中添加一个按钮，一旦你确定视图有一个窗口，你就可以懒惰地这样做。 请注意，按钮属于窗口而不是视图控制器，因此您有责任在视图控制器消失时将其删除。

    private weak var button: UIButton!
    ...
    override func didMove(toParentViewController parent: UIViewController?) {
        super.didMove(toParentViewController: parent)
        guard self.button == nil, let window = tableView.window else {
            return
        }
        let button = UIButton(frame: CGRect(x:0, y:40, width: 200, height: 20))
        button.setTitle("This is a red button", for: .normal)
        button.backgroundColor = UIColor.red
        window.addSubview(button)
        self.button = button
    }

    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)
        button?.removeFromSuperview()
    }

Answer 6

您需要做的就是将您的顶视图添加到navigationController.view如下所示：

self.navigationController?.view.addSubview(YOUR_TOP_VIEW)

因此，如果您需要在不随 tableView 滚动的 TableViewController 之上使用粘性按钮/视图等，请使用此方法。

Answer 7

第1步 ：-

将一个 uiview 拖放到 UITable 视图控制器（静态）它会自动粘在底部。

如果需要，您还可以在 UIView 中添加两个按钮...这取决于您的要求。

第2步 ：-

为 uiview 连接插座（outletView）

第 3 步：-

在 View Will Appear 中添加以下代码。

override func viewWillAppear(_ animated: Bool) {

    outletViewBottom.backgroundColor = .red
    tableView.addSubview(outletViewBottom)

    // set position
    outletView.translatesAutoresizingMaskIntoConstraints = false
    outletView.leftAnchor.constraint(equalTo: tableView.safeAreaLayoutGuide.leftAnchor).isActive = true
    outletView.rightAnchor.constraint(equalTo: tableView.safeAreaLayoutGuide.rightAnchor).isActive = true
    outletView.bottomAnchor.constraint(equalTo: tableView.safeAreaLayoutGuide.bottomAnchor).isActive = true
    outletView.widthAnchor.constraint(equalTo: tableView.safeAreaLayoutGuide.widthAnchor).isActive = true
    outletView.heightAnchor.constraint(equalToConstant: 50).isActive = true // specify the height of the view

}

第四步 ：-

现在运行代码...快乐编码。

Answer 8

这是一个 UIViewController，其中添加了一个 UITableView 作为子视图。 在右上角，您可以看到一个下拉菜单，上面写着内容：动态原型。 将其更改为静态单元格。