Why Setbartintcolor color is lighter than the original color

Why Setbartintcolor color is lighter than the original color


The simplest answer: this is due to the translucent blur caused by [Self.navigationbar Settranslucent:no]; ================================================= but Turn from: I ' M Allen's blog First to code: Https://github.com/allenhsu/CRNavigationController 1. Performance of the problemIt is believed that many people have encountered similar problems in the adaptation process of IOS 7. When you're trying to set Navigationbar.bartintcolor, you're stuck in a dilemma, assuming your expectations are this: design draft but when Navigationbar.translucent is YES, your Navigationbar might look like this: The simplest way to do this is to compromise to set translucent to NO, so Navigationbar's background color looks consistent with the design, but the designer may throw up the groove with you. Navigationbar is not a bit of IOS 7, he hopes NavBar can still reveal the background of Gaussian blur. Throughout the APP Store, NetEase news and Facebook seem to have solved the problem better. Collected some relevant information after consciously found a good solution, so summed up the written. 2. Bartintcolor in IOS 7Bar Color calculator for iOS7 (Uitoolbar and Uinavigationbar) gives conversion and inverse conversion formulas from design color values to Uicolor: Assuming that the color value is x (0-255) in the design, convert to Uicolo The color value used for r uses the following formula:

y = (x-102)/0.6

 If you take 0-1.0 (the RGB value in Uicolor), the corresponding formula:

y = (x-0.4)/0.6

Instead:

x = 0.6 * y + 0.4

This means that only the Bartintcolor is set, and you get the RGB value of the results on the screen will not be less than 102 (0.4), in other words, such a high color brightness, can not cover the full gamut. But if your design is a high-visibility background color, such as gray (102, 102, 102), then just set Bartintcolor to pure black (0, 0, 0) to get the background color you need in the design, but most of the way this formula does not meet the requirements. Note: The color value of the results on the screen mentioned in this article refers to the colors superimposed on the white background, assuming that the color values in the design are also referred to as the white bottom overlay.   3. Imperfect SolutionThere is a solution on StackOverflow, and the author also attaches a code to GITHUB. This scheme is not perfect for me, the biggest drawback is that the color value entered in the code is not the color value of the final screen output (still with the white bottom as the reference), there is still significant chromatic aberration. This means that if you want to achieve the same effect as the design, you need to find a Magic Value by constantly adjusting, taking color, and comparing it. However, this scheme gives a good idea, that is, by overlaying a translucent calayer, to change the background color of navigationbar, or to improve the brightness of the background color. 4. Color OverlayTo reduce the space, the color overlay is simplified to two-color overlay, assuming that C1 is the current color, C2 is the color overlaid on the C1, and the Transparency (alpha/opacity) is a, then the color on the screen after overlay is (1-A) * C1 + A * c2. 5. Math ProblemsThe rest of the work is purely mathematical problems, the title is: in 2 of the calculated color superimposed on what color and transparency Layer, you can get the original colors in the design manuscript. Assuming that the design color value is n, the parameters of the incoming bartintcolor are also n (what I ask for is the resulting), according to the formula in 2, the Navigationbar comes with a background color:

B1 = 0.6 * n + 0.4

The superimposed Layer has a background color of N2 and a transparency of a, then the resulting color is:

b2 = (1-a) * B1 + A * n2  = (1-a) * (0.6 * n + 0.4) + A * n2

I hope:

B2 = n

That

(1-a) * (0.6 * n + 0.4) + A * N2 = n

Derivation gets:

N2 = 0.4 * N/A + 0. 6 * x + 0.4-0.4/a

To ensure n2 > 0, you can get:

A > (0.4-0.4 * N)/(0.6 * n + 0.4)

That is, in order to achieve some darker color, a has to take higher values, it means that the navBar permeability may be appropriately reduced, such as the NetEase Red example, a about 0.78, so look less transparent. The right side of the inequality is a decrement function, so the minimum value in RGB is computed to calculate the right maximum value to get the minimum value of a, which corresponds to the code:

1. cgfloat minval = min (MIN (Red, green),  blue); 
2.   ,
3. if  ([self convertvalue:minval  withopacity:opacity] < 0)  { 
4.     opacity =  [self minopacityforvalue:minval]; 
5. }&NBSP;
6. is  a    After the value of opacity , the color value of the superimposed  Layer  is computed by the following code: &NBSP;
7. -  (cgfloat) Convertvalue: ( CGFloat) Value withopacity: (cgfloat) opacity 
8. { 
9.      return 0.4 * value / opacity + 0.6 *  value - 0.4 / opacity + 0.4; 
10. } 

In conclusion, the background color and transparency of the superimposed layer can make the superimposed result coincide with the color value of the design manuscript, which solves the Bartintcolor adaptation problem of Navigationbar in IOS 7, which is also suitable for solving uitoolbar and Uitabbar the background color of the match. Last attached GitHub address: https://github.com/allenhsu/CRNavigationController example, red for NetEase red, blue for the face book Blue, self-test results.

Why Setbartintcolor color is lighter than the original color