For example, in the work, we often meet the wonderful design drawings designed by wonderful flowers. This time, let's talk about the gradient color buttons designed for us, as shown in the following figure

How to achieve it?

Create a new View as a button to operate on the View layer. First, you can pass messages, and then add gradients according to the fillets

   UIView *intbirView = [[UIView alloc]initWithFrame:CGRectMake((ScreenWidth-205)/2, ScreenHeight/2, 205, 44)];
    intbirView.userInteractionEnabled = YES;  //Ensure messages can be delivered
    intbirView.layer.cornerRadius = 22;
    intbirView.layer.masksToBounds = YES;     //fillet
    [intbirView.layer addSublayer:[self setGradualChangingColor:intbirView fromColor:@"F7F78C" toColor:@"F8FAD8"]];      //Beginning of gradual change
    [self.view addSubview:intbirView];
    UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(inivtedFirend)]; //Add gesture
    [intbirView addGestureRecognizer:tap];
    
    UILabel *label = [[UILabel alloc]init];
    label.text = @"Invite friends";
    label.textColor = [UIColor colorWithRed:248/255.0 green:105/255.0 blue:82/255.0 alpha:1/1.0];
    label.font =  [UIFont fontWithName:@"PingFangSC-Medium" size:20];
    label.textAlignment = NSTextAlignmentCenter;
    [intbirView addSubview:label];
    label.sd_layout
    .centerYEqualToView(intbirView)
    .centerXEqualToView(intbirView)
    .heightIs(28).widthIs(100);

The specific method of gradient is [self setgradualchangingcolor: intbirview from color: @ "f78c" tocolor: @ "f8fad8"] one of the parameters required for this method is the color at the beginning followed by the color at the end, which returns a CAGradientLayer added to the View layer

//How to draw gradient color
- (CAGradientLayer *)setGradualChangingColor:(UIView *)view fromColor:(NSString *)fromHexColorStr toColor:(NSString *)toHexColorStr{
    
    //    The CAGradientLayer class draws the gradient background color, the shape of the fill layer (including the fillet)
    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.frame = view.bounds;
    
    //  To create an array of gradient colors, you need to convert it to CGColor colors (because this button has three sections of color change, so there are three elements)
    gradientLayer.colors = @[(__bridge id)[self colorWithHex:fromHexColorStr].CGColor,(__bridge id)[self colorWithHex:toHexColorStr].CGColor,
                             (__bridge id)[self colorWithHex:fromHexColorStr].CGColor];
    
    
    //  Set the gradient color direction, the upper left point is (0,0), the lower right point is (1,1)
    gradientLayer.startPoint = CGPointMake(0, 0.5);
    gradientLayer.endPoint = CGPointMake(1, 0.5);
    
    //  Set color change point, value range 0.0 ~ 1.0 (so there are three change points)
    gradientLayer.locations = @[@0,@0.5,@1];
    
    return gradientLayer;
}

Color method

//How to get hexadecimal color
-(UIColor *)colorWithHex:(NSString *)hexColor {
    hexColor = [hexColor stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceCharacterSet]];
    if ([hexColor length] < 6) {
        return nil;
    }
    if ([hexColor hasPrefix:@"#"]) {
        hexColor = [hexColor substringFromIndex:1];
    }
    NSRange range;
    range.length = 2;
    range.location = 0;
    NSString *rs = [hexColor substringWithRange:range];
    range.location = 2;
    NSString *gs = [hexColor substringWithRange:range];
    range.location = 4;
    NSString *bs = [hexColor substringWithRange:range];
    unsigned int r, g, b, a;
    [[NSScanner scannerWithString:rs] scanHexInt:&r];
    [[NSScanner scannerWithString:gs] scanHexInt:&g];
    [[NSScanner scannerWithString:bs] scanHexInt:&b];
    if ([hexColor length] == 8) {
        range.location = 4;
        NSString *as = [hexColor substringWithRange:range];
        [[NSScanner scannerWithString:as] scanHexInt:&a];
    } else {
        a = 255;
    }
    return [UIColor colorWithRed:((float)r / 255.0f) green:((float)g / 255.0f) blue:((float)b / 255.0f) alpha:((float)a / 255.0f)];
}

Let's try