版本记录
| 版本号 | 时间 |
|---|---|
| V1.0 | 2020.06.28 星期日 |
前言
在app中，很多时候都需要熟悉一些小技巧让您事半功倍，提高工作效率，这些小技巧都很小很细。感兴趣的可以看看我写的其他小技巧。
1. 实用小技巧（一）：UIScrollView中上下左右滚动方向的判断
2. 实用小技巧（二）：屏幕横竖屏的判断和相关逻辑
3.实用小技巧（三）：点击手势屏蔽子视图的响应
4.实用小技巧（四）：动态的增删标签视图
5.实用小技巧（五）：通过相册或者相机更改图标
6.实用小技巧（六）：打印ios里所有字体
7. 实用小技巧（七）：UITableViewCell自适应行高的计算
8. 实用小技巧（八）：数字余额显示的分隔
9.实用小技巧（九）：类头条模糊背景的实现
10.实用小技巧（十）：晃动手机换后台服务器网络
11.实用小技巧（十一）：scrollView及其子类显示的一些异常处理
12.实用小技巧（十二）：头像图片缩放以及保存到相册简单功能的实现
13.实用小技巧（十三）：一种类酷我音乐盒动画实现
14.实用小技巧（十四）：生成跳往applestore指定app的方法
15.实用小技巧（十五）：左侧向右滑动返回上一级控制器
16.实用小技巧（十六）：获取设备信息
17.实用小技巧（十七）：清除缓存目录
18.实用小技巧（十八）：取出gif图的每一帧
19.实用小技巧（十九）：获取相机和麦克风权限
20.实用小技巧（二十）：游客模式的实现
21.实用小技巧（二十一）：版本检测的实现
22.实用小技巧（二十二）：键盘遮挡问题
23. 实用小技巧（二十三）：获取闪光灯的控制
24. 实用小技巧（二十四）：APP页面开启跳转逻辑处理
25. 实用小技巧（二十五）—— 关于UILabel控件宽高的计算
26. 实用小技巧（二十六）—— APP中各种权限监测和申请工具封装
27. 实用小技巧（二十七）—— 控制器跳转逻辑的封装
28. 实用小技巧（二十八）—— 一种字符串的遍历方式
29. 实用小技巧（二十九）—— 汉字的判断以及计数
30. 实用小技巧（三十）—— 数字的判断以及计数
31. 实用小技巧（三十一）—— 版本监测工具的封装
32. 实用小技巧（三十二）—— 项目中代码行数统计
33. 实用小技巧（三十三）—— json和对象之间的转化工具的封装（一）
34. 实用小技巧（三十四）—— 设置一个UILabel控件不同行文字字体样式以及行间距等个性化设置（一）
35. 实用小技巧（三十五）—— UITabBar上业务相关的红点展示和移除逻辑实现（一）
问题描述
很多页面都需要渐变色，目前有一种比较常见的设置渐变色的方式，就是写一个控件，比如UIButton或者UIView的一个子类，在子类里面实例化一个CAGradientLayer，然后在子类的根layer上add这个渐变的gradientLayer。
[self.layer insertSublayer:self.gradientLayer atIndex:0];
这个就不多说了，下面想说的是通过UIColor分类，实现自定义的颜色，满足渐变色的这个需求。
问题解决
其实就是使用UIColor 这个API的一个方法
+ (UIColor *)colorWithPatternImage:(UIImage *)image;
这里就是根据给定的patternImage返回一个UIColor。这里patternImage就是根据CoreGraphics画出来的。
下面就是写的一个Demo 示例
首先新建一个工程，在sb中拖进去一个UILabel设置好文字和约束，拉好IBOutlet，这样的文字控件就准备完毕了，用于展示。
下面就是分类了，分别是UIColor和NSArray的分类。
直接上代码了哈
1. UIColor+Util.h
#import <UIKit/UIKit.h>
NS_ASSUME_NONNULL_BEGIN
@interface UIColor (Util)
/**
* 根据渐变色返回梯度渐变色
*
* @param colors数组
* @return 对应颜色
*/
+ (UIColor*)jj_gradientColorWithColors:(NSArray*)colors
size:(CGSize)size
startPoint:(CGPoint)startPoint
endPoint:(CGPoint)endPoint;
@end
NS_ASSUME_NONNULL_END
2. UIColor+Util.m
#import "UIColor+Util.h"
#import "NSArray+Blocks.h"
@implementation UIColor (Util)
+ (UIColor*)jj_gradientColorWithColors:(NSArray*)colors
size:(CGSize)size
startPoint:(CGPoint)startPoint
endPoint:(CGPoint)endPoint
{
UIGraphicsBeginImageContextWithOptions(size, NO, 0);
CGContextRef context = UIGraphicsGetCurrentContext();
CGColorSpaceRef colorspace = CGColorSpaceCreateDeviceRGB();
NSArray* cgColors = [colors jj_map:^id(id color) {
return (id)[color CGColor];
}];
CGGradientRef gradient = CGGradientCreateWithColors(colorspace, (CFArrayRef)cgColors, NULL);
CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, kCGGradientDrawsBeforeStartLocation | kCGGradientDrawsAfterEndLocation);
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
CGGradientRelease(gradient);
CGColorSpaceRelease(colorspace);
return [UIColor colorWithPatternImage:image];
}
@end
3. NSArray+Blocks.h
#import <Foundation/Foundation.h>
NS_ASSUME_NONNULL_BEGIN
@interface NSArray<ObjectType> (Blocks)
- (NSArray *)jj_map:(id (NS_NOESCAPE ^)(ObjectType obj))block;
@end
NS_ASSUME_NONNULL_END
4. NSArray+Blocks.m
#import "NSArray+Blocks.h"
@implementation NSArray (Blocks)
- (NSArray *)jj_map:(id (NS_NOESCAPE ^)(id obj))block
{
NSParameterAssert(block != nil);
NSMutableArray *result = [NSMutableArray arrayWithCapacity:self.count];
[self enumerateObjectsUsingBlock:^(id obj, NSUInteger idx, BOOL *stop) {
id value = block(obj) ?: [NSNull null];
[result addObject:value];
}];
return result;
}
@end
5. ViewController.m
#import "ViewController.h"
#import "UIColor+Util.h"
@interface ViewController ()
@property (weak, nonatomic) IBOutlet UILabel *contentLabel;
@end
@implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
CGSize size = self.contentLabel.bounds.size;
NSArray<UIColor*> *colors = @[[UIColor redColor], [UIColor greenColor]];
CGPoint startPoint = CGPointMake(0, 0);
CGPoint endPoint = CGPointMake(size.width, 0);
self.contentLabel.textColor = [UIColor jj_gradientColorWithColors:colors size:size startPoint:startPoint endPoint:endPoint];
}
@end
下面就是看效果了哈
可以看见，自定义UIColor生效了。
拓展
1. 渐变实心
一样先在sb中拉进去一个UIImageView，在工程中添加一个UIImage的一个分类。
下面就是先看代码
1. UIImage+Util.h
#import <UIKit/UIKit.h>
NS_ASSUME_NONNULL_BEGIN
@interface UIImage (Util)
+ (UIImage*)jj_gradientCircleImageWithColors:(NSArray*)colors
size:(CGSize)size
startPoint:(CGPoint)startPoint
endPoint:(CGPoint)endPoint;
@end
NS_ASSUME_NONNULL_END
2. UIImage+Util.m
#import "UIImage+Util.h"
#import "NSArray+Blocks.h"
@implementation UIImage (Util)
+ (UIImage*)jj_gradientCircleImageWithColors:(NSArray*)colors
size:(CGSize)size
startPoint:(CGPoint)startPoint
endPoint:(CGPoint)endPoint
{
UIGraphicsBeginImageContextWithOptions(size, NO, 0);
CGContextRef context = UIGraphicsGetCurrentContext();
CGColorSpaceRef colorspace = CGColorSpaceCreateDeviceRGB();
NSArray* cgColors = [colors jj_map:^id(id color) {
return (id)[color CGColor];
}];
CGGradientRef gradient = CGGradientCreateWithColors(colorspace, (CFArrayRef)cgColors, NULL);
CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, kCGGradientDrawsBeforeStartLocation | kCGGradientDrawsAfterEndLocation);
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
CGGradientRelease(gradient);
CGColorSpaceRelease(colorspace);
return image;
}
@end
3. ViewController.m
#import "ViewController.h"
#import "UIColor+Util.h"
#import "UIImage+Util.h"
@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIImageView *circleImageView;
@end
@implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
//渐变实心底色
NSArray<UIColor*> *colors = @[[UIColor redColor], [UIColor greenColor]];
CGSize size = self.circleImageView.bounds.size;
CGPoint startPoint = CGPointMake(0, 0);
CGPoint endPoint = CGPointMake(size.width, size.height);
UIImage *circleImage = [UIImage jj_gradientCircleImageWithColors:colors size:size startPoint:startPoint endPoint:endPoint];
self.circleImageView.image = circleImage;
}
@end
下面就是实际效果
2. 矩形边框渐变
下面就在上面基础上更改代码实现边框渐变色。
- (void)viewDidLoad
{
[super viewDidLoad];
//渐变边框
NSArray<UIColor*> *colors = @[[UIColor redColor], [UIColor greenColor]];
CGSize size = self.circleImageView.bounds.size;
CGPoint startPoint = CGPointMake(0, 0);
CGPoint endPoint = CGPointMake(size.width, size.height);
UIColor *color = [UIColor jj_gradientColorWithColors:colors size:size startPoint:startPoint endPoint:endPoint];
self.circleImageView.layer.borderColor = color.CGColor;
self.circleImageView.layer.borderWidth = 1.0;
}
下面看一下实际效果
2. 圆环边框渐变
下面我们就稍微改动下，看一下圆环渐变的效果
还是直接看代码
@implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
//圆环渐变边框
NSArray<UIColor*> *colors = @[[UIColor redColor], [UIColor greenColor]];
CGSize size = self.circleImageView.bounds.size;
CGPoint startPoint = CGPointMake(0, 0);
CGPoint endPoint = CGPointMake(size.width, size.height);
UIColor *color = [UIColor jj_gradientColorWithColors:colors size:size startPoint:startPoint endPoint:endPoint];
self.circleImageView.layer.cornerRadius = size.width * 0.5;
self.circleImageView.layer.masksToBounds = YES;
self.circleImageView.layer.borderColor = color.CGColor;
self.circleImageView.layer.borderWidth = 1.0;
}
@end
下面还是看下实际效果
后记
本篇主要讲述了基于
CoreGraphic渐变色的简单实现，感兴趣的给个赞或者关注~~~
