iOS中 Xib、StoryBoard 设置颜色与代码设置颜色不一致的坑

一样的色值,颜色为何不一致?

话说写UI的时候习惯了 XIB 和 故事版的拖拽,但是偶尔也会使用代码构建UI的时候,一次偶然发现 代码给UI控件加的颜色和使用XIB(同StoryBoard )直接设置的颜色 竟然不一致,这就让人困惑。直接用一个颜色测试下吧。
首先 设计稿中 UI给出的色值是 #214361

WechatIMG46.jpeg

然后我在代码 设置颜色和Xib设置颜色作比较
代码设置颜色很简单

//使用UIColor的 extension 为设置颜色添加一个类方法
extension UIColor {
    static func HexValue(hexValue:Int) -> UIColor {
        return UIColor(red:((CGFloat)((hexValue & 0xFF0000) >> 16))/255.0,
                       green:((CGFloat)((hexValue & 0xFF00) >> 8))/255.0,
                       blue: ((CGFloat)(hexValue & 0xFF))/255.0,
                       alpha: 1.0);
    }
}
       label1.backgroundColor = UIColor.HexValue(hexValue: 0x214361)

//或者也可以直接使用
       label1.backgroundColor = UIColor(red:33.0/255.0,
                                                           green:67.0/255.0,
                                                             blue:97.0/255.0,
                                                            alpha:1.0)

使用XIb设设置颜色首先最好收藏下某个颜色,

WechatIMG51.jpeg

点击 设置-->New 新建一个分组
然后回到这里 把色值 214361 copy 进去
屏幕快照 2019-09-18 下午4.15.21.png

再次回到Add的页面,点击 + 就可以将这个颜色进行添加,常用的颜色都可以添加,Xib使用很方便,特别是Swift 下 使用
ColorLiter 直接也可以使用在这里收藏的颜色
WechatIMG52.jpeg

好了这有点算是跑题了
下面看下 代码 和 XIB 设置 颜色后的效果
1568796632326.jpg

明显看出来 左边和右边的 颜色不一样,虽然色值都是都是0x214361(R:33 G:67 B:97)
来 我们使用Mac 自带的测色计测试下
来自左边的代码颜色的截图
屏幕快照 2019-09-18 下午5.07.31.png

可以看出来在 sRGB 模式下 测色计出来的图和 实际代码下设置的颜色是基本吻合(这个截图有点不好截)
来自XIB设置下的截图
屏幕快照 2019-09-18 下午5.11.52.png

可以看出在Xib设置下图片的RGB值在测色计下明显不一致 为(R:43 G:85 B:116)
同样都是在 sRGB模式下
问题出在哪里?
其实问题出在在颜色版里边添加颜色时候的设置

1568798563847.jpg

我们在颜色版里面添加颜色的时候要选择 sRGB 模式 不要选择 Generic RGB 或者 Device RGB 的
这样UI实际给的色值 才会与我们在代码和XIb中设置的一致
重新设置后我们再跑下模拟器
1568799119062.jpg

可以使用测试计测试下 都为R:33 G:67 B:97)与我们想要的颜色的初衷一致

总结一下:

1.Xib设置颜色比较方便的做法是 自建分组,添加收藏,随用随取(提示)
2.Xib添加颜色 在颜色面板下使用 sRGB IEC61966-2.1m模式设置(重要)
3.使用系统测色计测试的时候也要设置为sRGB模式(提示)

你可能感兴趣的:(iOS中 Xib、StoryBoard 设置颜色与代码设置颜色不一致的坑)