Styling UITableViewCells с градиентными фонами

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

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

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

Спасибо.

Ответ 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 автоматически растягивается горизонтально, чтобы соответствовать ширине ячейки.

Ответ 2

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

Ответ 3

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

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

Ответ 4

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

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

Ответ 5

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

Ответ 6

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

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

Ответ 7

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