iOS——简单实现图片渐变

在仿写知乎日报的时候，发现主页的轮播图上图片有渐变效果，这样不仅可以增加视觉效果，下方图片的文字注释也更加清晰，这里记录一下自己的仿写过程。

知乎日报——效果图1

知乎日报——效果图2

 

提取主色调

首先我们注意到，不同图片的渐变颜色是不一样的，因为只有对每张图片选择适合的主色调，渐变出来的效果才会和谐。

找到的方法：iOS根据图片获取图片的主色调

• 为了符合每张图片大小，将图片成比例缩放。

before：
CGSize thumbSize = CGSizeMake(50, 50);
after：
CGSize thumbSize = CGSizeMake(image.size.width / 20, image.size.height / 20);
 

• 渐变效果在图片下方，只提取图片中下部像素点，使主色调贴合图片中下部。

before：
for (int y = 0; y < thumbSize.height; y++) { }
after：
for (int y = image.size.height / 30; y < thumbSize.height; y++) { }
 

• 图片的文字注释为白色，背景应偏深色，这样文字的显示更清晰。这里在提取主色调时，过滤掉了颜色偏浅的像素。

before：
if (red == 255 && green == 255 && blue == 255) { }
after：
if (red >= 180 || green >= 180 || blue >= 180) { }
 

完整代码

+ (UIColor *)mostColor:(UIImage*)image {
    
    int bitmapInfo = kCGBitmapByteOrderDefault | kCGImageAlphaPremultipliedLast;
    
    //缩小图片，加快计算速度
    CGSize thumbSize = CGSizeMake(image.size.width/20, image.size.height/20);
    
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGContextRef context = CGBitmapContextCreate(NULL, thumbSize.width, thumbSize.height, 8, thumbSize.width * 4, colorSpace,bitmapInfo);
    
    CGRect drawRect = CGRectMake(0, 0, thumbSize.width, thumbSize.height);
    CGContextDrawImage(context, drawRect, image.CGImage);
    CGColorSpaceRelease(colorSpace);
    
    //统计每个点的像素值
    unsigned char *data = CGBitmapContextGetData(context);
    if (data == NULL) {
        return nil;
    }
    NSCountedSet *cls = [NSCountedSet setWithCapacity:thumbSize.width * thumbSize.height];
    
    for (int x = 0; x < thumbSize.width; x++) {
        for (int y = image.size.height / 30; y < thumbSize.height; y++) {
            int offset = 4 * (x * y);
            int red = data[offset];
            int green = data[offset+1];
            int blue = data[offset+2];
            int alpha = data[offset+3];
            //去除透明
            if (alpha > 0) {
                //去除白色
                if (red >= 180 || green >= 180 || blue >= 180) {
                    
                } else {
                    NSArray *clr = @[@(red), @(green), @(blue), @(alpha)];
                    [cls addObject:clr];
                }
            }
        }
    }
    CGContextRelease(context);
    //找到出现次数最多的那个颜色
    NSEnumerator *enumerator = [cls objectEnumerator];
    NSArray *curColor = nil;
    NSArray *MaxColor=nil;
    NSUInteger MaxCount=0;
    while ( (curColor = [enumerator nextObject]) != nil) {
        NSUInteger tmpCount = [cls countForObject:curColor];
        if ( tmpCount < MaxCount ) {
            continue;
        }
        MaxCount = tmpCount;
        MaxColor = curColor;
        
    }
    return [UIColor colorWithRed:([MaxColor[0] intValue]/255.0f) green:([MaxColor[1] intValue]/255.0f) blue:([MaxColor[2] intValue]/255.0f) alpha:([MaxColor[3] intValue]/255.0f)];
}

后来在网上又找到了一套高级的提取主色调算法，或许以后可以学习一下。
iOS图片精确提取主色调算法iOS-Palette
 

为UIView添加渐变色

提取完主色调，我们便可以添加渐变效果了。

找到的方法：为UIView添加渐变色

• 颜色渐变

//为颜色设置渐变效果
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 40, 40)];
CAGradientLayer *gradient = [CAGradientLayer layer];
//设置开始和结束位置(设置渐变的方向)
gradient.startPoint = CGPointMake(0, 0);
gradient.endPoint = CGPointMake(1, 0);
gradient.frame = CGRectMake(0, 0, 40, 40);
gradient.colors = [NSArray arrayWithObjects:(id)[UIColor redColor].CGColor, (id)[UIColorwhiteColor].CGColor, nil];
[view.layer insertSublayer:gradient atIndex:0];
[self.view addSubview:view];

• 透明度渐变

//为透明度设置渐变效果
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 40, 40)];
UIColor *colorOne = [UIColor colorWithRed:(216/255.0) green:(0/255.0) blue:(18/255.0) alpha:1.0];
UIColor *colorTwo = [UIColor colorWithRed:(216/255.0) green:(0/255.0) blue:(18/255.0) alpha:0.0];
NSArray *colors = [NSArray arrayWithObjects:(id)colorOne.CGColor, colorTwo.CGColor, nil];
CAGradientLayer *gradient = [CAGradientLayer layer];
//设置开始和结束位置(设置渐变的方向)
gradient.startPoint = CGPointMake(0, 0);
gradient.endPoint = CGPointMake(1, 0);
gradient.colors = colors;
gradient.frame = CGRectMake(0, 0, 40, 40);
[view.layerinsertSublayer:gradientatIndex:0];
[self.view addSubview:view];

个人感觉，颜色渐变主要单独显示，如更换颜色主题、夜间模式等；而透明度渐变往往配合图片和文字，作为背景使视觉效果更加平滑。

知乎日报的渐变效果作为文字背景，应用透明度渐变，且用提取出来的主色调作为color。

UIView *colorView = [[UIView alloc] init];
colorView.frame = CGRectMake(0, 250, 390, 150);

UIColor *colorOne = [[[self class] mostColor:[UIImage imageWithData:data]] colorWithAlphaComponent:1.0];
UIColor *colorTwo = [[[self class] mostColor:[UIImage imageWithData:data]] colorWithAlphaComponent:0.0];

NSArray *colors = [NSArray arrayWithObjects:(id)colorOne.CGColor, colorTwo.CGColor, nil];
CAGradientLayer *gradient = [CAGradientLayer layer];
//设置开始和结束位置(设置渐变的方向)
gradient.startPoint = CGPointMake(0, 0.5);
gradient.endPoint = CGPointMake(0, 0);
gradient.colors = colors;
gradient.frame = CGRectMake(0, 0, 390, 150);
[colorView.layer insertSublayer:gradient atIndex:0];

[imageViewButton addSubview:colorView];

实现效果

仿写——效果图1

知乎日报——效果图1

仿写——效果图2

知乎日报——效果图2

仿写——效果图3

知乎日报——效果图3

仿写——效果图4

知乎日报——效果图4

仿写——效果图5

知乎日报——效果图5