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

时间:2009-07-22 15:46:30

标签: iphone uitableview uikit uisearchbar

Apple的iPhone应用程序(如Music and Contants)在UITableView中使用搜索栏。向下滚动以使搜索栏向下移动时,滚动视图内容上方的空白区域呈浅灰色背景颜色(参见屏幕截图)。

Screenshot of Contacts app showing light gray background

(请注意,搜索栏顶部有一条稍暗的边线。这不适用于默认的UISearchBar,但是子类化应该处理它。)

我尝试设置UITableView的背景颜色,但这也会影响行。有谁知道如何实现这种效果?我是否必须覆盖实现drawRect:或者是否有内置方式?

16 个答案:

答案 0 :(得分:38)

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

您可以将子视图添加到位于内容之上的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的分隔线。

答案 1 :(得分:29)

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

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];

基本上,您正在创建一个大屏幕大视图并将其置于内容区域“上方”。你永远无法向上滚动它。

不要担心UIView的内存影响是320x480像素,它不会消耗任何重要的内存,因为CALayer没有任何有意义的内容。

注意:当“接受”的答案简单得多时,为什么这个答案是相关的?为什么不在表格视图中设置backgroundView?这是因为,在原始问题中显示的联系人应用程序的情况下,表格视图“上方”区域的不同背景颜色(浅蓝色)比表格视图“下方”区域(白色)。这种技术允许您在表格视图的上方和下方有两种不同的颜色,这是通过简单的背景无法实现的。

编辑1/2018:正如汤姆在评论中指出的那样,这个答案已经相当陈旧,并且假设所有iOS设备都具有相同的屏幕尺寸(看起来很疯狂,但在2009年就是这种情况)我回答了这个问题)。我在这里提出的概念仍然有效,但您应该使用UIScreen.main.bounds来确定实际的屏幕大小,或者您可以进入一些花哨的自动布局(建议欢迎)。我不建议在另一个答案中使用tableView.bounds,因为通常在viewDidLoad中,您的视图大小不一定是控制器调整大小后的大小。有时他们从0x0开始!

答案 2 :(得分:19)

从iOS 7开始,您可以通过更改tableview背景视图来修补此问题。

[self.tableView setBackgroundView:view];

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

答案 3 :(得分:18)

延长HusseinB's suggestion

Swift 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 :(得分:8)

此代码适用于 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)

答案 5 :(得分:7)

Swift (在iOS9上测试)

Console Application

答案 6 :(得分:4)

我只发现了一种方法。您必须将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];

答案 7 :(得分:4)

我自己刚遇到这个问题并找到了解决方案。

原因

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

事实是,在这种情况下,UITableView有3个子视图:

  1. UITableViewWrapperView
  2. UIView - 将backgroundColor设置为浅灰色
  3. UISearchBar
  4. 向下滑动tableview内容时,第二个子视图高度会动态增加,以填充UITableViewWrapperViewUITableView帧原点之间的空间。

    解决方案

    设置backgroundColorbackgroundView属性不会影响第二个子视图。 你需要做的是找到第二个视图并改变它的颜色,如下所示:

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

    在我的情况下,我需要将所有视图都设置为白色,因此我使用了以下内容,以免Apple将来更改UITableView视图层次结构:

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

答案 8 :(得分:3)

我会给你最好的方法。
首先将表视图的背景颜色设置为界面构建器中所需的背景颜色 然后响应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];

答案 9 :(得分:2)

EASIEST SOLUTION

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

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

希望它对你有所帮助。如果是的话,让其他人知道这个简单的方法来回答:)

答案 10 :(得分:1)

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

您也可以尝试在Interface Builder(或窗口本身)的tableview后面设置其中一个视图的BG颜色。

答案 11 :(得分:0)

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

self.tableView.backgroundColor = [UIColor grayColor];

在视图中执行了加载方法。

答案 12 :(得分:0)

我确定那是[UITableView backgroundColor]。 您有受影响的行,因为行有backgroundColor == clear(或半透明)。 所以,如果你将行设置为非trasparent,那么一切都会正常工作。 这将是解决方案。

答案 13 :(得分:0)

我按照Peylow概述的提示,通过简单地添加子视图来获取UITableView。我从代码中唯一的变化是抓住了一个比苹果应用程序中使用的颜色更接近的颜色,而且我通过将帧原点y坐标减少一个像素,让它更接近Apple在UISearchbar上方的一条线:

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

答案 14 :(得分:0)

对于那些想知道如何对底部反弹区域做同样事情的人:

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

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;
}

答案 15 :(得分:0)

在我的情况下,解决方案是为表格创建页眉视图并分配颜色,在深色模式下,它解决了我应用中弹跳区域中的黑色背景。我对它的tableFooterView做了同样的事情。

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