Стиль UITableViewCells с градиентным фоном

Question

Я искал способы улучшить общую привлекательность моих приложений для iPhone. Большая часть функциональности происходит в UITableView. Я думаю, что я могу начать с добавления тонких градиентов в UITableViewCells, так как это, кажется, улучшает порядок приложения на порядок. Выбор подходящих шрифтов / размеров также очень помогает. Мой вопрос к этому форуму: какова лучшая стратегия добавления градиентов в UITableViewCells? Вы используете Core Graphics / Quartz? Используете ли вы изображение 1x1 пикселей и растягиваете его? Мне интересно кое-что из следующего скриншота приложения Tumblr для iPhone: http://dl -client.getdropbox.com / u / 57676 / screenshots / tumblr.jpg

У кого-нибудь есть хорошие примеры того, как заставить ваш UITableViewCell выделиться?

А из соображений производительности лучше использовать изображение или рисовать с помощью Quartz? Если бы Кварц, я хотел бы увидеть некоторые примеры кодов того, как люди рисуют градиенты в ячейках.

Спасибо.

Answer 1

Я работаю на Tumblr, и хотя я не писал приложение для iPhone ( он написал ), у меня есть источник и я могу рассказать вам, как это делается.

В -tableView:cellForRowAtIndexPath:

cell.backgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"postCellBackground.png"]];
cell.selectedBackgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"postCellBackgroundSelected.png"]];

Довольно просто, на самом деле: изображения PNG в UIImageView в качестве фоновых представлений ячейки.

Эти два изображения представляют собой вертикальные градиенты 1x61, которые UIKit автоматически растягивает по горизонтали, чтобы соответствовать ширине ячейки.

Answer 2

Начиная с iPhone SDK 3.0, существует гораздо более простое решение, которое опирается на новый CAGradientLayer и не требует создания подклассов или изображений .

Answer 3

Ответ Марко отлично подходит для простых ячеек табличного представления и для ячеек сгруппированного табличного представления, которые расположены в середине табличного представления, но если вы попытаетесь установить фоновое представление для первой / последней ячейки в сгруппированной таблице, тогда он сломать закругленные углы. Чтобы исправить это, вы можете установить цвет фона ячейки на UIColor colorWithPatternImage , например:

cell.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"Gradient.png"]]; 

Answer 4

Ответ Мирко - хорошая альтернатива, если вы не хотите использовать изображение. Однако лучше добавить градиент в backgroundView, а не в сам UITableViewcell. Таким образом, вы не потеряете эффект выделения при выборе ячейки

Answer 5

Я думаю, что на сегодняшний день самый простой способ обработки UITableView с пользовательской ячейкой - это использование Interface Builder. Это делает работу с пользовательским интерфейсом намного проще, чем с помощью чистого ядра. Вот отличный учебник (с видео!) О том, как это сделать. Настоятельно рекомендуется. Я не использую никакой другой метод кодирования UITableView, так как следовал этому.

Сказав это, добавить градиент в вашу ячейку будет очень легко. Просто используйте InterfaceBuilder, чтобы добавить изображение, содержащее ваш градиент, к представлению ячейки, и все готово. Вам не придется беспокоиться о Quartz, и с точки зрения производительности вы получите аналогичные результаты, поскольку компоненты CocoaTouch очень хорошо оптимизированы для выполнения простых задач, таких как отображение изображения.

Answer 6

UITableViewCell поддерживает отдельные представления для своего фона и выбранного фона, поэтому имеет смысл использовать эти свойства. Для этого вам понадобится создать изображение, которое в любом случае будет соответствовать размеру вашей ячейки (UIImageView не растягивает его изображение), так что вы можете сделать это один раз на настольном компьютере и сохранить циклы на телефоне, которые придется потратить, чтобы растянуть изображение или сделать его динамически. Хотя, если вы хотите разрешить пользователю изменять цвета градиента, вам все равно придется создать его один раз динамически.

Answer 7

Я бы использовал Quartz 2D для этого, но настройка изображений в Photoshop также вполне подходит.

Что касается производительности, если вы повторно используете ячейки по типу, я не думаю, что это будет проблемой - но если вы все же найдете это узкое место, вы могли бы нарисовать один раз в растровом контексте, получить изображение из этого и использовать это везде - своего рода гибридное решение.