- PVSM.RU - https://www.pvsm.ru -
В ходе работы над мобильным приложением разработчики получают от дизайнеров макеты, шрифты и изображения. Преобразование этих материалов в код — нудное занятие, да и в процессе каждый норовит изобрести свой велосипед. Чтобы проекты оставались чистыми, мы приняли единую конвенцию по работе со стилями.
Это первый кандидат на кодогенерацию. Мы решили передавать список цветов в формате, который легко набрать руками и так же легко распарсить, чтобы сгенерировать категорию UIColor.
Дизайнеры собирают простой текстовый файл #COLOR — TITLE. Разработчики включают этот файл в проект, а скрипт перед компиляцией генерирует файлы с кодом и палитрой в формате CLR. Такую палитру можно использовать для работы в Interface Builder.
#B3ED3B green
#5ABBF2 blue
#FD86C9 pink
#FD4737 red
#FEAE30 orange
В использовании палитры есть несколько проблем.
Первая заключается в том, что панель Colors не обновляет список доступных палитр, как и их содержимое. Каждое приложение в OS X может иметь свой экземпляр панели Colors, и чтобы вновь сгенерированная палитра была добавлена в панель или обновилась, необходимо перезапустить всё приложение.
Поэтому мы написали небольшой плагин для Xcode, который после каждого билда передергивает все пользовательские палитры в панели Colors.
Вторая проблема происходит из формата, в котором Interface Builder сохраняет установленный для элемента цвет:
<color key="textColor" red="0.29803922772407532" green="0.85098040103912354" blue="0.39215686917304993" alpha="1" colorSpace="deviceRGB"/>
Голые цифры, и ни одного намёка на палитру — а значит, если мы её обновим, в xib/storyboard всё останется по-старому. К сожалению, эту проблему нам решить не удалось, но мы определили два возможных подхода:
Нашу утилиту для генерации категории UIColor и плагин для перезагрузки списка палитр панели Colors вы можете найти на GitHub — RMRColorTools-iOS [4].
С плагином всё просто. Необходимо клонировать репозиторий и запустить на исполнение таргет RMRRefreshColorPanelPlugin, а затем перезапустить Xcode.
Для автоматической генерации UIColor при каждом билде на вкладке Build Phases добавьте Run Script Phase с вызовом утилиты RMRHexColorGen.
Мы хотели, чтобы была одна точка входа для работы со шрифтами, поэтому на основе таблицы стилей мы реализуем категорию UIFont:
@implementation UIFont (RMRFonts)
+ (UIFont *)rmr_regularFontOfSize:(CGFloat)size
{
return [UIFont fontWithName:@"HelveticaNeue"
size:size];
}
+ (UIFont *)rmr_mediumFontOfSize:(CGFloat)size
{
return [UIFont fontWithName:@"HelveticaNeue-Medium"
size:size];
}
#pragma mark - Style fonts
+ (UIFont *)rmr_fontA1 { return [self rmr_mediumFontOfSize:17.f]; }
+ (UIFont *)rmr_fontA2 { return [self rmr_regularFontOfSize:17.f]; }
+ (UIFont *)rmr_fontB1 { return [self rmr_regularFontOfSize:14.f]; }
+ (UIFont *)rmr_fontB2 { return [self rmr_regularFontOfSize:11.f]; }
+ (UIFont *)rmr_fontB3 { return [self rmr_mediumFontOfSize:10.f]; }
@end
Провешивать на каждый label outlet для установки шрифта — даже звучит не очень. Поэтому мы реализовали сабкласс UILabel с установкой стиля при инициализации. Стиль устанавливается в конкретном сабклассе.
@implementation RMRLabel
- (void)prepareAppearance
{
// Абстрактный метод для переопределения наследниками
}
- (instancetype)initWithFrame:(CGRect)frame
{
if (self = [super initWithFrame:frame]) {
[self prepareAppearance];
}
return self;
}
- (void)awakeFromNib
{
[self prepareAppearance];
}
@end
@implementation RMRLabelA1
- (void)prepareAppearance { self.font = [UIFont rmr_fontA1]; }
@end
Это позволяет определять установленный стиль, задавая конкретный сабкласс UILabel в Interface Builder.
Профит от такой схемы (Font ⇢ UlLabel ⇢ IB) — если потребуется стиль изменить, то вся работа будет локализована в единственном файле.
В Xcode 6 мы получили возможность использовать векторные изображения в формате pdf. Вкупе с tint color и возможностью использовать изображения как шаблон мы получаем простой механизм, который позволяет забыть о танцах с ресурсами, если потребовалось на полтона изменить цвет иконок.
Цвета скодогенерировали, шрифты засабклассили, иконки перекрасили. Эти простые механизмы позволили нам уменьшить количество ошибок и упростить взаимодействие между дизайнерами и разработчиками.
Архитектурный дизайн мобильных приложений: часть 2 [5]
Архитектурный дизайн мобильных приложений: часть 1 [6]
Что может быть проще кнопки? [7]
Автор: firmach
Источник [8]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/ios-development/88566
Ссылки в тексте:
[1] Image: https://habrastorage.org/files/9b8/111/aff/9b8111affd2c4501b0a4e3946dba42b0.png
[2] Image: https://habrastorage.org/files/abb/f25/30a/abbf2530a7e3461982c4264ffba4985a.png
[3] здесь: https://github.com/ramonpoca/ColorTools/blob/master/xibcolor
[4] RMRColorTools-iOS: https://github.com/RedMadRobot/RMRColorTools-iOS
[5] Архитектурный дизайн мобильных приложений: часть 2: http://habrahabr.ru/company/redmadrobot/blog/251337/
[6] Архитектурный дизайн мобильных приложений: часть 1: http://habrahabr.ru/company/redmadrobot/blog/246551/
[7] Что может быть проще кнопки?: http://habrahabr.ru/company/redmadrobot/blog/243075/
[8] Источник: http://habrahabr.ru/post/255381/
Нажмите здесь для печати.