在项目中，遇到UI设计师要求整个项目中的按钮样式修改，由小圆角按钮改为“一定倾斜度的渐变色” + 两头半圆形 + 浅色阴影效果，容易想到的实现方式就是，让UI切图来实现；其实更好的方法是自定义一个按钮的子类，让子类具有那些效果，这样只需要使用子类去初始化按钮，按钮就具有了这种特性。
UI切图实现的优缺点：
优点：只需要给按钮设置可点击和不可点击的图片即可，不用管设置阴影、圆角、倾斜角度渐变色背景的代码
缺点：
1. UI需要切很多的图，可点击、不可点击状态下的图，UI设计师工作量大。
2. 自己要手动去一个一个设置图片，开发人员工作量大。
3. 后续如果还有这种按钮，还需要UI设计师切图，自己手动设置图片。。
4. 后续要修改成其他样式呢？。。。。。
自定义按钮子类实现的优缺点
优点：
1. 不需要UI切图，UI只需要把渐变的几个颜色值、倾斜的角度、阴影的属性告诉开发、给出一样参照例子。
2. 项目中所有要具有这种效果的按钮只需要将UIbutton改为自定义的类名即可，简单方便
3. 后续如果有其他页面中按钮需要这样的效果，只需要使用子类去创建视图即可，可拓展性好
4. 一改全改，修改子类，所有效果都可以跟着变，方便做统一修改。
缺点：需要将子类效果写好需要一点时间
经过上面的分析可以看出，我们该做出怎样的选择。
自定义按钮实现效果
效果如上
实现的参考代码：
- (void)drawRect:(CGRect)rect {
UIColor *color_middle = [UIColor colorWithHexString:@"#ff6a00"];
CGFloat selfH = rect.size.height;
self.layer.cornerRadius = selfH/2;
self.layer.shadowColor = color_middle.CGColor;
self.layer.shadowOpacity = 0.35f;
self.layer.shadowOffset = CGSizeMake(0, 3.5 * selfH/41);
if (self.gradientLayer) return;
UIColor *color_start = RGB(251,138,36);// [UIColor redColor];
UIColor *color_end = RGB(255,102,0);//[UIColor greenColor];
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
CGFloat alpha = self.wj_enabled?1.f:.5;
gradientLayer.opacity = alpha;
self.gradientLayer = gradientLayer;
gradientLayer.colors = @[(__bridge id)color_start.CGColor, (__bridge id)color_middle.CGColor, (__bridge id)color_end.CGColor];
// gradientLayer.position = self.center;
gradientLayer.locations = @[@0.0, @.5, @1.0];
gradientLayer.type = kCAGradientLayerAxial;
gradientLayer.startPoint = CGPointMake(0, .5);
gradientLayer.endPoint = CGPointMake(1.f, .6);
gradientLayer.cornerRadius = selfH/2;
gradientLayer.masksToBounds = YES;
gradientLayer.frame = CGRectMake(0, 0, rect.size.width, rect.size.height);
[self.layer insertSublayer:gradientLayer atIndex:0];
// DLOG(@"gradientLayerdrawRect");
gradientLayer.shouldRasterize = self.layer.shouldRasterize = YES; // 光栅化，设置后会有缓存效果，提升运行效率
gradientLayer.rasterizationScale = [UIScreen mainScreen].scale;// 如果不这样设置，在使用masksToBounds的时候可能会有锯齿状
}
具体实现代码：
网友评论