在UITableViewController（Swift）上添加按钮

Question

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

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

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

谢谢！

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

Answer 1

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

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

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

结果：

Answer 2

我使用UITableViewController和静态数据源做了类似的事情。我在桌面视图的页脚视图中添加了按钮。

要使其与屏幕底部对齐，我需要在viewcontroller中使用此代码：

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的大小以占用所有剩余的空间。由于按钮与footerView的底部对齐并具有自动布局，因此它将保留在屏幕的底部。

故事板：

结果如下：

Answer 3

有一个更好的解决方案。您可以通过禁用相应Button的Auto Layout（button.translatesAutoresizingMaskIntoConstraints = false）属性或任何UIView for floating按钮来执行此操作：

Swift 4

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

//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 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 View Controller（静态） 它会自动粘在底部。

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

第2步：-

连接uiview的插座（outletView）

第3步：-

将以下代码添加到“视图将显示”中。

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

}

第4步：-

现在运行代码...祝您编程愉快。

Answer 8

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