iOS 通过颜色生成带圆角的图片

通过颜色直接生成一张带圆角的图片

项目中经常会用到button的这个方法:

- (void)setBackgroundImage:(nullable UIImage *)image forState:(UIControlState)state

但是这里是要求传入一张图片,很多时候UI设计可能这里就不会特意的给到切图,很可能就是直接给个颜色数值,然后还要求圆角按钮圆角(如下图),这种时候怎么处理呢?

button_normal button_disable

类似图中这种怎么处理呢,分两步做

1. 首先通过颜色直接生成一张图片
2. 然后处理这张图片得到带圆角的图片

通过颜色得到图片

我的做法是给UIImage扩展一个分类,在分类中添加一个类方法,通过传入颜色和大小得到图片

+ (UIImage *)imageWithColor:(UIColor *)color size:(CGSize)size
{
    
    CGRect rect = CGRectMake(0, 0, size.width, size.height);
    
    UIGraphicsBeginImageContext(rect.size);
    
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    CGContextSetFillColorWithColor(context,color.CGColor);
    
    CGContextFillRect(context, rect);
    
    UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
    
    UIGraphicsEndImageContext();
    
    return img;
}

给图片绘制圆角

同样是在UIImage的分类中添加一个方法,传入一张图片和圆角的半径,来实现对一张图片来切圆角,通过UIBezierPath来实现的

+ (UIImage *)setCornerWithImage:(UIImage *)image cornerRadius:(CGFloat)cornerRadius{
    
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, image.size.width, image.size.height) cornerRadius:cornerRadius];
    
    UIGraphicsBeginImageContext(image.size);
    
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    CGRect rect = CGRectMake(0, 0, image.size.width, image.size.height);
    
    CGContextAddPath(ctx, path.CGPath);
    
    CGContextClip(ctx);
    
    [image drawInRect:rect];
    
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    
    UIGraphicsEndImageContext();
    
    return newImage;
}

整合上面两个方法,通过颜色得到一张带圆角的图片

同样是在UIImage的分类中添加的方法

+ (UIImage *)imageWithColor:(UIColor *)color size:(CGSize)size cornerRadius:(CGFloat)cornerRadius{
    
    UIImage *image = [self imageWithColor:color size:CGSizeMake(SCREEN_WIDTH - 30, 45)];
    
    UIImage *newImage = [self setCornerWithImage:image cornerRadius:cornerRadius];
    
    return newImage;
}

到这里来看下刚才在分类中的添加的三个方法

//通过颜色生成一张图片
+ (UIImage *)imageWithColor:(UIColor *)color size:(CGSize)size;
//给图片切割圆角
+ (UIImage *)setCornerWithImage:(UIImage *)image cornerRadius:(CGFloat)cornerRadius;
//根据颜色生成一张带圆角的图片
+ (UIImage *)imageWithColor:(UIColor *)color size:(CGSize)size cornerRadius:(CGFloat)cornerRadius;

项目需求实现

在项目中就可以灵活来调用这三个方法来实现上图中的需求了,下面是我实现的调用代码

[_checkOutBtn setBackgroundImage:[UIImage imageWithColor:[UIColor lightGrayColor]
                                                    size:CGSizeMake(SCREEN_WIDTH - 30, 45)
                                            cornerRadius:4.0]
                        forState:UIControlStateDisabled];
        
[_checkOutBtn setBackgroundImage:[UIImage imageWithColor:RGBACOLOR(48, 176, 247, 1)
                                                    size:CGSizeMake(SCREEN_WIDTH - 30, 45)
                                            cornerRadius:4.0]
                        forState:UIControlStateNormal];