iOS設定漸變色

語言: CN / TW / HK
時間 2022-09-28 04:15:10
主題:

一、背景

最近的需求開發中有需要給一個label的背景色設為漸變色，谷歌了眾多答案後，基本都是使用CAGradientLayer 進行設定的，具體方法可以自行搜尋，有很多很詳細的文章。但是，這種設定有一個問題，那就是這種方法設定漸變色，本質是對layer的設定，如果是對button這種內部層級比較多得控制元件，那是比較好處理，如果是label這種層級比較單一的控制元件，會發現，設定以後並不會生效，如果強行將此layer插入到最上層，那麼label上的text就不會顯示出來了，這顯然不是我們想要的效果。

二、神奇的colorWithPatternImage

+ (UIColor *)colorWithPatternImage:(UIImage *)image; 這個方法可以直接通過改變view.backgroundColor的值，來給view設定你想要的任何背景，甚至是一張圖片，但是他也有個問題，如果設定圖片為背景色，不同的圖片大小，會佔用不同的記憶體，所以需要慎用。於是聯想起之前的CAGradientLayer 我採取瞭如下方案。

三、給View的backgroundColor的方法

給UIColor新增一個分類，就是設定我們需要的設定漸變色的方法 ``` // // UIColor+Gradient.h

import

typedef NS_ENUM(NSInteger, GradientColorDirection) { GradientColorDirectionLevel,//水平漸變 GradientColorDirectionVertical,//豎直漸變 GradientColorDirectionDownDiagonalLine,//向上對角線漸變 GradientColorDirectionUpwardDiagonalLine,//向下對角線漸變 };

@interface UIColor (Gradient)

/// 設定漸變色 /// @param size 需要漸變的大小 /// @param direction 漸變的方向 /// @param startcolor 漸變的開始顏色 /// @param endColor 漸變的結束顏色 + (instancetype)gradientColorWithSize:(CGSize)size direction:(GradientColorDirection)direction startColor:(UIColor )startcolor endColor:(UIColor )endColor;

@end // // UIColor+Gradient.m

import "UIColor+Gradient.h"

@implementation UIColor (Gradient)

  • (instancetype)gradientColorWithSize:(CGSize)size direction:(GradientColorDirection)direction startColor:(UIColor )startcolor endColor:(UIColor )endColor {

    if (CGSizeEqualToSize(size, CGSizeZero) || !startcolor || !endColor) { return nil; }

    CAGradientLayer *gradientLayer = [CAGradientLayer layer]; gradientLayer.frame = CGRectMake(0, 0, size.width, size.height);

    CGPoint startPoint = CGPointMake(0.0, 0.0); if (direction == GradientColorDirectionUpwardDiagonalLine) { startPoint = CGPointMake(0.0, 1.0); }

    CGPoint endPoint = CGPointMake(0.0, 0.0); switch (direction) { case GradientColorDirectionVertical: endPoint = CGPointMake(0.0, 1.0); break; case GradientColorDirectionDownDiagonalLine: endPoint = CGPointMake(1.0, 1.0); break; case GradientColorDirectionUpwardDiagonalLine: endPoint = CGPointMake(1.0, 0.0); break; default: endPoint = CGPointMake(1.0, 0.0); break; } gradientLayer.startPoint = startPoint; gradientLayer.endPoint = endPoint;

    gradientLayer.colors = @[(__bridge id)startcolor.CGColor, (__bridge id)endColor.CGColor]; UIGraphicsBeginImageContext(size); [gradientLayer renderInContext:UIGraphicsGetCurrentContext()]; UIImage*image = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext();

    return [UIColor colorWithPatternImage:image]; }

@end

我們用了個非常取巧的方法給所需的View添加了一個可以設定漸變色的方法，因為本質上是layer的繪製，所以並不會很吃記憶體。 使用的話： UILabel *label = UILabel.alloc.init; label.backgroundColor = [UIColor gradientColorWithSize:label.frame.size direction:GradientColorDirectionLevel startColor:[UIColor colorWithRed:176.0 green:224.0 blue:230.0 alpha:1] endColor:[UIColor colorWithRed:65.0 green:105.0 blue:225.0 alpha:1]]; ``` 這裡我只是以lable舉例，大家可以給任何有backgroundColor的屬性設定，但是前提一定要知道他的size，如果是用masonry佈局進行計算的話，可能就需要用其他更取巧的方式了。

四、總結

工作中總會遇到奇奇怪怪的問題，所以籍此來記錄一下，希望廣大開發者能少走些彎路。 轉載請註明出處。

「其他文章」
「」