ios navigationBar颜色比实际设置值浅的解决方法
2016-08-08 14:13
453 查看
方法1,设置navigationBar.translucent = YES,但我自己这么用了无效果,具体原因未查明。
方法2,下载https://github.com/allenhsu/CRNavigationController,将CRNavigationController的文件夹加入自己工程,然后使用CRNavigationController创建自己的navigationController,具体使用方法可参考sample中的例子,比不使用有效果,但仍然有微小色差。
方法2的原理参考解释:http://www.tuicool.com/articles/ERBZb2
文章出处
http://blog.csdn.net/nohackcc/article/details/24467741
相信很多人在 iOS 7 的适配过程中遇到了类似 这样的问题 。当你试图通过设置
但当
最简单的方法是妥协地设置
7 ,他希望 navBar 还是可以透出高斯模糊后的背景。
纵观 App Store, 网易新闻 和 Facebook 似乎比较好地解决了这个问题。
搜集了一些相关资料后自觉找到了不错的解决方案,于是总结成文。
《Bar
color calculator for iOS7 (UIToolbar and UINavigationBar)》 给出了从设计稿色值到
假设设计稿中色值为
如果取 0-1.0(
这意味着只设置
(102, 102, 102),那么只需设置
注:本文所说的屏幕上的结果色值均指与白色底色叠加后的颜色,假设设计稿中色值亦是指白底叠加的情况。
Stackoverflow 上有一个 解决方案 ,作者也 在
GitHub 附上了代码 。这个方案在我看来并不完美,最大的缺点就是代码中输入的色值并非最终屏幕输出的色值(仍以白底为参考),仍有明显色差。这就意味着如果要实现与设计稿一致的效果,你需要通过不断地调整、取色、对比来找到一个 Magic Value。不过这个方案给出了一个很好的思路,即通过叠加一个半透明的
为了减小篇幅,这里把色彩叠加简化为两色叠加,假设
剩下的工作就是纯数学问题了,题目是: 在 2 中计算所得的颜色上叠加什么颜色和透明度的 Layer,可以得到设计稿中的原色。
假设设计稿色值为
2 中公式,
设叠加的 Layer 的背景色为
为了保证
就是说为了实现部分较深的颜色,a 不得不取较高的值,也就意味着 navBar 的通透度可能会适当降低,例如网易红的例子中,a 大概在 0.78 左右,所以看起来不那么通透。
该不等式的右边是个递减函数,所以取色值 RGB 中的最小值来计算右式最大值从而得到
在得到
Layer 的色值:
综上,这样计算出来的叠加层的背景色和透明度可以使得叠加后的结果正好与设计稿的色值一致,至此很好地解决了 iOS 7 中
最后附上 GitHub 地址: https://github.com/allenhsu/CRNavigationController样例中,Red
为网易红,Blue 为脸书蓝,自行测试效果。
方法2,下载https://github.com/allenhsu/CRNavigationController,将CRNavigationController的文件夹加入自己工程,然后使用CRNavigationController创建自己的navigationController,具体使用方法可参考sample中的例子,比不使用有效果,但仍然有微小色差。
方法2的原理参考解释:http://www.tuicool.com/articles/ERBZb2
文章出处
http://blog.csdn.net/nohackcc/article/details/24467741
如何在 iOS 7 中设置 barTintColor 实现类似网易和 Facebook 的 navigationBar 效果
1. 问题的表现
相信很多人在 iOS 7 的适配过程中遇到了类似 这样的问题 。当你试图通过设置 navigationBar.barTintColor的时候,你陷入了一个两难的困境,假设你的预期是这样的:
但当
navigationBar.translucent为
YES时,你的
navigationBar看起来可能是这样的:
最简单的方法是妥协地设置
translucent为
NO,于是
navigationBar的背景色看起来与设计稿一致了,但是设计师可能会跟你吐槽这个
navigationBar一点也不 iOS
7 ,他希望 navBar 还是可以透出高斯模糊后的背景。
纵观 App Store, 网易新闻 和 Facebook 似乎比较好地解决了这个问题。
搜集了一些相关资料后自觉找到了不错的解决方案,于是总结成文。
2. iOS 7 中的 barTintColor
《Barcolor calculator for iOS7 (UIToolbar and UINavigationBar)》 给出了从设计稿色值到
UIColor的转换和逆转换公式:
假设设计稿中色值为
x(0-255),转换到
UIColor用的色值用如下公式:
y = (x - 102) / 0.6
如果取 0-1.0(
UIColor中 RGB 的取值),对应公式:
y = (x - 0.4) / 0.6
x = 0.6 * y + 0.4
这意味着只设置
barTintColor,你得到的屏幕上结果的 RGB 值均不会小于 102(0.4),换言之,这样的颜色明度较高,无法覆盖完整的色域。但倘若你的设计稿是一个明度较高的背景色,如灰色
(102, 102, 102),那么只需设置
barTintColor为纯黑 (0, 0, 0) 就能得到设计稿中所需的背景色,但是大多情况下这个公式无法满足需求。
注:本文所说的屏幕上的结果色值均指与白色底色叠加后的颜色,假设设计稿中色值亦是指白底叠加的情况。
3. 不完美的解决方案
Stackoverflow 上有一个 解决方案 ,作者也 在GitHub 附上了代码 。这个方案在我看来并不完美,最大的缺点就是代码中输入的色值并非最终屏幕输出的色值(仍以白底为参考),仍有明显色差。这就意味着如果要实现与设计稿一致的效果,你需要通过不断地调整、取色、对比来找到一个 Magic Value。不过这个方案给出了一个很好的思路,即通过叠加一个半透明的
CALayer,来改变
navigationBar的背景色,或者说提高背景色的明度。
4. 色彩叠加
为了减小篇幅,这里把色彩叠加简化为两色叠加,假设 c1是当前颜色,
c2为覆盖在
c1上面的颜色,并且透明度(alpha/opacity)为
a,那么叠加后屏幕上的颜色为
(1 - a) * c1 + a * c2。
5. 数学问题
剩下的工作就是纯数学问题了,题目是: 在 2 中计算所得的颜色上叠加什么颜色和透明度的 Layer,可以得到设计稿中的原色。假设设计稿色值为
n,传入
barTintColor的参数也为
n(我要求的所设即所得),根据
2 中公式,
navigationBar自带的背景色为:
b1 = 0.6 * n + 0.4
设叠加的 Layer 的背景色为
n2,透明度为
a,那么叠加后得到的颜色为:
b2 = (1 - a) * b1 + a * n2 = (1 - a) * (0.6 * n + 0.4) + a * n2
b2 = n
(1 - a) * (0.6 * n + 0.4) + a * n2 = n
n2 = 0.4 * n / a + 0. 6 * x + 0.4 - 0.4 / a
为了保证
n2 > 0,可以得到:
a > (0.4 - 0.4 * n) / (0.6 * n + 0.4)
就是说为了实现部分较深的颜色,a 不得不取较高的值,也就意味着 navBar 的通透度可能会适当降低,例如网易红的例子中,a 大概在 0.78 左右,所以看起来不那么通透。
该不等式的右边是个递减函数,所以取色值 RGB 中的最小值来计算右式最大值从而得到
a的最小值,该步对应代码中的:
CGFloat minVal = MIN(MIN(red, green), blue); if ([self convertValue:minVal withOpacity:opacity] < 0) { opacity = [self minOpacityForValue:minVal]; }
在得到
a即
opacity的值后,通过以下代码计算得到叠加的
Layer 的色值:
- (CGFloat)convertValue:(CGFloat)value withOpacity:(CGFloat)opacity { return 0.4 * value / opacity + 0.6 * value - 0.4 / opacity + 0.4; }
综上,这样计算出来的叠加层的背景色和透明度可以使得叠加后的结果正好与设计稿的色值一致,至此很好地解决了 iOS 7 中
navigationBar的
barTintColor的适配问题,该方法同样适用于解决
UIToolBar和
UITabBar的背景色的适配。
最后附上 GitHub 地址: https://github.com/allenhsu/CRNavigationController样例中,Red
为网易红,Blue 为脸书蓝,自行测试效果。
相关文章推荐
- ios navigationBar颜色比实际设置值浅的解决方法
- navigationItem.rightBarButtonItem 设置背景图片,颜色更改解决的方法
- iOS设置导航栏navigationBar大小、颜色、透明度等一切操作(WRNavigationBar)
- navigationItem.rightBarButtonItem 设置背景图片,颜色更改解决办法
- ios 5.0 设置navigationbar / toolbar 背景图片的方法 (以前用的设置navgationbar的背景图片的方法已经失效)
- ios设置navigationbar.title字体的方法
- iOS NavigationBar颜色设置方案探究
- iOS 设置UINavtionController navigationBar 为透明颜色
- iOS下图像颜色检测、颜色匹配的解决方法
- iOS7 UINavigationBar设置白色但是出现半透明解决方法
- iOS ----- navigationController.navigationBar 设置背景透明
- div没有设置颜色时z-index不起作用的解决方法
- 设置navigation完全透明效果(How to make navigation bar transparent in iOS 7)
- AD9制作负片时孔颜色设置解决方法
- 设置navigationbar title颜色
- IOS怎么设置View的背景会比较顺畅比较好的解决方法
- ios中用drawRect方法绘图的时候设置颜色
- IOS开发代码分享之设置UISearchBar的背景颜色
- ios自定义导航navigation,设置navigation的背景图,navigation左边按钮,以及navigation字体颜色
- UINavigationController navigationBar 背景颜色设置问题