ios 在 UITableViewController (Swift) 顶部添加按钮

Add button on top of UITableViewController (Swift)

提问by zach

I am trying to add a button ontop of a uitableview controller table view. The view controller has a navigation controller and static cells, which is why it is a uitableviewcontroller and not a uiviewcontroller. Now I am trying to add a button at the bottom of the screen that is attached to the navigation controller so that it doesn't scroll with the table view.

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

I am trying to make something similar to what is below. It has a navigation controller for the top bar, a table view with static cells and then a button, but how did they do the button?

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

Image: http://postimg.org/image/ilsmqqrip/

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

Thanks!

谢谢！

UPDATE: How can I use a uiviewcontroller with a tableview with static cells using Swift?

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

回答by andrew-frank

I find Container Viewsvery useful in this scenario! A clean solution and very easy to implement.

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

Just create a normal UIViewController, add your button and a ContainerView as subviews of this UIViewController (the middle one in the image below). Finally create Embed Segue from ContainerView to your UITableViewController (the one on the right).

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

This way you can use static cell prototypes, not being limited only to UITableView at the same time.

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

Result:

结果：

回答by manukn

there is a better solution for this. you can do this by disabling the Auto Layout(button.translatesAutoresizingMaskIntoConstraints = false) property of the corresponding Button or any UIView for floating button:

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

Swift 4

斯威夫特 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
}

回答by knutigro

I did something similar with UITableViewControllerand a static datasource. I added the button in the footerview of my tableview.

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

To make it align to the bottom of the screen i needed this code in my 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
    }

In short, I resize the footerview to take up all the remaining space after the contentsize of the table view is removed. Since the button is aligned to the bottom of the footerView with autolayout, it will stay in the bottom of the screen.

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

The Storyboard:

故事板：

Here is the result:

结果如下：

回答by MirekE

The UITableViewController will take up the whole space, so you won't be able to add the button. Refactor your UITableViewController based code into UIViewController with UITableView manually added. This way you will be able to set the size of your table view and put the button to the bottom.

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

回答by Shahriar

all you need to do is to add your Top viewwhichever it is to the navigationController.viewlike so:

您需要做的就是添加您的顶视图，无论它是什么navigationController.view：

self.navigationController?.view.addSubview(YOUR_TOP_VIEW)

so if you need a sticky button/view etc... on top of TableViewController which does not scroll with tableView, use this approach.

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

回答by iOS Legend

Step 1 :-

第1步 ：-

Drag and drop one uiview to UITable View Controller (Static) Automatically it sticks to the bottom.

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

If you need to, you can also add two buttons inside UIView... It depends on your requirements.

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

Step 2 :-

第2步 ：-

Connect the outlet for uiview (outletView)

为 uiview 连接插座（outletView）

Step 3 :-

第 3 步：-

Add this below code in View Will Appear.

在 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

}

Step 4 :-

第四步 ：-

Now run the code... Happy coding.

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

回答by Josh Homann

Unfortunately UITableViewController has a tableView as its top level view. Of course if you look in the view debugger you can see that the tableview is not the root view. Therefore you can add the buttons to the tableView's window programatically. If you have to do it after the fact, this is probably the easiest way to add a top level element over a UITableViewController. Otherwise if you are doing it in the initial design, you can use container view for your buttons and a UITableViewController for the TableView. The downside of this approach is you end up with two view controllers, one for the container and one for the table and its often necessary to pass information back and for between them. If you are using swift you can simplify this by nesting the tableViewcontroller inside the container view controller class.

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

If you want to add a button to the window, you can do this lazily once you are sure that the view has a window. Note that the buttons belong to the window and not to the view controller, so its your responsibility to remove them when the view controller disappears.

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

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

回答by pranjalsatija

Here is a UIViewController, with a UITableView added as a subview. At the top right, you can see a dropdown that says Content: Dynamic Prototypes. Change it to Static Cells.

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