UITableView 的“反弹区域”中的浅灰色背景

Posted 2023-03-12

【中文标题】UITableView 的“反弹区域”中的浅灰色背景

【英文标题】：Light gray background in "bounce area" of a UITableView

【发布时间】：2009-07-22 15:46:30

【问题描述】：

Apple 的 iPhone 应用程序（例如 Music 和 Contants）在 UITableView 中使用搜索栏。当您向下滚动以使搜索栏向下移动时，滚动视图内容上方的空白区域具有浅灰色背景色（参见屏幕截图）。

（请注意，搜索栏顶部有一条稍暗的边缘线。默认的 UISearchBar 不存在该边缘线，但子类化应该会解决这个问题。）

我尝试设置 UITableView 的背景颜色，但这也会影响行。有谁知道如何达到这个效果？我是否必须重写实现 drawRect: 还是有内置方法？

【问题讨论】：

相关：***.com/questions/1114587/…

【参考方案1】：

设置透明胶片不利于性能。你想要的是搜索栏上方的灰色区域，但它应该仍然是超出列表末尾的白色区域。

您可以将子视图添加到位于内容上方的 UITableView。

CGRect frame = self.list.bounds;
frame.origin.y = -frame.size.height;
UIView* grayView = [[UIView alloc] initWithFrame:frame];
grayView.backgroundColor = [UIColor grayColor];
[self.listView addSubview:grayView];
[grayView release];

如果你愿意，你可以在视图中添加更多花哨的东西，可能是淡入淡出，或者是分隔线，而无需子类化 UISearchBar。

【讨论】：

如果单元格数超出一次可以显示的范围，这对于表格的底部效果不佳。您必须考虑表格中显示的所有单元格的高度以及它们之间的分隔符。

【参考方案2】：

这是我最喜欢的技巧之一。

UIView *topview = [[[UIView alloc] initWithFrame:CGRectMake(0,-480,320,480)] autorelease];
topview.backgroundColor = [UIColor colorWithRed:226.0/255.0 green:231.0/255.0 blue:238.0/255.0 alpha:1];

[self.tableView addSubview:topview];

基本上，您正在创建一个屏幕大小的大视图，并将其放置在内容区域的“上方”。你永远无法向上滚动过去。

不用担心 320x480 像素的 UIView 对内存的影响，它不会消耗任何显着的内存，因为 CALayer 没有任何有意义的内容。

注意：当“接受”的答案如此简单时，为什么这个答案是相关的？为什么不在表格视图上设置backgroundView？这是因为，在原始问题中显示的联系人应用程序的情况下，表格视图“上方”的区域与表格视图“下方”的区域具有不同背景颜色（浅蓝色） （白色的）。这种技术可以让您在表格视图的上方和下方拥有两种不同的颜色，这是简单的背景无法实现的。

编辑 1/2018： 正如 cmets 中的 Tom 所指出的，这个答案已经很老了，并假设所有 ios 设备都具有相同的屏幕尺寸（看起来很疯狂，但 2009 年的情况就是这样我回答了这个）。我在这里介绍的概念仍然有效，但您应该使用UIScreen.main.bounds 来确定实际 屏幕尺寸，或者您可以使用一些花哨的自动布局东西（欢迎提出建议）。我不建议在另一个答案中使用tableView.bounds，因为通常在viewDidLoad 中，视图的大小不一定是控制器调整它们大小后它们将变为的大小。有时它们以 0x0 开始！

【讨论】：

这是大多数应用程序所做的。然而，可以通过非常快速地轻弹滚动视图来滚动超过整个屏幕，这就是为什么我更喜欢将彩色视图静态放置在 tableview 后面并让 tableview 的背景透明（但使用纯背景单元格视图。

这假设所有 iOS 设备都是 320×480，这已经有一段时间了:-)

@TomGilder 更新了答案。

但是如果你对 tableview 有刷新控制呢？

【参考方案3】：

扩展HusseinB's suggestion:

斯威夫特 3

let bgView = UIView()
bgView.backgroundColor = UIColor.white
self.tableView.backgroundView = bgView

目标 C

UIView *bgView = [UIView new];
bgView.backgroundColor = [UIColor whiteColor];
[self.tableView setBackgroundView:bgView];

【参考方案4】：

从 iOS 7 开始，您可以通过更改 tableview 背景视图来解决这个问题。

[self.tableView setBackgroundView:view];

使视图的背景颜色与父视图颜色相同。

【参考方案5】：

此代码适用于 Swift fot UITableView:

var frame = self.tableView.bounds
frame.origin.y = -frame.size.height
frame.size.height = frame.size.height
frame.size.width = UIScreen.mainScreen().bounds.size.width
let blueView = UIView(frame: frame)
blueView.backgroundColor = UIColor.headerBlueColor()
self.tableView.addSubview(blueView)

【讨论】：

这种方法只适用于改变反弹区域的背景颜色。这正是我所需要的。谢谢！

像魅力一样工作！ swift 3 更新：frame.size.width = UIScreen.main.bounds.size.width 谢谢

【参考方案6】：

在 Swift 中（在 iOS9 上测试）

    let backView = UIView(frame: self.tableView.bounds)
    backView.backgroundColor = UIColor.clearColor() // or whatever color
    self.tableView.backgroundView = backView

【讨论】：

我不需要在 init 上设置视图框架，这对我有用，因为 tableview 大小是稍后计算的 :)

【参考方案7】：

最简单的解决方案

在表格视图的弹跳区域的底部和顶部创建不同颜色的最简单方法是设置表格视图的 tableHeaderBackgroundColor 键。这样做可以设置顶部颜色。我不确定，但也许页脚还有另一个键，看看。如果您没有找到任何东西，您只需将表格视图的背景设置为您想要在底部显示的颜色。上面你可以看到一个示例代码：

self.table.setValue(UIColor.blue , forKey: "tableHeaderBackgroundColor")

希望对您有所帮助。如果是，请让其他人知道这种简单的方法放弃答案:)

【讨论】：

也许您想将self.tableView.backgroundColor=bottomColor; 添加到您的答案代码中，以便人们将两者合二为一。我正在使用这种组合，它非常适合我，干杯

这不是公共财产，如果提交，应用可能会被拒绝

@Emil 好吧，我已经使用此密钥提交了至少 3 个应用程序，我没有任何问题。无论如何，您也可以在表格的“背景视图”中放置一个具有所需背景的 UIView，它会解决问题。

【参考方案8】：

我只找到了一种方法来做到这一点。您必须将 UITableView 的 backgroundColor 设置为透明，将单元格的 contentView 的 backgroundColor 设置为您希望实际单元格的颜色，然后至关重要的是，您必须让浅灰色出现在 UITableView 后面。最后一步，您可以通过设置 UIWindow 的 backgroundColour 或包含的任何内容或您的 tableViewController 来完成。

所以，假设你有一个从 UITableViewController 派生的视图控制器，在 -(void)viewDidLoad 方法中插入这些行：-

// sets the background of the table to be transparent
self.tableView.backgroundColor = [UIColor colorWithWhite:1.0 alpha:0.0];
// assuming we are inside a navigation or tab controller, set the background
self.parentViewController.view.backgroundColor = [UIColor lightGrayColor];

然后在 tableView:cellForRowAtIndexPath: 创建新单元格的部分内，添加：-

// set an opaque background for the cells 
cell.contentView.backgroundColor = [UIColor whiteColor];

【讨论】：

使用透明背景是最后的手段。它将极大地影响滚动性能。只需向 UIListView 添加灰色子视图即可获得所需的效果，更可定制，并且对性能没有不良影响。

就像我说的，我尝试了所有明显的方法来实现这种效果，就像其他答案所暗示的所有事情一样，但没有一个有效。我是唯一提供有效解决方案的人，不，它根本不会影响滚动性能 - 我已经在模拟器和设备上尝试过。但是由于您的反对票，我的解决方案将保存票作为所有错误的答案。

七年后，我喜欢这个解决方案！给我点赞。谢谢@U62 :-) -- 埃里克

【参考方案9】：

我自己也遇到了这个问题，找到了解决办法。

原因

我使用Spark Inspector 来检查表格视图的布局 - 这确实很有帮助。

问题是，在这种情况下 UITableView 有 3 个子视图：

UITableViewWrapperView UIView - backgroundColor 设置为浅灰色 UISearchBar

当您向下滑动 tableview 内容时，第二个子视图高度会动态增加以填充 UITableViewWrapperView 和 UITableView 框架原点之间的空间。

解决方案

设置backgroundColor 或backgroundView 属性不会影响第二个子视图。 您需要做的是找到第二个视图并更改其颜色，如下所示：

if (_tableView.subviews.count > 1) 
    _tableView.subviews[1].backgroundColor = THE_TARGET_COLOR;

在我的情况下，我需要所有视图都是白色的，所以我使用了以下内容，这不太容易受到 Apple 未来更改 UITableView 视图层次结构的影响：

for (UIView *subview in _tableView.subviews) 
    subview.backgroundColor = [UIColor whiteColor];

【参考方案10】：

我会给你最好的方法来做到这一点。 首先在界面生成器中将表格视图的背景颜色设置为您想要的颜色。 然后响应 UITableView 委托tableView:willDisplayCell:ForIndexPath: 方法 像这样

- (void)tableView:(UITableView*)tableView willDisplayCell:(UITableViewCelll*)cell forIndexPath:(NSINdexPath*)indexPath

     [cell setBackgroundColor:[UIColor whiteColor]];

另一种方法是： 在ViewDidLoad 方法（或任何你喜欢的地方）中，将tableView 背景颜色设置为清除颜色，如下所示：

self.tableView.backgroundColor = [UIColor clearColor];

然后将superview颜色设置为白色

self.tableView.superview.backgroundColor = [UIColor whiteColor];

【讨论】：

我同意设置 uitableview 的 backgroundColor 是最好的方法——这会影响我所做的所有测试中的反弹区域。对于第二种方法， self.tableView.superview 对于 uitableviewcontrollers 为 null，因此这不适用于这种类型的控制器；我还读到将 uitableview 的背景颜色设置为 clearColor 是一个坏主意，因为它会显着影响性能。

【参考方案11】：

我认为您不想覆盖 drawRect。您最有可能看到的是另一个视图或窗口的背景颜色，它位于表格视图的“后面”（即是超级视图）。 Apple 的 UI 小部件中通常有相当复杂的 UIView 层。探索 GDB 中的视图层次结构，查看 [myView superview] 然后 [someSuperView subviews] 并尝试在调试器中操作它们的 BG 颜色，看看你是否能找到它。但是，如果您以这种方式实施修复，请注意它可能不兼容。

您也可以尝试设置 Interface Builder 中 tableview 后面的视图之一（或窗口本身）的 BG 颜色。

【参考方案12】：

如果您使用的是 tableviewcell，您可以将视图背景设置为不透明的白色。然后使用

self.tableView.backgroundColor = [UIColor grayColor];

在视图中确实加载了方法。

【参考方案13】：

我确定那是 [UITableView backgroundColor]。 您影响了行，因为行具有 backgroundColor == clear（或半透明）。 所以，如果你让行不透明，一切都会正常工作。 这将是解决方案。

【参考方案14】：

我遵循 Peylow 为 UITableView 概述的提示，只需添加一个子视图。我对代码的唯一更改是获取更接近 Apple 应用程序中使用的颜色的颜色，此外，通过将帧原点 y 坐标减少一个像素，我使它更接近 Apple 在 UISearchbar 上方有一条线的外观：

frame.origin.y = -frame.size.height - 1

【参考方案15】：

对于任何想知道如何对底部反弹区域执行相同操作的人：

首先将具有所需背景颜色的子视图添加到表格视图的背景视图中：

self.bottomView = [[UIView alloc] initWithFrame:CGRectOffset(self.tableView.frame, 0, self.tableView.frame.size.height)];
self.bottomView.backgroundColor = whateverColorYouLike;

[self.tableView.backgroundView addSubview:self.bottomView];

然后在您的表格视图的委托中：

- (void)scrollViewDidScroll:(UIScrollView *)scrollView

    CGRect frame = self.bottomView.frame;
    frame.origin.y = self.tableView.contentSize.height - self.tableView.contentOffset.y;
    self.bottomView.frame = frame;

【参考方案16】：

在我的情况下，解决方案是为表格创建一个标题视图并分配一种颜色，它解决了我的应用程序在暗模式下反弹区域的黑色背景。我对它的 tableFooterView 做了同样的事情。

 table.tableHeaderView = UIView()
 table.tableHeaderView!.backgroundColor = UIColor.white