版本記錄

前言

在app中，很多時候都需要熟悉一些小技巧讓您事半功倍，提高工作效率，這些小技巧都很小很細。感興趣的可以看看我寫的其他小技巧。
1. 實用小技巧（一）：UIScrollView中上下左右滾動方向的判斷
2. 實用小技巧（二）：屏幕橫豎屏的判斷和相關邏輯
3.實用小技巧（三）：點擊手勢屏蔽子視圖的響應
4.實用小技巧（四）：動態(tài)的增刪標簽視圖
5.實用小技巧（五）：通過相冊或者相機更改圖標
6.實用小技巧（六）：打印ios里所有字體
7. 實用小技巧（七）：UITableViewCell自適應行高的計算
8. 實用小技巧（八）：數(shù)字余額顯示的分隔
9.實用小技巧（九）：類頭條模糊背景的實現(xiàn)
10.實用小技巧（十）：晃動手機換后臺服務器網絡
11.實用小技巧（十一）：scrollView及其子類顯示的一些異常處理
12.實用小技巧（十二）：頭像圖片縮放以及保存到相冊簡單功能的實現(xiàn)
13.實用小技巧（十三）：一種類酷我音樂盒動畫實現(xiàn)
14.實用小技巧（十四）：生成跳往applestore指定app的方法
15.實用小技巧（十五）：左側向右滑動返回上一級控制器
16.實用小技巧（十六）：獲取設備信息
17.實用小技巧（十七）：清除緩存目錄
18.實用小技巧（十八）：取出gif圖的每一幀
19.實用小技巧（十九）：獲取相機和麥克風權限
20.實用小技巧（二十）：游客模式的實現(xiàn)
21.實用小技巧（二十一）：版本檢測的實現(xiàn)
22.實用小技巧（二十二）：鍵盤遮擋問題
23. 實用小技巧（二十三）：獲取閃光燈的控制
24. 實用小技巧（二十四）：APP頁面開啟跳轉邏輯處理
25. 實用小技巧（二十五）—— 關于UILabel控件寬高的計算
26. 實用小技巧（二十六）—— APP中各種權限監(jiān)測和申請工具封裝
27. 實用小技巧（二十七）—— 控制器跳轉邏輯的封裝
28. 實用小技巧（二十八）—— 一種字符串的遍歷方式
29. 實用小技巧（二十九）—— 漢字的判斷以及計數(shù)
30. 實用小技巧（三十）—— 數(shù)字的判斷以及計數(shù)
31. 實用小技巧（三十一）—— 版本監(jiān)測工具的封裝
32. 實用小技巧（三十二）—— 項目中代碼行數(shù)統(tǒng)計
33. 實用小技巧（三十三）—— json和對象之間的轉化工具的封裝（一）
34. 實用小技巧（三十四）—— 設置一個UILabel控件不同行文字字體樣式以及行間距等個性化設置（一）
35. 實用小技巧（三十五）—— UITabBar上業(yè)務相關的紅點展示和移除邏輯實現(xiàn)（一）

問題描述

很多頁面都需要漸變色，目前有一種比較常見的設置漸變色的方式，就是寫一個控件，比如UIButton或者UIView的一個子類，在子類里面實例化一個CAGradientLayer，然后在子類的根layer上add這個漸變的gradientLayer。

[self.layer insertSublayer:self.gradientLayer atIndex:0];

這個就不多說了，下面想說的是通過UIColor分類，實現(xiàn)自定義的顏色，滿足漸變色的這個需求。

問題解決

其實就是使用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數(shù)組
 *  @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. 矩形邊框漸變

下面就在上面基礎上更改代碼實現(xiàn)邊框漸變色。

- (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. 圓環(huán)邊框漸變

下面我們就稍微改動下，看一下圓環(huán)漸變的效果

還是直接看代碼

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    //圓環(huán)漸變邊框
    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漸變色的簡單實現(xiàn)，感興趣的給個贊或者關注~~~