UITableView顶部和底部的不同背景颜色

Question

如果您在iPhone OS 3.0的Mail应用程序中查看收件箱,您会看到向下滑动在UISearchBar上方显示浅灰色背景颜色.

现在,如果向下滚动到表格的底部,您将看到该端的背景颜色为白色.

我可以想到解决这个问题的几种方法,但它们非常hacky:

• 通过覆盖-scrollViewDidScroll,根据当前的scrollOffset更改表视图的背景颜色:
• 为UITableView提供清晰的背景颜色,然后将其superview的backgroundColor设置为渐变图案图像.

有谁知道这个问题的"最佳实践"解决方案是什么？谢谢.

Answer 1

在"弹跳区"中浅灰色背景有很好的答案......

在哪里我发现这个代码(略微修改)很有效:

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

迅速:

var frame = self.tableView.bounds
frame.origin.y = -frame.size.height
let grayView = UIView(frame: frame)
grayView.backgroundColor = .gray
self.tableView.addSubview(grayView)

Answer 2

斯威夫特 5.0+

带有扩展名的解决方案：

extension UITableView {

    func addTopBounceAreaView(color: UIColor = .white) {
        var frame = UIScreen.main.bounds
        frame.origin.y = -frame.size.height

        let view = UIView(frame: frame)
        view.backgroundColor = color

        self.addSubview(view)
    }
}

用法： tableView.addTopBounceAreaView()

Answer 3

解决此问题的最简单,最轻量级的方法是:

1. 将表视图的背景颜色设置为您想要的任何颜色 - 在您的情况下为白色.
2. 将搜索栏视图放在容器视图中.将表视图的标题视图设置为此容器视图(而不是搜索栏视图本身,这可能是您之前所做的).
3. 在该容器视图中,添加另一个子视图,其框架等于矩形(0,-480,320,480),并将该子视图的背景颜色设置为您想要的任何颜色 - 在您的情况下,为灰色.

这应该就是你需要做的.我自己做了这个并实现了我想要的外观,与Mail应用程序完全相同.使用scrollViewDidScroll是CPU资源的主要浪费,而子类化UITableView是超级凌乱的IMO.

Answer 4

将tableFooterView设置为0高度和宽度的视图,该视图超出其边界.一种简单的方法是为它添加一个大的子视图:

self.tableView.tableFooterView = [[[UIView alloc] initWithFrame:CGRectZero] autorelease];
UIView *bigFooterView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 1000)];
bigFooterView.backgroundColor = [UIColor whiteColor];
bigFooterView.opaque = YES;
[self.tableView.tableFooterView addSubview:bigFooterView];
[bigFooterView release];

相应地调整[UIColor whiteColor]和bigFooterView的宽度(如果你的tableView可以变为水平,你会希望它宽于320).这种方式在顶部你会看到你的桌面视图背景,无论你设置这个视图的背景是什么.

Answer 5

感谢Erica Sadun:

- (void) scrollViewDidScroll: (UIScrollView *) sv
{
    float percent =  sv.contentOffset.y / sv.contentSize.height;
    percent = 0.5 + (MAX(MIN(1.0f, percent), 0.0f) / 2.0f);

    sv.backgroundColor = [UIColor colorWithRed:percent * 0.20392
                                         green:percent * 0.19607
                                          blue:percent * 0.61176 alpha: 1.0f];
}

然后这是我正在使用的修改版本:

- (void)scrollViewDidScroll:(UIScrollView *)sv
{
        UIColor *backgroundColor = nil;

        float percent = sv.contentOffset.y / sv.contentSize.height;
        percent = 0.5 + (MAX(MIN(1.0f, percent), 0.0f) / 2.0f);

        if (0.5f == percent)
        {
            backgroundColor = RGBCOLOR(233.0f, 235.0f, 237.0f);
        }
        else
        {
            CGFloat r = 233.0f * (1.0f - percent) + 255.0f * percent;
            CGFloat g = 235.0f * (1.0f - percent) + 255.0f * percent;
            CGFloat b = 237.0f * (1.0f - percent) + 255.0f * percent;
            backgroundColor = RGBCOLOR(r,g,b);
        }           
        sv.backgroundColor = backgroundColor;
}

Answer 6

这是Swift 3版本:

var frame = self.tableView.bounds
frame.origin.y = -frame.size.height
let view = UIView(frame: frame)
view.backgroundColor = .gray
self.tableView.addSubview(view)