关于16进制颜色值转换为UIColor的思考

2018-02-07

1、前言

大家都知道iOS的UIColor提供的自定义初始化是通过RGB(A) 4个10进行制的参数，那么为什么用16进制呢？因为web和安卓端以常识性用16进制读取，所以为了方便设计师出图标注，很多时候都是16进制的效果图。而今天就是要讨论一下，这个16进制的转换的方法。

网页颜色 - 维基百科:

在HTML和CSS中使用3字节共6个十六进制数字表示一种颜色，每字节从00到FF，相当十进位数字从0到255，按顺序前两位是红色的值，中间两位是绿的值，最后两位是蓝色的值。

由于网页（WEB）是基于计算机浏览器开发的媒体，所以颜色以光学颜色RGB（红、绿、蓝）为主。网页颜色是以16进制代码表示，一般以“#”号开头，后面分别为R、G、B的16位进制数。 FF为最大数，代表十进制255。比如白色是R、G、B三个颜色最大，在网页代码便是：#FFFFFF。黑色是三个颜色为0，在网页代码便是：#000000。当颜色代码为#XXYYZZ时，可以用#XYZ表示，如#135与#113355表示同样的颜色。在CSS中，也可以使用rgb(127,127,127)代替#7F7F7F（十进制表示）。

有意思的是，可以知道表示颜色数总共有： 256^3 = 16,777,216 种，这个颜色就是我们常说的真彩色。

2、几种16进制颜色值转换UIColor的方式

16进制转换为10进制后的整形转换为UIColor：

1
2

// rgb颜色转换（rgbValue为16进制转换成10进制的整形）
#define MACRO_COLOR_HexCOLOR(rgbValue)         ([UIColor colorWithRed:((float)((rgbValue & 0xFF0000) >> 16))/255.0f green:((float)((rgbValue & 0xFF00) >> 8))/255.0f blue:((float)(rgbValue & 0xFF))/255.0f alpha:1.0])

方法一：

#pragma mark -16进制颜色值转化UIColor
+ (UIColor *)colorFromHexString:(NSString *)hexString
{
    unsigned rgbValue = 0;
    NSScanner *scanner = [NSScanner scannerWithString:hexString];
    [scanner setScanLocation:1]; // bypass '#' character
    [scanner scanHexInt:&rgbValue]; // Optionally prefixed with "0x" or "0X"
    
    return MACRO_COLOR_HexCOLOR(rgbValue);
}

这种方法，只能输入以#开头的十六进制颜色，比如#3c93fd，如果输入0X3c93fd，最后都会得到黑色。（因为rgbValue为0，所以全部颜色为0，得到黑色。）

方法二：

+ (UIColor *)colorWithHexString:(NSString *) hexString
 {
	NSScanner *scanner = [NSScanner scannerWithString: hexString];
	unsigned hexNum;
	if (![scanner scanHexInt:&hexNum]) return nil;
	return MACRO_COLOR_HexCOLOR(hexNum);
}

这种方法，只能输入以0X或0x开头的十六进制颜色，比如0x3c93fd，如果输入#3c93fd，最后都会得到nil（透明）。（scanner转换10进制失败，hexNum为0，但是直接return nil，）

方法三：

// 颜色转换三：iOS中十六进制的颜色（以#开头）转换为UIColor
+ (UIColor *) colorWithHexString: (NSString *)color
{
    NSString *cString = [[color stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceAndNewlineCharacterSet]] uppercaseString];

    // String should be 6 or 8 characters
    if ([cString length] < 6) {
        return [UIColor clearColor];
    }

    // 判断前缀并剪切掉
    if ([cString hasPrefix:@"0X"])
        cString = [cString substringFromIndex:2];
    if ([cString hasPrefix:@"#"])
        cString = [cString substringFromIndex:1];
    if ([cString length] != 6)
        return [UIColor clearColor];

    // 从六位数值中找到RGB对应的位数并转换
    NSRange range;
    range.location = 0;
    range.length = 2;

    //R、G、B
    NSString *rString = [cString substringWithRange:range];

    range.location = 2;
    NSString *gString = [cString substringWithRange:range];

    range.location = 4;
    NSString *bString = [cString substringWithRange:range];   

    // Scan values
    unsigned int r, g, b;
    [[NSScanner scannerWithString:rString] scanHexInt:&r];
    [[NSScanner scannerWithString:gString] scanHexInt:&g];
    [[NSScanner scannerWithString:bString] scanHexInt:&b];

    return [UIColor colorWithRed:((float) r / 255.0f) green:((float) g / 255.0f) blue:((float) b / 255.0f) alpha:1.0f];
}

作者：艳晓
链接：https://www.jianshu.com/p/96835798e4fc

这种方法，做了0x和#判断，但是为什么那么长！！！有没有办法优化？

3、优化的方法？

因为用了NSScanner 进行转换，所以为什么不用NSScanner直接判断，然后转换呢？另外苹果文档注释：

1	- (BOOL)scanHexInt:(nullable unsigned *)result; // Optionally prefixed with "0x" or "0X"

所以，其实用NSScanner 进行转换时，不用判断 “0x” or “0X”，所以直接判断 #后过滤掉(跳过)就可以啦！！！

直接看代码吧，发现看代码比文字更有力！：

+ (UIColor *) colorWithHexString:(NSString *)hexString 
{
    NSScanner *scanner = [NSScanner scannerWithString:hexString];

    //从当前的扫描位置开始扫描，判断扫描字符串是否从当前位置能扫描到和传入字符串相同的一串字符，如果能扫描到就返回YES，指针指向的地址存储的就是这段字符串的内容。
    [scanner scanString:@"#" intoString:NULL];
    
    unsigned rgbValue = 0;
    [scanner scanHexInt:&rgbValue];// Optionally prefixed with "0x" or "0X"
   
    return MACRO_COLOR_HexCOLOR(rgbValue);
}

上面的scanString: intoString:方法是一个技巧，判断是否包含#，如果包括时，scanner的scanLocation会指向下一个字符。所以用scanHexInt:将十六进制无符号整形时，已经不包含#，所以能成功转换。

4、参考引用

> 注：本文首发于 [iHTCboy's blog](http://iHTCboy.com)，如若转载，请注来源

jsonContent: meta: false pages: false posts: title: true date: true path: true text: false raw: false content: false slug: false updated: false comments: false link: false permalink: false excerpt: false categories: false tags: true