现状:
在iOS5和6的SDK里部分标准控件引入了tintColor
,来满足个性化界面的需求,但是Apple在这方面还远远做的不够。一是现在用默认控件根本难以做出界面优秀的应用,二是tintColor
所覆盖的并不够全面,在很多情况下开发者都无法使用其来完成个性化定义。
存在问题:
自定义主题界面,设计师重复地修改图片,开发者图片文件重命名、移动和导入无用功较多,下载安装包较大。
解决方案:
我们将用blending给这张图片加上另一个纯色作为tint,并保持原来的alpha通道,然后结合Core Graphics 。如下:
UIImage的类别
UIImage+Tint.h
#import
@interface UIImage (Tint)
- (UIImage *) imageWithTintColor:(UIColor *)tintColor blendMode:(CGBlendMode)blendMode;
@end
UIImage+Tint.m
#import "UIImage+Tint.h"
@implementation UIImage (Tint)
- (UIImage *) imageWithTintColor:(UIColor *)tintColor blendMode:(CGBlendMode)blendMode
{
UIGraphicsBeginImageContextWithOptions(self.size, NO, 0.0f);
[tintColor setFill];//填充颜⾊色
CGRect bounds = CGRectMake(0, 0, self.size.width, self.size.height);
UIRectFill(bounds);
//设置绘画透明混合模式和透明度
[self drawInRect:bounds blendMode:blendMode alpha:1.0f];
if (blendMode == kCGBlendModeOverlay) {
//保留透明度信息
[self drawInRect:bounds blendMode:kCGBlendModeDestinationIn alpha:1.0f];
}
UIImage *tintedImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return tintedImage;
}
@end
#import "ViewController.h"
#import "UIImage+Tint.h"
@interface ViewController ()
@property (strong, nonatomic) UIImageView *imgVBlend;
@property (strong, nonatomic) UILabel *lblMsg;
@end
@implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
[self layoutUI];
}
- (void)layoutUI {
CGPoint newPoint = self.view.center;
_imgVBlend = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"xx"]];
_imgVBlend.center = newPoint;
_imgVBlend.userInteractionEnabled = YES;
UITapGestureRecognizer *gesture = [[UITapGestureRecognizer alloc] initWithTarget:self
action:@selector(changeBlendMode:)];
gesture.numberOfTouchesRequired = 1;
gesture.numberOfTapsRequired = 1;
[_imgVBlend addGestureRecognizer:gesture];
[self.view addSubview:_imgVBlend];
_lblMsg = [[UILabel alloc] initWithFrame:CGRectMake(20, CGRectGetMaxY(_imgVBlend.frame), self.view.frame.size.width - 40, 120)];
_lblMsg.numberOfLines = 0;
_lblMsg.text = @"在屏幕中绘图时设置透明度;点击图片切换为混合模式绘制的图片";
_lblMsg.textAlignment = NSTextAlignmentLeft;
_lblMsg.textColor = [UIColor blackColor];
_lblMsg.layer.borderColor = [UIColor grayColor].CGColor;
_lblMsg.layer.borderWidth = 1.0;
[self.view addSubview:_lblMsg];
}
- (void)changeBlendMode:(UIGestureRecognizer*)gesture {
static CGBlendMode blendMode = kCGBlendModeNormal;
NSString *strMsg;
switch (blendMode) {
case kCGBlendModeNormal: {
strMsg = @"kCGBlendModeNormal: 正常;也是默认的模式。前景图会覆盖背景图";
break;
}
case kCGBlendModeMultiply: {
strMsg = @"kCGBlendModeMultiply: 正片叠底;混合了前景和背景的颜色,最终颜色比原先的都暗";
break;
}
case kCGBlendModeScreen: {
strMsg = @"kCGBlendModeScreen: 滤色;把前景和背景图的颜色先反过来,然后混合";
break;
}
case kCGBlendModeOverlay: {
strMsg = @"kCGBlendModeOverlay: 覆盖;能保留灰度信息,结合kCGBlendModeSaturation能保留透明度信息,在imageWithBlendMode方法中两次执行drawInRect方法实现我们基本需求";
break;
}
case kCGBlendModeDarken: {
strMsg = @"kCGBlendModeDarken: 变暗";
break;
}
case kCGBlendModeLighten: {
strMsg = @"kCGBlendModeLighten: 变亮";
break;
}
case kCGBlendModeColorDodge: {
strMsg = @"kCGBlendModeColorDodge: 颜色变淡";
break;
}
case kCGBlendModeColorBurn: {
strMsg = @"kCGBlendModeColorBurn: 颜色加深";
break;
}
case kCGBlendModeSoftLight: {
strMsg = @"kCGBlendModeSoftLight: 柔光";
break;
}
case kCGBlendModeHardLight: {
strMsg = @"kCGBlendModeHardLight: 强光";
break;
}
case kCGBlendModeDifference: {
strMsg = @"kCGBlendModeDifference: 插值";
break;
}
case kCGBlendModeExclusion: {
strMsg = @"kCGBlendModeExclusion: 排除";
break;
}
case kCGBlendModeHue: {
strMsg = @"kCGBlendModeHue: 色调";
break;
}
case kCGBlendModeSaturation: {
strMsg = @"kCGBlendModeSaturation: 饱和度";
break;
}
case kCGBlendModeColor: {
strMsg = @"kCGBlendModeColor: 颜色";
break;
}
case kCGBlendModeLuminosity: {
strMsg = @"kCGBlendModeLuminosity: 亮度";
break;
}
//Apple额外定义的枚举
//R: premultiplied result, 表示混合结果
//S: Source, 表示源颜色(Sa对应透明度值: 0.0-1.0)
//D: destination colors with alpha, 表示带透明度的目标颜色(Da对应透明度值: 0.0-1.0)
case kCGBlendModeClear: {
strMsg = @"kCGBlendModeClear: R = 0";
break;
}
case kCGBlendModeCopy: {
strMsg = @"kCGBlendModeCopy: R = S";
break;
}
case kCGBlendModeSourceIn: {
strMsg = @"kCGBlendModeSourceIn: R = S*Da";
break;
}
case kCGBlendModeSourceOut: {
strMsg = @"kCGBlendModeSourceOut: R = S*(1 - Da)";
break;
}
case kCGBlendModeSourceAtop: {
strMsg = @"kCGBlendModeSourceAtop: R = S*Da + D*(1 - Sa)";
break;
}
case kCGBlendModeDestinationOver: {
strMsg = @"kCGBlendModeDestinationOver: R = S*(1 - Da) + D";
break;
}
case kCGBlendModeDestinationIn: {
strMsg = @"kCGBlendModeDestinationIn: R = D*Sa;能保留透明度信息";
break;
}
case kCGBlendModeDestinationOut: {
strMsg = @"kCGBlendModeDestinationOut: R = D*(1 - Sa)";
break;
}
case kCGBlendModeDestinationAtop: {
strMsg = @"kCGBlendModeDestinationAtop: R = S*(1 - Da) + D*Sa";
break;
}
case kCGBlendModeXOR: {
strMsg = @"kCGBlendModeXOR: R = S*(1 - Da) + D*(1 - Sa)";
break;
}
case kCGBlendModePlusDarker: {
strMsg = @"kCGBlendModePlusDarker: R = MAX(0, (1 - D) + (1 - S))";
break;
}
case kCGBlendModePlusLighter: {
strMsg = @"kCGBlendModePlusLighter: R = MIN(1, S + D)(最后一种混合模式)";
break;
}
default: {
break;
}
}
_imgVBlend.image=[[UIImage imageNamed:@"xx"] imageWithTintColor:[UIColor orangeColor] blendMode:blendMode];
_lblMsg.text = strMsg;
blendMode++;
if (blendMode > kCGBlendModePlusLighter) {
blendMode = kCGBlendModeNormal;
}
}
@end
备注:
用kCGBlendModeOverlay
能保留灰度信息,用kCGBlendModeDestinationIn
能保留透明度信息。
因为每次使用UIImage+Tint
的方法绘图时,都使用了CG的绘制方法,这就意味着每次调用都会是用到CPU的Offscreen drawing,大量使用的话可能导致性能的问题(主要对于iPhone 3GS或之前的设备,可能同时处理大量这样的绘制调用的能力会有不足)。对于这里的UIImage+Tint
的实现,可以写一套缓存的机制,来确保大量重复的元素只在load的时候blend一次,之后将其缓存在内存中以快速读取。当然这是一个权衡的问题,在时间和空间中做出正确的平衡和选择,也正是程序设计的乐趣所在。