Светло-серый фон в “области отскока” UITableView

Question

Приложения Apple для iPhone, такие как Music и Contants, используют строку поиска в UITableView.Когда вы прокручиваете страницу вниз, так что строка поиска перемещается вниз, пустое пространство над содержимым прокрутки приобретает светло-серый цвет фона (см. скриншот).

(Обратите внимание, что панель поиска имеет немного более темную краевую линию в верхней части.Этого нет для UISearchBar по умолчанию, но подклассы должны позаботиться об этом.)

Я попытался установить цвет фона UITableView, но это также влияет на строки.Кто-нибудь знает, как добиться такого эффекта?Придется ли мне переопределять реализацию drawRect:или есть какой-то встроенный способ?

Answer 1

Начиная с iOS 7, вы можете изменить это, изменив фоновый вид tableview.

[self.tableView setBackgroundView:view];

сделайте цвет фона вида таким же, как цвет вашего родительского вида.

Answer 2

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

Вы можете добавить вложенный просмотр в свой 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.

Answer 3

Это один из моих самых любимых трюков.

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!

Answer 4

Распространяться на Предложение Хусейнба:

Быстрый 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];

Answer 5

Этот код работает в Быстрый фот 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)

Answer 6

В Быстрый (протестировано на iOS9)

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

Answer 7

Я нашел только один способ сделать это.Вы должны установить backgroundColor UITableView прозрачным, установить backgroundColor contentView ячейки на любой цвет, которым вы хотите, чтобы были фактические ячейки, затем, что крайне важно, вы должны получить светло-серый цвет, который будет отображаться за UITableView.Этот последний шаг вы можете выполнить, либо установив backgroundColour UIWindow, либо того, что содержит ваш 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];

Answer 8

Я только что сам столкнулся с этой проблемой и нашел решение.

Потому что

Я использовал Инспектор искр изучить макет табличного представления - что действительно помогло.

Дело в том, что в этом сценарии UITableView имеет 3 подвида:

1. UITableViewWrapperView
2. UIView - С backgroundColor установить светло-серый цвет
3. UISearchBar

Когда вы проводите пальцем по содержимому tableview вниз, высота второго подвида динамически увеличивается, чтобы заполнить пространство между UITableViewWrapperView и тот UITableView начало кадра.

Решение

Установка backgroundColor или backgroundView свойство не повлияет на 2-й подраздел.Что вам нужно сделать, это найти второй вид и изменить его цвет, вот так:

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

В моем случае мне нужно было, чтобы все виды были белыми, поэтому я использовал следующее, которое менее подвержено будущим изменениям UITableView просмотр иерархии по Apple:

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

Answer 9

САМОЕ ПРОСТОЕ РЕШЕНИЕ

Самый простой способ создать разные цвета внизу и вверху прыгающей области табличного представления - это установить ключ Цвет заголовка таблицы backgroundColor из табличного представления.Поступая таким образом, вы устанавливаете верхний цвет.Я не уверен, но, возможно, есть другой ключ для нижнего колонтитула, взгляните.Если вы ничего не найдете, вам просто нужно задать фон табличного представления тем цветом, который вы хотите отобразить внизу.Выше вы можете увидеть пример кода:

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

Надеюсь, это поможет вам.Если да, сообщите другим людям об этом простом способе отказа в ответе :)

Answer 10

Я дам вам лучший способ сделать это.
Сначала установите цвет фона табличного представления на тот, который вы хотите использовать в interface builder.
Затем ответьте делегату 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];

а затем установите цвет супервизора на белый

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

Answer 11

Я не думаю, что вы хотите переопределить drawRect .Скорее всего, то, что вы видите, - это цвет фона другого вида или окна, которое находится "позади" (т.е.является супервизором) табличного представления.Обычно в виджетах пользовательского интерфейса Apple присутствуют довольно сложные слои UIViews.Изучите иерархию представлений в GDB, посмотрите на [MyView superview], а затем на [someSuperView subviews] и попробуйте манипулировать их цветами BG в отладчике, чтобы посмотреть, сможете ли вы найти, какой это.Однако, если вы реализуете исправление таким образом, имейте в виду, что оно может быть несовместимо с будущим.

Вы также можете попробовать установить цвет BG для одного из видов за tableview в Interface Builder (или для самого окна).

Answer 12

Если вы используете tableviewcell, вы можете установить непрозрачный белый фон для просмотра.Затем используйте

self.tableView.backgroundColor = [UIColor grayColor];

в представлении сделал метод load.

Answer 13

Я уверен, что это [UITableView backgroundColor].Вы затронули строки, потому что строки имеют backgroundColor == прозрачный (или полупрозрачный).Итак, если вы сделаете строки непрозрачными, все будет работать нормально.Это и будет решением.

Answer 14

Я последовал совету, изложенному Пейлоу, для UITableView, просто добавив вложенный просмотр.Моим единственным изменением в коде было выбрать цвет, немного более близкий к тому, который используется в приложениях Apple, плюс я приблизил его к тому, как выглядит линия Apple над панелью пользовательского поиска, уменьшив исходную координату y кадра на один пиксель:

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

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