Question

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

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

我可以想到几种解决这个问题的方法，但它们非常黑客：

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

有谁知道这个问题的“最佳实践”解决方案是什么？感谢。

Answer 1

Light gray background in “bounce area”...

有很好的答案

我发现这个代码（略微修改）很有用：

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

解决此问题的最简单，最轻量级的方法是：

将表格视图的背景颜色设置为您想要的任何颜色 - 在您的情况下为白色。
将搜索栏视图放在容器视图中。将表视图的标题视图设置为此容器视图（而不是搜索栏视图本身，这可能是您之前所做的）。
在该容器视图中，添加另一个子视图，其框架等于矩形（0，-480,320,480），并将该子视图的背景颜色设置为您想要的任何颜色 - 在您的情况下，为浅灰色。 / LI>
这应该就是你需要做的一切。我自己做了这个并实现了我想要的外观，与Mail应用程序完全相同。使用scrollViewDidScroll是CPU资源的主要浪费，而子类化UITableView是超级混乱的，IMO。

Answer 3

将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 4

由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 5

这是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)

Answer 6

具有扩展功能的Swift 3.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 7

这可能不是“最佳做法”，但如果您真的想像Apple那样做，那么就会有一个名为UITableView的私有tableHeaderBackgroundColor属性。浅灰色为#e2e7ed。

您可以在-viewDidLoad的{{1}}方法中添加类似内容：

UITableViewController

Answer 8

我使用autolayouts解决了这个问题。该解决方案适用于不同的屏幕尺寸和方向变化。

   self.tableView.tableFooterView = UIView();

   if let tableFooterView = self.tableView.tableFooterView {
         let bigFooterView = UIView();
         bigFooterView.backgroundColor = UIColor.white;
         bigFooterView.isOpaque = true;
         tableFooterView.addSubview(bigFooterView);

         bigFooterView.translatesAutoresizingMaskIntoConstraints = false;

         tableFooterView.addConstraint(NSLayoutConstraint(item: bigFooterView, attribute: .trailing, relatedBy: .equal, toItem: tableFooterView, attribute: .trailing, multiplier: 1, constant: 0));
         tableFooterView.addConstraint(NSLayoutConstraint(item: bigFooterView, attribute: .leading, relatedBy: .equal, toItem: tableFooterView, attribute: .leading, multiplier: 1, constant: 0));
         tableFooterView.addConstraint(NSLayoutConstraint(item: bigFooterView, attribute: .top, relatedBy: .equal, toItem: tableFooterView, attribute: .top, multiplier: 1, constant: 0));
         tableFooterView.addConstraint(NSLayoutConstraint(item: bigFooterView, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 1000));
   }

Answer 9

我已将Light gray background in “bounce area” of a UITableView中的答案扩展到底部。希望这会有所帮助：）

CGRect topFrame = self.tableView.bounds;
topFrame.origin.y = -topFrame.size.height;
UIView* topView = [[UIView alloc] initWithFrame:topFrame];
topView.backgroundColor = [UIColor grayColor]; // change to any color you want
[self.tableView addSubview:topView];

CGRect bottomFrame = self.tableView.bounds;
bottomFrame.origin.y = self.tableView.contentSize.height;
UIView* bottomView = [[UIView alloc] initWithFrame:bottomFrame];
bottomView.backgroundColor = [UIColor grayColor]; // change to any color you want
[self.tableView addSubview:bottomView];

Answer 10

这是我的解决方案：

    let topColor = UIColor.blue
    let bottomColor = UIColor.black

    self.tableView.backgroundColor = topColor
    self.tableView.tableFooterView = UIView(frame: CGRect.zero)
    let footerView = UIView(frame: CGRect(x: 0, y: 0, width: view.frame.width, height: 1000))
    footerView.backgroundColor = bottomColor
    self.tableView.tableFooterView?.addSubview(footerView)

Answer 11

SwiftUI 解决方案

 var body: some View {
        
        NavigationView {
            
            List(data, id: \.self) { data in
                Text("\(data)")
            }
            .onAppear {
                let headerView = UIView(frame: CGRect(x: 0, y: -400, width: UIScreen.main.bounds.width, height: 400.0))
                headerView.backgroundColor = .lightGray
                UITableView.appearance().addSubview(headerView)
            }
            .navigationBarTitle("Title", displayMode: .inline)
        }
    }

如果您想在列表下方使用不同的背景颜色，请添加另一个 UIView 以更改背景视图：

let backgroundView = UIView()
backgroundView.backgroundColor = .black
UITableView.appearance().backgroundView = backgroundView

Answer 12

您应该考虑使用tableHeaderView的{{1}}和tableFooterView属性。

Answer 13

我认为您只想将单元格的BG颜色设置为白色，并将表格的BG颜色设置为另一种（灰色）颜色。我不确定你是否已经成功尝试使用透明细胞。

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

13 个答案: