版本記錄

版本號	時間
V1.0	2020.06.28 星期日

前言

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

問題描述

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

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

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

問題解決

其實就是使用UIColor 這個API的一個方法

+ (UIColor *)colorWithPatternImage:(UIImage *)image;

這里就是根據(jù)給定的patternImage返回一個UIColor拜轨。這里patternImage就是根據(jù)CoreGraphics畫出來的抽减。

下面就是寫的一個Demo 示例

首先新建一個工程，在sb中拖進去一個UILabel設(shè)置好文字和約束橄碾，拉好IBOutlet卵沉，這樣的文字控件就準(zhǔn)備完畢了颠锉，用于展示。

下面就是分類了偎箫，分別是UIColor和NSArray的分類木柬。

直接上代碼了哈

1. UIColor+Util.h

#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

@interface UIColor (Util)

/**
 *  根據(jù)漸變色返回梯度漸變色
 *
 *  @param colors數(shù)組
 *  @return 對應(yīng)顏色
 */
+ (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. 矩形邊框漸變

下面就在上面基礎(chǔ)上更改代碼實現(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)谤牡，感興趣的給個贊或者關(guān)注~~~

實用小技巧（三十六） —— 基于CoreGraphic漸變色的簡單實現(xiàn)（一）