Определить правильное значение RGBA для цвета оттенка полосы с учетом дизайнерского изображения клиента?

Мне часто дают изображения-макеты, которые определяют, как должно выглядеть приложение для iPhone. Они могут быть получены из стольких разных методов, сколько существует проектов, иногда с использованием бальзамика или даже вручную, иногда с помощью Photoshop. Одна вещь, которая является общей, - это цвет оттенка полосы, который обычно указывается в соответствии с корпоративным брендом или общим дизайном приложения.

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

Учитывая пример того, как клиент представляет, как должна выглядеть панель навигации *, как определить правильный UIColor для применения к атрибуту tintColor панели?

* игнорирование мокапов, содержащих эффекты радуги, неправильно примененные градиенты и другие полеты фантазии. Соответствия цвета и яркости по центральной линии было бы достаточно. Это, по крайней мере, оправданная позиция - «То, о чем вы просите, работает не так, как iOS!»


iphone uinavigationbar uicolor
person Adam Eberbach    schedule 12.04.2011    source источник
comment
Я не думаю, что возможно выбрать правильный базовый цвет из заданного градиента.   -  person BoltClock    schedule 12.04.2011

Ответы (4)


arrow_upward
5
arrow_downward

Настройте приложение с помощью UINavigationBar / UIToolbar и трех ползунков, чтобы установить tintColor. Перемещайте ползунки, пока он не станет правильным.

Если вы также каким-то образом переносите изображение в приложение (UIPasteboard или вставляете его в ресурс), используя -[CALayer renderInContext:] и некоторую магию CoreGraphics (kCGBlendModeDifference и что-то, чтобы умножить различия; я забыл, что я использовал), вы даже можете сравнить два изображения.

Примечание к симулятору. Сначала вам нужно будет выполнить Cmd-C, чтобы «вставить» из монтажного стола Mac в монтажный стол симулятора.

Я обнаружил, что вы не можете воспроизвести градиент по умолчанию как на iPhone, так и на iPad, кроме как с tintColor = nil (у iPad по умолчанию также нет «блеска»). Вы можете подойти достаточно близко, но тогда цвет кнопки «Готово» будет неправильным.

Обычно я пробую в середине панели навигации макета.

person tc.    schedule 12.04.2011
comment
Это отличная идея - гораздо быстрее, чем изменение значений и повторный запуск. - person Adam Eberbach; 12.04.2011
comment
Как изменить tintColor панели навигации? Мой не сдвинется с места, я думал, вы можете установить его только при создании экземпляра? - person Chuck Pinkert; 28.09.2012

arrow_upward
3
arrow_downward

Отличный вопрос, на который у меня нет прямого ответа, но есть решение.

Обычно, когда я получаю дизайн, панель навигации действительно не похожа на панель навигации iPhone с оттенком. Градиент тоже обычно бывает разным. На мой взгляд, есть два пути:

  1. Получите приложение, похожее на дизайн
  2. Получите приложение в точном соответствии с его дизайном

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

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

Просто создайте категорию для UINavigationBar и переопределите drawRect. Это работает на удивление хорошо, и в большинстве случаев кнопки по умолчанию будут иметь нужный вам цвет и смешиваться без дополнительной работы.

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

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

@implementation UINavigationBar (CustomImage)
- (void)drawRect:(CGRect)rect {
UIImage *image=nil;
if (self.tag == 0)
    image = [UIImage imageNamed: @"navBarDesign1.png"];
else if (self.tag == 1)
    image = [UIImage imageNamed: @"navBarDesign2.png"];

[image drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
 }

 @end
person Ron Srebro    schedule 12.04.2011
comment
Я пробовал это, но, похоже, это не сработало. есть что-то, что я должен пропустить? - person thesummersign; 07.05.2012
comment
Трудно сказать без дополнительной информации. Просто догадываюсь, может быть, вы не используете #include для файла категории? - person Ron Srebro; 07.05.2012
comment
Я включил файл категории в свой файл prefix.pch. как и с другими файлами категорий. - person thesummersign; 08.05.2012

arrow_upward
3
arrow_downward

Разрабатывая ответ tc., вот бесплатное приложение в AppStore, которое я нашел для этого, под названием "BarTint"

http://www.appstore.com/bartint

person kwahn    schedule 18.02.2013

arrow_upward
2
arrow_downward

Я всегда устанавливаю стиль «Черный непрозрачный» (если я работаю с Interface Builder), а затем пробую самый темный цвет в дизайне (обычно области на нижнем крае) и использую этот цвет как оттенок. Это дает мне что-то действительно похожее, НО, конечно, не позволяет мне управлять световой (отражающей) стороной. Если клиенту действительно нужен точный градиент, я использую изображение (к сожалению) ...

person Valentin Radu    schedule 12.04.2011