如何将按钮放在 UITableView 上，它不会在 iOS 中随表格一起滚动

How to put buttons over UITableView which won't scroll with table in iOS

提问by Plan B

I want to put buttons over UITableViewwhich stays on same position of screen, won't scroll with UITableView. When I tried to addSubviewbuttons, they are displayed but scrolls with UITableView.

我想把按钮放在UITableView屏幕的相同位置，不会滚动UITableView。当我尝试addSubview按钮时，它们显示但滚动UITableView。

Reason to put buttons over UITableViewis to let user operate some action on it. I'm not talking about having buttons in cell. They are floating buttons which never moves their position.

将按钮放在上面的原因UITableView是让用户对其进行一些操作。我不是在谈论在单元格中有按钮。它们是从不移动位置的浮动按钮。

I'm using UITableViewController, and I don't want to use header or footer for this purpose. And also another some bar (UIToolbarfor instance) is not an option for me.

我正在使用UITableViewController，我不想为此使用页眉或页脚。还有另一个酒吧（UIToolbar例如）对我来说不是一个选择。

Thanks in advance.

提前致谢。

采纳答案by rmaddy

One solution to this is to extend UIViewControllerinstead of UITableViewController. You will need to add your own table view and set everything up. Then you can add your button's to the view controller's view instead of the table view.

对此的一种解决方案是扩展UIViewController而不是UITableViewController. 您将需要添加自己的表格视图并设置所有内容。然后你可以将你的按钮添加到视图控制器的视图而不是表视图。

回答by Peter Lapisu

You can do it also with UITableViewController(no need for ordinary UIViewController, which nests your table or VC)

你也可以用UITableViewController（不需要普通的UIViewController，它嵌套你的表或VC）

UPDATED iOS11+ using SafeAreas

使用 SafeAreas 更新 iOS11+

you want to use autolayout to keep the view on bottom

您想使用自动布局将视图保持在底部

{
    [self.view addSubview:self.bottomView];
    [self.bottomView setTranslatesAutoresizingMaskIntoConstraints:NO];
    UILayoutGuide * safe = self.view.safeAreaLayoutGuide;
    [NSLayoutConstraint activateConstraints:@[[safe.trailingAnchor constraintEqualToAnchor:self.bottomView.trailingAnchor],
                                              [safe.bottomAnchor constraintEqualToAnchor:self.bottomView.bottomAnchor],
                                              [safe.leadingAnchor constraintEqualToAnchor:self.bottomView.leadingAnchor]]];
    [self.view layoutIfNeeded];
}

and to make sure view is always on top

并确保视图始终位于顶部

- (void)viewDidLayoutSubviews {

    [super viewDidLayoutSubviews];

    [self.view bringSubviewToFront:self.bottomView];

}

THE PREVIOUS OLD SOLUTION

以前的旧解决方案

By scrolling the table, you need to adjust the position of the "floating" view and it will be fine

通过滚动表格，您需要调整“浮动”视图的位置，就可以了

If you are in a UITableViewController, just

如果您在 UITableViewController 中，只需

If you want to float the view at the top of the UITableView

如果要将视图浮动在 UITableView 的顶部

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    CGRect frame = self.floatingView.frame;
    frame.origin.y = scrollView.contentOffset.y;
    self.floatingView.frame = frame;

    [self.view bringSubviewToFront:self.floatingView];
}

If you want float the view on the bottom of the UITableView

如果你想在 UITableView 的底部浮动视图

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    CGRect frame = self.floatingView.frame;
    frame.origin.y = scrollView.contentOffset.y + self.tableView.frame.size.height - self.floatingView.frame.size.height;
    self.floatingView.frame = frame;

    [self.view bringSubviewToFront:self.floatingView];
}

I believe thats the real answer to your question

我相信那是你问题的真正答案

回答by Yossi

In case you are using navigation controller you can add the view to it:

如果您使用导航控制器，您可以向其添加视图：

[self.navigationController.view addSubview:yourView];

Example:

例子：

UIButton *goToTopButton = [UIButton buttonWithType:UIButtonTypeCustom];
goToTopButton.frame = CGRectMake(130, 70, 60, 20);
[goToTopButton setTitle:@"Scroll to top" forState:UIControlStateNormal];
[goToTopButton addTarget:self action:@selector(goToTop) forControlEvents:UIControlEventTouchUpInside];
[goToTopButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
[goToTopButton.layer setBorderColor:[[UIColor whiteColor] CGColor]];
goToTopButton.titleLabel.font = [UIFont fontWithName:@"Helvetica-Bold" size:13];
[self.navigationController.view goToTopButton];

回答by GingerBreadMane

If you want to show a static control view covering a table view, you have three options:

如果你想显示一个覆盖表视图的静态控制视图，你有三个选项：

1) Don't use UITableViewController. Instead create a UIViewController with a UITableView subview and put your Table View delegate/datasource code in the UIViewController. This option may or may not work depending on the architecture of your app. For example, if you're trying to implement a subclass a UITableViewController with a lot of custom logic, this isn't ideal.

1) 不要使用 UITableViewController。而是创建一个带有 UITableView 子视图的 UIViewController 并将您的表视图委托/数据源代码放在 UIViewController 中。此选项可能有效，也可能无效，具体取决于您的应用程序架构。例如，如果您尝试使用大量自定义逻辑实现 UITableViewController 的子类，这并不理想。

2) The WWDC 2011 method. See the WWDC 2011 Session 125 "UITableView Changes, Tips & Tricks" starting at 32:20. This method of adjusting the placement of the view whenever the table view scrolls was recommended by Apple before AutoLayout was introduced to iOS and before we had so many different screen sizes to deal with. I don't recommend it since you'll be managing positions for all the different screen sizes yourself.

2) WWDC 2011 方法。请参阅 32:20 开始的 WWDC 2011 Session 125“UITableView Changes, Tips & Tricks”。在 AutoLayout 引入 iOS 之前，在我们有这么多不同的屏幕尺寸需要处理之前，Apple 推荐了这种在 table view 滚动时调整视图位置的方法。我不推荐它，因为您将自己管理所有不同屏幕尺寸的位置。

3) I recommend using a UIViewController with a container view that will contain your UITableViewController.This way, you can keep the table view logic separate in the UITableViewController. The UIViewController hosts a 'dumb' container for the UITableViewController and it also holds the static control view. To do this, drag a UIViewController to your storyboard and drag a "Container View" inside it. Delete the UIViewController that comes automatically attached to the container view, and then attach your table view controller to be displayed in the container view by control dragging from the contrainer view to the table view controller and selecting "embed". Now, you can add static controls as subviews to the UIViewController that will be displayed on top of the table view. It will look something like this:

3）我建议使用带有包含 UITableViewController 的容器视图的 UIViewController。这样，您可以在 UITableViewController 中保持表视图逻辑独立。UIViewController 为 UITableViewController 托管一个“哑”容器，它还保存静态控件视图。为此，将一个 UIViewController 拖到您的故事板并在其中拖一个“容器视图”。删除自动附加到容器视图的 UIViewController，然后通过控件从容器视图拖动到表视图控制器并选择“嵌入”来附加要在容器视图中显示的表视图控制器。现在，您可以将静态控件作为子视图添加到将显示在表格视图顶部的 UIViewController。它看起来像这样：

I prefer this method because UIViewController can handle the control logic and the UITableViewController handles the table view logic. Some other answers here recommend adding the static control as a subview to a Navigation Controller or Window. These only work as long as you never add another view controller to the navigation controller or window.

我更喜欢这种方法，因为 UIViewController 可以处理控制逻辑，而 UITableViewController 处理表视图逻辑。这里的其他一些答案建议将静态控件作为子视图添加到导航控制器或窗口。这些仅在您从不向导航控制器或窗口添加另一个视图控制器时才有效。

回答by Esqarrouth

For swift :

对于快速：

override func scrollViewDidScroll(scrollView: UIScrollView){
    var frame: CGRect = self.floatingView.frame
    frame.origin.y = scrollView.contentOffset.y
    floatingView.frame = frame

    view.bringSubviewToFront(floatingView)
}

This function is called every time you scroll. Then inside you get the frame of your UIView and update its position depending on how much you scrolled. Your UIView is constantly moving with your UIScrollView so to the user it looks like its floating.

每次滚动时都会调用此函数。然后在里面你得到你的 UIView 的框架并根据你滚动的多少更新它的位置。您的 UIView 会随着您的 UIScrollView 不断移动，因此对用户来说它看起来像是浮动的。

回答by ManiaChamp

you can add buttons on UIWindow no need to extend it to UIViewController instead of UITableviewController.Just add buttons on window.

您可以在 UIWindow 上添加按钮，无需将其扩展到 UIViewController 而不是 UITableviewController。只需在窗口上添加按钮。

UIWindow *window = [[UIApplication sharedApplication] keyWindow];
UIButton *btn =[UIButton buttonWithType:UIButtonTypeCustom];
[btn setFrame:CGRectMake(60, 200,40, 60)];
[btn addTarget:self action:@selector(btnClicked:) forControlEvents:UIControlEventTouchUpInside];
[window addSubview:btn];

回答by Manuel Escrig

I've create a library in order to make it easier to add a floating button on top of a UITableView/UICollectionView/UIScrollView. Is called MEVFloatingButton.

我创建了一个库，以便更轻松地在UITableView/ UICollectionView/ UIScrollView顶部添加浮动按钮。称为MEVFloatingButton。

These are the steps for use it.

这些是使用它的步骤。

1- Import category file

1- 导入类别文件

#import "UIScrollView+FloatingButton.h"

#import "UIScrollView+FloatingButton.h"

2 - Add delegate and the optional delegate methods.

2 - 添加委托和可选的委托方法。

  @interface ViewController () <MEVFloatingButtonDelegate>

  #pragma mark - MEScrollToTopDelegate Methods

  - (void)floatingButton:(UIScrollView *)scrollView didTapButton:(UIButton *)button;

2 - Create a MEVFloatingButtonobject.

2 - 创建一个 MEVFloatingButton 对象。

MEVFloatingButton *button = [[MEVFloatingButton alloc] init];
button.animationType = MEVFloatingButtonAnimationFromBottom;
button.displayMode = MEVFloatingButtonDisplayModeWhenScrolling;
button.position = MEVFloatingButtonPositionBottomCenter;
button.image = [UIImage imageNamed:@"Icon0"];
button.imageColor = [UIColor groupTableViewBackgroundColor];
button.backgroundColor = [UIColor darkGrayColor];
button.outlineColor = [UIColor darkGrayColor];
button.outlineWidth = 0.0f;
button.imagePadding = 20.0f;
button.horizontalOffset = 20.0f;
button.verticalOffset = -30.0f;
button.rounded = YES;
button.hideWhenScrollToTop = YES;

4 - Assigned the button and delegate to the UITableView.

4 - 将按钮和委托分配给 UITableView。

[self.tableView setFloatingButtonView:button];
[self.tableView setFloatingButtonDelegate:self]

Demo results

演示结果

回答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 Buttonor any UIViewfor 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 user1010819

I just saw WWDC 2011 TableView,Tips and Tricks videos. Floating views are exactly the same thing.All you have to do is change frame back to original position on scrollViewDidScroll.

我刚刚看了 WWDC 2011 TableView、Tips and Tricks 视频。浮动视图是完全一样的事情。你所要做的就是将框架改回 scrollViewDidScroll 上的原始位置。

https://developer.apple.com/videos/wwdc/2011/

https://developer.apple.com/videos/wwdc/2011/

Check videos TableViews tips and tricks.

查看视频 TableViews 提示和技巧。