Соответствие цвета «прозрачной» навигационной панели

Question

У меня есть навигатор, который настроен на просвечивание. Я не хочу это менять. Я установил цвет оттенка бара на навигационной панели, и он выглядит великолепно. Однако цвет, который я установил, не является «истинным» цветом, который отображается, так как у меня полупрозрачный набор «ДА».

У меня есть другой вид, который имеет фон. Я хотел бы установить цвет фона этого представления того же цвета, что и навигация. Однако jsut, устанавливающий цвета, не работает. Так как навигатор полупрозрачен.

Я хотел бы, чтобы фон моего представления имел ту же прозрачность, что и мои цвета.

Чтобы снова заявить, я не хочу менять прозрачность или цвет навигатора. Я хочу создать представление с таким же цветом и полупрозрачностью, что и навигация. Однако в iOS вы просто устанавливаете прозрачность на «ДА», я не уверен, какой эффект (то есть, может быть, какая альфа) действительно устанавливает. Есть ли формула, которую я могу применить к фону просмотров, чтобы соответствовать navbar?

Answer 1

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

Как оказалось, UINavigationBar фактически имеет два цветных слоя. Один из них основан на вашем цвете, а один - полупрозрачный почти белый слой.

Посмотрите на этот скриншот:

Там в два слоя.

Верхний слой (обозначенный как A) имеет мой цвет, в данном случае синий, определяемый UIColor(red: 0.13, green: 0.20, blue: 0.62, alpha: 1.00). Этот слой установлен на непрозрачность .85.

Под этим есть второй слой, обозначенный как B, с почти белым цветом фона, обозначенным как UIColor(white: 0.97, alpha: 0.5).

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

Редактировать: Как я уже сказал, вот еще информация.

Нижняя граница:

я провел еще некоторое время на этом вчера, и я нашел несколько интересных вещей: Нижняя граница в UINavigationBar фактически половина пикселей в высоту UIImageView. Он не имеет изображения, но имеет цвет фона, который определяется как UIColor(red: 0.0, green: 0.0, blue:0.0, alpha: 0.3).

Я не был уверен, почему они использовали пустой образ вместо UIView, но теперь у меня есть теория. Когда я установил границу на моем изображении FilterBar, я заметил, что мой цвет, определенный точно таким же образом, был не таким же, как у UINavigationBar.

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

Моя граница по-прежнему не того цвета. Итак, я углубился. Я начал печатать объекты вида в отладчике, и я заметил, что мой цвет границы был определен в цветовом пространстве CGColorSpaceGray, а UIImageView был определен в CGColorSpaceRGB.

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

Вот что я использовал, чтобы сделать этот цвет, в Swift:

let space : CGColorSpace = CGColorSpaceCreateDeviceRGB() 
    let color : CGColor = CGColorCreate(space, [0.0, 0.0, 0.0, 0.3]) 

Установка BorderColor слоя на color и BorderWidth 0.5, я вижу, почти идентичный вид на родную панель навигации. Я думаю, поэтому UINavigationBar использует для границы границу UIImageView. Хотя я еще не тестировал его, я подозреваю, что он есть для цветового пространства.

Слои:

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

Если прозрачность отключена, то UINavigationBar применит цвет к себе и скроет иерархию фона. Я подражал этому поведению в FilterBar.

Резюме:

Итак, подведем итог, шаги, которые необходимо предпринять, чтобы имитировать UINavigationBar:

1. Для цвета, вы хотите добавить два слоя к вашему Посмотреть. Самый верхний слой занимает barTintColor и имеет непрозрачность 85%. Для непрозрачной версии удалите лишние слои и установите цвет напрямую.

2. Чтобы соответствовать границе, используйте черный цвет с непрозрачностью 30%, убедитесь, что у вас есть правильное цветовое пространство и убедитесь, что слои фона не перекрываются, или они будут конфликтовать с вашей границей.

3. Если вы действительно хотите соответствовать поведению UINavigationBar, сделайте вид заднего плана растянутым вверх, под панелью состояния.

Вы можете увидеть мою реализацию в FilterBar on GitHub.