【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对象上