定制有渐变有圆角带阴影的Button

CAGradientLayer

CAGradientLayer都可以干什么？

Gradient：本身就是梯度的意思，所以在这里就是作为渐变色来理解。

1. CAGradientLayer用于处理渐变色的层结构；
2. CAGradientLayer的渐变色可以做隐式动画；
3. 大部分情况下，CAGradientLayer时和CAShapeLayer配合使用的；
4. 我们常用CAGradientLayer作PNG的遮罩效果。

关于CAGradientLayer的坐标系统

为什么要提到CAGradientLayer的坐标系统呢？

因为渐变色的作用范围，变化梯度的方向，颜色变换的作用点都和CAGradientLayer的坐标系统有关

image.png

根据上图的坐标，设定好起点和终点，渐变色的方向就会根据起点指向终点的方向来渐变了。

1. CAGradientLayer的坐标系统是从(0,0)到(1,1)绘制的矩形;
2. CAGradientLayer的frame的size不为正方形的话，坐标系统会被拉伸;
3. CAGradientLayer的startPoint和endPoint会直接决定颜色的绘制方向;
4. CAGradientLayer的颜色分割点时以0到1的比例来计算的

CAGradientLayer属性介绍

因为CAGradientLayer继承与CALayer，所以CAGradientLayer可以使用其父类CALayer所有开放的属性。

colors

/* The array of CGColorRef objects defining the color of each gradient
 * stop. Defaults to nil. Animatable. 
 定义每个渐变停止颜色的CGColorRef对象的数组。默认为零。可以做成动画。
 */

@property(nullable, copy) NSArray *colors;

设置渐变的颜色，这是个数组，可以添加多个颜色，例如：

gradientLayer.colors = @[(__bridge id)color_start.CGColor, (__bridge id)color_middle.CGColor, (__bridge id)color_end.CGColor];

locations

/* An optional array of NSNumber objects defining the location of each
 * gradient stop as a value in the range [0,1]. The values must be
 * monotonically increasing. If a nil array is given, the stops are
 * assumed to spread uniformly across the [0,1] range. When rendered,
 * the colors are mapped to the output colorspace before being
 * interpolated. Defaults to nil. Animatable.
一个可选的NSNumber对象数组，将每个渐变停止的位置定义为[0,1]
范围内的值。这些值必须是单调递增的。如果给定一个nil数组，
则假定停止均匀地分布在[0,1]范围内。
呈现时，在插值之前将颜色映射到输出颜色空间。
默认为零。可以做成动画。
 */

@property(nullable, copy) NSArray<NSNumber *> *locations;

渐变颜色的区间分布，locations的数组长度和colors一致，也可以不一致，这个值一般不用管它，默认是nil，会平均分布。

startPoint和endPoint

/* The start and end points of the gradient when drawn into the layer's
 * coordinate space. The start point corresponds to the first gradient
 * stop, the end point to the last gradient stop. Both points are
 * defined in a unit coordinate space that is then mapped to the
 * layer's bounds rectangle when drawn. (I.e. [0,0] is the bottom-left
 * corner of the layer, [1,1] is the top-right corner.) The default values
 * are [.5,0] and [.5,1] respectively. Both are animatable. 
 当绘制到图层的坐标空间时，渐变的起点和终点。起点对应第一个梯度停止，
 终点对应最后一个梯度停止。这两个点都定义在一个单位坐标空间中，
 然后在绘制时映射到层的边界矩形。(即[0,0]是图层的左下角，
 [1,1]是右上角。)默认值是[.5,0]和[.5,1]。
 都可以做成动画。*/

@property CGPoint startPoint;
@property CGPoint endPoint;

startPoint与endPoint分别为渐变的起始方向与结束方向，它是以矩形的四个角为基础的，（0，0）为左上角、（1，0）为右上角、（0，1）为左下角、（1，1）为右下角，默认是值是（0.5，0）和（0.5，1），例如：

//渐变从左下角开始
gradient.startPoint = CGPointMake(0, 1);
//渐变到右上角结束
gradient.endPoint = CGPointMake(1, 0);

type

/* The kind of gradient that will be drawn. Currently the only allowed
 * value is `axial' (the default value).
要画的梯度。目前唯一允许的值是“axial”(默认值)。
 */

@property(copy) NSString *type;

默认值是kCAGradientLayerAxial，表示按像素均匀变化。除了默认值也无其它选项。

定制一个有渐变圆角带阴影的Button

//  JWGradientShadowButon.h
#import <UIKit/UIKit.h>

@interface JWGradientShadowButon : UIButton

@property (nonatomic, strong) UIColor *shadowColor;
@property (nonatomic, strong) UIColor *gradientStartColor;
@property (nonatomic, strong) UIColor *gradientEndColor;

@end

//  JWGradientShadowButon.m

#import "JWGradientShadowButon.h"

@interface JWGradientShadowButon()

@property (nonatomic, assign) BOOL jw_enabled;
@property (nonatomic, weak) CAGradientLayer *gradientLayer;

@end

@implementation JWGradientShadowButon

- (void)awakeFromNib
{
    [super awakeFromNib];
    self.jw_enabled = YES;
}

- (instancetype)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame]) {
        self.jw_enabled = YES;
    }
    return self;
}

- (void)setBackgroundColor:(UIColor *)backgroundColor
{
    [super setBackgroundColor:[UIColor clearColor]];
}

- (void)drawRect:(CGRect)rect
{
    CGFloat selfH = rect.size.height;
    self.layer.cornerRadius = selfH / 2.0;
    self.layer.shadowColor = self.shadowColor.CGColor;
    self.layer.shadowOpacity = 1.f;
    self.layer.shadowOffset = CGSizeMake(0, 5);
    
    if (self.gradientLayer) return;
    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    CGFloat alpha = self.jw_enabled ? 1.f : .5;
    gradientLayer.opacity = alpha;
    self.gradientLayer = gradientLayer;
    gradientLayer.startPoint = CGPointMake(0.5, 0);
    gradientLayer.endPoint = CGPointMake(0.5, 1.0);
    gradientLayer.colors = @[
                             (__bridge id)self.gradientStartColor.CGColor,
                             (__bridge id)self.gradientEndColor.CGColor
                             ];
    gradientLayer.locations = @[@0.0, @1.0];
    gradientLayer.type = kCAGradientLayerAxial;
    gradientLayer.cornerRadius = selfH / 2.0;
    gradientLayer.masksToBounds = YES;
    gradientLayer.frame = CGRectMake(0, 0, rect.size.width, rect.size.height);
    [self.layer insertSublayer:gradientLayer atIndex:0];
    
    gradientLayer.shouldRasterize = self.layer.shouldRasterize = YES;
    gradientLayer.rasterizationScale = [UIScreen mainScreen].scale;
}

- (void)setEnabled:(BOOL)enabled
{
    self.alpha = enabled ? 1.f : .5f;
    self.userInteractionEnabled = enabled;
    self.jw_enabled = enabled;
}

- (void)setAlpha:(CGFloat)alpha
{
    CALayer *gradientLayer = self.layer.sublayers.firstObject;
    if ([gradientLayer isKindOfClass:[CAGradientLayer class]]) {
        gradientLayer.opacity = alpha;
    }
}

@end

调用代码

    CGFloat screenW = [UIScreen mainScreen].bounds.size.width;
    JWGradientShadowButon *btn = [JWGradientShadowButon buttonWithType:UIButtonTypeCustom];
    btn.shadowColor = [UIColor colorWithHexString:@"#FF9EA7"];
    btn.gradientStartColor = [UIColor colorWithHexString:@"#FF8578"];
    btn.gradientEndColor = [UIColor colorWithHexString:@"#E1006A"];
    [btn setTitle:@"登录" forState:UIControlStateNormal];
    btn.frame = CGRectMake((screenW - 300)/2, 100, 300, 40);
//    btn.enabled = NO;
    [self.view addSubview:btn];

image.png