【iOS開發UI篇】為UIButton的文字添加漸變色和模糊陰影特效

本文說明了如何為UIButton對象添加文字漸變色特效,以及如何為UIButton對象添加文字模糊陰影的特效

1. 漸變色特效####

titleLabel作為UIButton對象的文字屬性,改變其顏色的方法通常如下:

//創建新的UIButton對象(可以在xib中進行)
UIButton *testButton = [UIButton buttonWithType:UIButtonTypeCustom];
//設置titleLabel屬性的文字顏色(注意不能使用testLabel.titleLabel.textColor來設置)
[testButton setTitleColor:[UIColor redColor] forState:UIControlStateNormal];

要想直接更換titleLabel屬性的顏色為漸變色,我們需要重寫其drawRect:方法來進行繪制,具體操作如下:

  • 首先創建一個新的類,它繼承自UIButton,我們將用它來完成漸變色的繪制和添加工作
#import <UIKit/UIKit.h>
@interface MPButton : UIButton
//設置文字漸變色
- (void)setGradientColors:(NSArray<UIColor *> *)colors;
@end

這里我們在頭文件提供一個方法給用戶,來設置想要的漸變色數組,當然它可以設置一個顏色(即純色)或多個顏色(即漸變色)

  • 在該類的實現文件中,我們創建一個要用到的實例變量如下:
#import "MPButton.h"
@interface MPButton()
{
    NSArray *_gradientColors; //存儲漸變色數組
}
@end

這里的_gradientColors數組用來存儲從外部用戶傳遞進來的漸變顏色集合,等待重新繪制

  • 在@implementation中,我們首先實現頭文件暴露的方法來接收和保存漸變色數組:
- (void)setGradientColors:(NSArray<UIColor *> *)colors {
    _gradientColors = [NSArray arrayWithArray:colors];
}
  • 隨后,我們將會把漸變色繪制到當前UIButton對象的文字上,方法如下:
//繪制UIButton對象titleLabel的漸變色特效
- (void)setTitleGradientColors:(NSArray<UIColor *> *)colors {
    if (colors.count == 1) { //只有一種顏色,直接上色
        [self setTitleColor:colors[0] forState:UIControlStateNormal];
    } else { //有多種顏色,需要漸變層對象來上色
        //創建漸變層對象
        CAGradientLayer *gradientLayer = [CAGradientLayer layer];
        //設置漸變層的frame等同于titleLabel屬性的frame(這里高度有個小誤差,補上就可以了)
        gradientLayer.frame = CGRectMake(0, 0, self.titleLabel.frame.size.width, self.titleLabel.frame.size.height + 3);
        //將存儲的漸變色數組(UIColor類)轉變為CAGradientLayer對象的colors數組,并設置該數組為CAGradientLayer對象的colors屬性
        NSMutableArray *gradientColors = [NSMutableArray array];
        for (UIColor *colorItem in colors) {
            [gradientColors addObject:(id)colorItem.CGColor];
        }
        gradientLayer.colors = [NSArray arrayWithArray:gradientColors];
        //下一步需要將CAGradientLayer對象繪制到一個UIImage對象上,以便使用這個UIImage對象來填充按鈕的字體
        UIImage *gradientImage = [self imageFromLayer:gradientLayer];
        //使用UIColor的如下方法,將字體顏色設為gradientImage模式,這樣就可以將漸變色填充到字體上了,同理可以設置按鈕各狀態的不同顯示效果
        [self setTitleColor:[UIColor colorWithPatternImage:gradientImage] forState:UIControlStateNormal];
    }
}

//將一個CALayer對象繪制到一個UIImage對象上,并返回這個UIImage對象
- (UIImage *)imageFromLayer:(CALayer *)layer {    
    UIGraphicsBeginImageContextWithOptions(layer.frame.size, layer.opaque, 0);    
    [layer renderInContext:UIGraphicsGetCurrentContext()];
    UIImage *outputImage = UIGraphicsGetImageFromCurrentImageContext();    
    UIGraphicsEndImageContext();    
    return outputImage;
}

這個方法正是給文字上色的核心方法,通過使用CAGradientLayer類來進行漸變層的繪制,再轉化為UIImage對象,最后轉化成UIColor對象為字體上色

  • 最后,我們只需要重寫drawRect:方法來進行繪制即可:
- (void)drawRect:(CGRect)rect {
    [super drawRect:rect];
    if (_gradientColors) {
        [self setTitleGradientColors:_gradientColors];
    }
}

重寫drawRect:方法時首先調用父類的方法進行必要的繪制,然后根據外部是否調用了頭文件提供漸變色數組來決定是否進行繪制

  • 這樣完成后,只需要在必要的文件引用該文件,并使用UIButton對象調用該方法即可完成漸變色特效的繪制
- (void)viewDidLoad {
    [super viewDidLoad];
    MPButton *testButton = [[MPButton alloc] init];
    testButton.bounds = CGRectMake(0, 0, 400, 150);
    testButton.center = self.view.center;
    testButton.backgroundColor = [UIColor orangeColor];
    testButton.layer.cornerRadius = 50;
    testButton.layer.masksToBounds = YES;
    [testButton setTitle:@"這是一個測試按鈕" forState:UIControlStateNormal];
    testButton.titleLabel.font = [UIFont systemFontOfSize:30];
    [testButton setGradientColors:@[[UIColor blueColor],[UIColor greenColor]]];
    [self.view addSubview:testButton];
}

上述代碼運行后的效果圖如下:

漸變色特效演示

同樣的代碼可以作用于在故事板中繪制的UIButton對象,只需要創建對應的@property屬性、連線并使用該按鈕調用上述的setGradientColors:方法即可,同時該方法的屬性中可以填入多個顏色

2. 模糊陰影特效####

對于titleLabel的陰影,通常我們也是直接通過UIButton對象直接設定的,操作如下:

//創建新的UIButton對象(可以在xib中進行)
UIButton *testButton = [UIButton buttonWithType:UIButtonTypeCustom];
//設置titleLabel屬性的文字陰影(包括顏色和偏移)
testButton.titleLabel.shadowColor = [UIColor blackColor];
testButton.titleLabel.shadowOffset = CGSizeMake(2, 2);

這樣設置出來的陰影只是最普通的純色實色陰影效果,如果我們要實現模糊陰影(類似光暈的效果),需要將陰影效果直接設置到titleLabel的layer上,具體操作如下:

  • 我們沿用之前的自定義按鈕類,在頭文件中添加新的方法用來設置模糊陰影效果:
//設置文字模糊陰影
- (void)setSoftShadowColor:(UIColor *)color offset:(CGSize)offset;

這個方法可以讓用戶提供自己想要的模糊陰影的顏色和偏移量

  • 在@implementation中,添加新的實例變量:
@interface MPButton()
{
    NSArray *_gradientColors; //存儲漸變色數組
    UIColor *_softShadowColor; //模糊陰影顏色
    CGSize _softShadowOffset; //模糊陰影偏移
}

_softShadowColor用來存儲用戶選擇的陰影顏色,_softShadowOffset用來存儲用戶選擇的陰影偏移

  • 接下來,我們實現頭文件的方法,接收和保存陰影的相關參數:
- (void)setSoftShadowColor:(UIColor *)color offset:(CGSize)offset {
    _softShadowColor = color;
    _softShadowOffset = offset;
}
  • 下一步,我們繪制模糊陰影效果:
- (void)setTitleSoftShadowColor:(UIColor *)color offset:(CGSize)offset {
    //陰影層的擴散半徑
    self.titleLabel.layer.shadowRadius = 4.0f;
    //陰影層的透明度
    self.titleLabel.layer.shadowOpacity = 0.8;
    //陰影層的顏色,設為已存的顏色
    self.titleLabel.layer.shadowColor = color.CGColor;
    //陰影層的偏移,設為已存的偏移
    self.titleLabel.layer.shadowOffset = offset;
    self.titleLabel.layer.masksToBounds = NO;
}

注意這里的擴散半徑和透明度也可以成為參數,這里不再演示

  • 最后仍然是在重寫的drawRect:方法中調用上面的方法進行繪制:
- (void)drawRect:(CGRect)rect {
    [super drawRect:rect];
    if (_gradientColors) {
        [self setTitleGradientColors:_gradientColors];
    }
    if (_softShadowColor) {
        [self setTitleSoftShadowColor:_softShadowColor offset:_softShadowOffset];
    }
}

之后只需要為想添加陰影效果的按鈕調用相應的方法即可

[testButton setSoftShadowColor:[UIColor blackColor] offset:CGSizeMake(2, 2)];

添加過模糊陰影效果以后按鈕將是這樣的:

模糊陰影特效演示

同樣的效果也可以應用到xib中添加的UIButton對象上

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • --繪圖與濾鏡全面解析 概述 在iOS中可以很容易的開發出絢麗的界面效果,一方面得益于成功系統的設計,另一方面得益...
    韓七夏閱讀 2,791評論 2 10
  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,229評論 4 61
  • 秋天的九仙山 五蓮縣實驗小學2013級1班 鄭森 國慶節到了,爸爸和媽媽這次要帶我去爬九仙山。 早上6點多鐘的時候...
    菡萏_dfef王明娟閱讀 566評論 0 0
  • 今天順利的完成了二十多臺的工作任務,滿心期待著明天重慶一行的旅程,卻收到妹子明后天正常上班的信息。內心一萬只羊駝在...
    MORE_MAY閱讀 758評論 0 0