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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容

  • --绘图与滤镜全面解析 概述 在iOS中可以很容易的开发出绚丽的界面效果,一方面得益于成功系统的设计,另一方面得益...
    韩七夏阅读 2,708评论 2 10
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,016评论 4 62
  • 秋天的九仙山 五莲县实验小学2013级1班 郑森 国庆节到了,爸爸和妈妈这次要带我去爬九仙山。 早上6点多钟的时候...
    菡萏_dfef王明娟阅读 540评论 0 0
  • 今天顺利的完成了二十多台的工作任务,满心期待着明天重庆一行的旅程,却收到妹子明后天正常上班的信息。内心一万只羊驼在...
    MORE_MAY阅读 735评论 0 0