Светло-серый фон в "зоне отказов" UITableView
Приложения Apple для iPhone, такие как Music и Contants, используют панель поиска в UITableView. Когда вы прокручиваете страницу вниз так, что панель поиска перемещается вниз, пустое пространство над содержимым представления прокрутки имеет светло-серый цвет фона (см. Скриншот).
(Обратите внимание, что строка поиска имеет немного более темную линию края в верхней части. Этого не существует для UISearchBar по умолчанию, но подклассы должны позаботиться об этом.)
Я попытался установить цвет фона UITableView, но это также влияет на строки. Кто-нибудь знает, как добиться этого эффекта? Я собираюсь переопределить реализовать drawRect: или есть встроенный способ?
15 ответов
Начиная с iOS 7, вы можете изменить это, изменив фоновое представление таблицы.
[self.tableView setBackgroundView:view];
сделайте цвет фона представления таким же, как ваш родительский вид.
Установка прозрачных пленок плохо влияет на производительность. То, что вы хотите, - это серая область над панелью поиска, но она должна быть белой за пределами списка.
Вы можете добавить подпредставление к вашему 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,
Это один из моих самых любимых трюков.
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!
Чтобы расширить предложение HusseinB:
Свифт 3
let bgView = UIView()
bgView.backgroundColor = UIColor.white
self.tableView.backgroundView = bgView
Цель С
UIView *bgView = [UIView new];
bgView.backgroundColor = [UIColor whiteColor];
[self.tableView setBackgroundView:bgView];
Этот код работает в 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)
В Swift (протестировано на iOS9)
let backView = UIView(frame: self.tableView.bounds)
backView.backgroundColor = UIColor.clearColor() // or whatever color
self.tableView.backgroundView = backView
ПРОСТОЕ РЕШЕНИЕ
Самый простой способ создать разные цвета в нижней и верхней части прыгающей области табличного представления - это установить ключ tableHeaderBackgroundColor табличного представления. Делая так, вы устанавливаете верхний цвет. Я не уверен, но, возможно, есть еще один ключ для нижнего колонтитула, посмотрите. Если вы ничего не нашли, вам просто нужно установить фон табличного представления с цветом, который вы хотите показать внизу. Выше вы можете увидеть пример кода:
self.table.setValue(UIColor.blue , forKey: "tableHeaderBackgroundColor")
Надеюсь, это поможет вам. Если да, пусть другие люди узнают об этом простом способе отказаться от ответа:)
Я только столкнулся с этой проблемой самостоятельно и нашел решение.
причина
Я использовал http://sparkinspector.com/ для проверки макета табличного представления - что действительно помогло.
Дело в том, что в этом сценарии UITableView имеет 3 подпредставления:
UITableViewWrapperViewUIView- СbackgroundColorустановить светло-серый цветUISearchBar
Пока вы проводите содержимое табличного представления вниз, высота второго подпредставления динамически увеличивается, чтобы заполнить пространство между 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];
}
Я нашел только один способ сделать это. Вы должны установить 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];
Я дам вам лучший способ сделать это.
Сначала установите цвет фона табличного представления на тот, который вы хотите в конструкторе интерфейсов.
Затем ответьте делегату 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];
Я не думаю, что вы хотите переопределить drawRect. Скорее всего, то, что вы видите, - это цвет фона другого представления или окна, которое находится "позади" (то есть является супервизором) представления таблицы. Обычно в виджетах пользовательского интерфейса Apple есть довольно сложные слои UIViews. Изучите иерархию представлений в GDB, посмотрите [myView superview], а затем [someSuperView subviews] и попробуйте манипулировать их цветами BG в отладчике, чтобы посмотреть, сможете ли вы найти, какой это. Однако, если вы внедрите исправление таким образом, имейте в виду, что оно может быть несовместимо в будущем.
Вы также можете попытаться установить цвет BG одного из представлений за табличным представлением в Интерфейсном Разработчике (или самого окна).
В моем случае решение состояло в том, чтобы создать заголовок для таблицы и назначить цвет, он решил черный фон в области отказов в моих приложениях в темном режиме. Я сделал то же самое с его tableFooterView.
table.tableHeaderView = UIView()
table.tableHeaderView!.backgroundColor = UIColor.white
Для тех, кто интересуется, как сделать то же самое для нижней области отказов:
Сначала добавьте подпредставление с желаемым цветом фона в фоновое представление таблицы:
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;
}
Если вы используете tableviewcell, вы можете установить фоновый вид на непрозрачный белый. Тогда используйте
self.tableView.backgroundColor = [UIColor grayColor];
в представлении сделал метод загрузки.
Я уверен, что это [UITableView backgroundColor]. Вы затронули строки, потому что строки имеют backgroundColor == clear (или полупрозрачный). Итак, если вы сделаете строки непрозрачными, все будет работать нормально. Это будет решением.
Я последовал совету Пейлоу для UITableView, просто добавив подпредставление. Мое единственное изменение в коде состояло в том, чтобы получить цвет немного ближе к тому, который используется в приложениях Apple, плюс я немного ближе к тому, как Apple выглядела линия выше UISearchbar, уменьшив координату y начала кадра на один пиксель:
frame.origin.y = -frame.size.height - 1