Различные цвета фона для верхней и нижней части UITableView

Question

Если вы посмотрите на свою папку «Входящие» в приложении «Почта» iPhone OS 3.0, вы увидите, что при перелистывании вниз отображается сероватый фон над надписью UISearchBar.

Теперь, если вы прокрутите вниз до нижней части таблицы, вы увидите, что цвет фона на этом конце белый.

Я могу придумать пару способов решения этой проблемы, но они довольно хакерские:

• Измените цвет фона табличного представления в зависимости от текущего scrollOffset, переопределив -scrollViewDidScroll:
• Дайте UITableView чистый фоновый цвет, а затем установите 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];

Swift:

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

Самый простой и легкий способ решить эту проблему:

1. Установите цвет фона табличного представления на любой, какой вы хотите - в вашем случае, белый.
2. Поместите вид панели поиска в контейнер. Установите представление заголовка табличного представления в это представление контейнера (вместо самого представления панели поиска, что, вероятно, было тем, что вы делали ранее).
3. В этом контейнере добавьте другое подпредставление с рамкой, равной прямоугольнику (0, -480, 320, 480), и установите цвет фона этого подпредставления на любой цвет, который вы хотите - в вашем случае, сероватый.

Это должно быть все, что вам нужно сделать. Я просто сделал это сам и добился нужного мне вида, точно так же, как приложение Mail. Использование scrollViewDidScroll - это большая трата ресурсов ЦП, а подклассы 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

Предоставлено Эрикой Садун:

- (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 метод UITableViewController:

UIColor *grayishColor = [UIColor colorWithRed:226/255.0
                                        green:231/255.0
                                         blue:237/255.0 alpha:1.0];
[self.tableView setValue:grayishColor forKey:@"tableHeaderBackgroundColor"];

Answer 8

Я решил эту проблему с использованием автопоставок. Решение работает на экранах разных размеров и с изменением ориентации.

   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

Я расширил ответ в Светло-серый фон в «зоне отскока» 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)